v9: Fixing flaky cypress test "Macro in Grid" (#11485)

* fixed flaky macro test and updated cypress version

* fixed flaky macro test and updated cypress version

* Update package.json

* Fixed failing tabs test

* Amend magic numbers with actual wait

* Update tests/Umbraco.Tests.AcceptanceTest/cypress/integration/Content/content.ts

* Updated UI to click on button instead of icon

* Make macro test click bottom to ensure we're not clicking on icon

Co-authored-by: Nikolaj Geisle <[email protected]>
(cherry picked from commit 34be464)

# Conflicts:
#	tests/Umbraco.Tests.AcceptanceTest/cypress/integration/Tabs/tabs.ts

Author: Zeegaan

src/Umbraco.Tests.AcceptanceTest/cypress/integration/Content/content.ts

@@ -766,7 +766,8 @@ context('Content', () => {
         // Click macro
         cy.get(':nth-child(4) > .umb-card-grid-item > :nth-child(1)').click();
         // Select the macro
-        cy.get('.umb-card-grid-item').contains(macroName).click();
+        cy.get(`.umb-card-grid-item[title='${macroName}']`).click('bottom');
+
 
         // Save and publish
         cy.umbracoButtonByLabelKey('buttons_saveAndPublish').click();

src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/macropicker/macropicker.html

@@ -28,12 +28,12 @@
                             <p ng-bind="a11yInfo" role="alert"></p>
                             <ul class="umb-card-grid -three-in-row">
                                 <li ng-repeat="availableItem in macros | orderBy:'name' | filter:model.searchTerm">
-                                    <button class="btn-reset umb-card-grid-item" title="{{availableItem.name}}" ng-click="selectMacro(availableItem)">
+                                  <button class="btn-reset umb-card-grid-item" title="{{availableItem.name}}" ng-click="selectMacro(availableItem)">
                                         <span>
                                             <umb-icon icon="icon-settings-alt"></umb-icon>
                                             {{availableItem.name}}
                                         </span>
-                                    </button>
+                                  </button>
                                 </li>
                             </ul>