Adjust functional tests / page objects for webdriver API compatibility (#27059)

* [visualise_page] improve searching of bucket element

* [discover_page] wait for visualisation loaded + dragAndDrop

* [services/browser] change dragAndDrop arguments

* fix dragAndDrop usage in dashboard test

* use clickByCssSelector

test/functional/apps/dashboard/_dashboard_grid.js

@@ -38,10 +38,10 @@ export default function ({ getService, getPageObjects }) {
         const panelTitleBeforeMove = await dashboardPanelActions.getPanelHeading(lastVisTitle);
         const position1 = await panelTitleBeforeMove.getPosition();
 
-        await browser.moveMouseTo(panelTitleBeforeMove);
-        await browser.pressMouseButton();
-        await browser.moveMouseTo(null, -20, -450);
-        await browser.releaseMouseButton();
+        await browser.dragAndDrop(
+          { element: panelTitleBeforeMove },
+          { element: null, xOffset: -20, yOffset: -450 }
+        );
 
         const panelTitleAfterMove = await dashboardPanelActions.getPanelHeading(lastVisTitle);
         const position2 = await panelTitleAfterMove.getPosition();

test/functional/page_objects/discover_page.js

@@ -113,17 +113,25 @@ export function DiscoverPageProvider({ getService, getPageObjects }) {
       await testSubjects.click('discoverOpenButton');
     }
 
+    async waitVisualisationLoaded() {
+      await testSubjects.waitForAttributeToChange('visualizationLoader', 'data-render-complete', 'true');
+    }
+
     async clickHistogramBar(i) {
+      await this.waitVisualisationLoaded();
       const bars = await find.allByCssSelector(`.series.histogram rect`);
       await bars[i].click();
+      await this.waitVisualisationLoaded();
     }
 
     async brushHistogram(from, to) {
+      await this.waitVisualisationLoaded();
       const bars = await find.allByCssSelector('.series.histogram rect');
-      await browser.moveMouseTo(bars[from], 0, -5);
-      await browser.pressMouseButton();
-      await browser.moveMouseTo(bars[to], 0, -5);
-      await browser.releaseMouseButton();
+      await browser.dragAndDrop(
+        { element: bars[from], xOffset: 0, yOffset: -5 },
+        { element: bars[to], xOffset: 0, yOffset: -5 }
+      );
+      await this.waitVisualisationLoaded();
     }
 
     async getCurrentQueryName() {

test/functional/page_objects/visualize_page.js

@@ -383,25 +383,8 @@ export function VisualizePageProvider({ getService, getPageObjects }) {
     // clickBucket(bucketType) 'X-Axis', 'Split Area', 'Split Chart'
     async clickBucket(bucketName, type = 'bucket') {
       const testSubject = type === 'bucket' ? 'bucketsAggGroup' : 'metricsAggGroup';
-      await retry.try(async () => {
-        const chartTypes = await retry.try(
-          async () => await find.allByCssSelector(`[data-test-subj="${testSubject}"] .list-group-menu-item`)
-        );
-        log.debug('found bucket types ' + chartTypes.length);
-
-        async function getChartType(chart) {
-          const chartString = await chart.getVisibleText();
-          if (chartString === bucketName) {
-            await chart.click();
-            return true;
-          }
-        }
-        const getChartTypesPromises = chartTypes.map(getChartType);
-        const clickResult = await Promise.all(getChartTypesPromises);
-        if (!clickResult.some(result => result === true)) {
-          throw new Error(`bucket ${bucketName} not found`);
-        }
-      });
+      const locator = `[data-test-subj="${testSubject}"] .list-group-menu-item[data-test-subj="${bucketName}"]`;
+      await find.clickByCssSelector(locator);
     }
 
     async selectAggregation(myString, groupName = 'buckets', childAggregationType = null) {

test/functional/services/browser.js

@@ -101,6 +101,21 @@ export function BrowserProvider({ getService }) {
       }
     }
 
+    /**
+     * Does a drag-and-drop action from one point to another
+     *
+     * @param {{element: LeadfootElementWrapper, xOffset: number, yOffset: number}} from
+     * @param {{element: LeadfootElementWrapper, xOffset: number, yOffset: number}} to
+     * @return {Promise<void>}
+     */
+    async dragAndDrop(from, to) {
+      await this.moveMouseTo(from.element, from.xOffset, from.yOffset);
+      await leadfoot.pressMouseButton();
+      await this.moveMouseTo(to.element, to.xOffset, to.yOffset);
+      await leadfoot.releaseMouseButton();
+
+    }
+
     /**
      * Reloads the current browser window/frame.
      * https://theintern.io/leadfoot/module-leadfoot_Session.html#refresh
@@ -145,28 +160,6 @@ export function BrowserProvider({ getService }) {
       await leadfoot.clickMouseButton(...args);
     }
 
-    /**
-     * Depresses a mouse button without releasing it.
-     * https://theintern.io/leadfoot/module-leadfoot_Session.html#pressMouseButton
-     *
-     * @param {number} button Optional
-     * @return {Promise<void>}
-     */
-    async pressMouseButton(...args) {
-      await leadfoot.pressMouseButton(...args);
-    }
-
-    /**
-     * Releases a previously depressed mouse button.
-     * https://theintern.io/leadfoot/module-leadfoot_Session.html#releaseMouseButton
-     *
-     * @param {number} button Optional
-     * @return {Promise<void>}
-     */
-    async releaseMouseButton(...args) {
-      await leadfoot.releaseMouseButton(...args);
-    }
-
     /**
      * Gets the HTML loaded in the focused window/frame. This markup is serialised by the remote
      * environment so may not exactly match the HTML provided by the Web server.

test/functional/services/find.js

@@ -319,6 +319,12 @@ export function FindProvider({ getService }) {
     async waitForDeletedByCssSelector(selector) {
       await leadfoot.waitForDeletedByCssSelector(selector);
     }
+    async waitForAttributeToChange(selector, attribute, value) {
+      retry.waitFor(`${attribute} to equal "${value}"`, async () => {
+        const el = await this.byCssSelector(selector);
+        return value === await el.getAttribute(attribute);
+      });
+    }
   }
 
   return new Find();

test/functional/services/test_subjects.js

@@ -205,6 +205,10 @@ export function TestSubjectsProvider({ getService }) {
     async waitForDeleted(selector) {
       await find.waitForDeletedByCssSelector(testSubjSelector(selector));
     }
+
+    async waitForAttributeToChange(selector, attribute, value) {
+      await find.waitForAttributeToChange(testSubjSelector(selector), attribute, value);
+    }
   }
 
   return new TestSubjects();