use cheerio to parse table innerHtml in functional tests (#30640) (#31001)

* use cheerio to parse table innerHtml in functional tests

* rename function to parseDomContent

* test Bar charts by parsing Dom

* test X & Y axis data by parsing Dom

* get X Axis data for dashboard tests with Dom parsing

test/functional/page_objects/discover_page.js

@@ -127,8 +127,9 @@ export function DiscoverPageProvider({ getService, getPageObjects }) {
     }
 
     async getBarChartXTicks() {
-      const elements = await find.allByCssSelector('.x.axis.CategoryAxis-1 > .tick > text');
-      return await Promise.all(elements.map(async el => el.getVisibleText()));
+      const xAxis = await find.byCssSelector('.x.axis.CategoryAxis-1');
+      const $ = await xAxis.parseDomContent();
+      return $('.tick > text').toArray().map(tick => $(tick).text().trim());
     }
 
     async getBarChartData() {
@@ -139,17 +140,15 @@ export function DiscoverPageProvider({ getService, getPageObjects }) {
       const yLabel = await y.getVisibleText();
       yAxisLabel = yLabel.replace(',', '');
       log.debug('yAxisLabel = ' + yAxisLabel);
-      // 2). find and save the y-axis pixel size (the chart height)
-      const chartAreaObj = await find.byCssSelector('rect.background');
-      const yAxisHeight = await chartAreaObj.getAttribute('height');
-      log.debug('theHeight = ' + yAxisHeight);
-      // 3). get the visWrapper__chart elements
       // #kibana-body > div.content > div > div > div > div.visEditor__canvas > visualize > div.visChart > div > div.visWrapper__column > div.visWrapper__chart > div > svg > g > g.series.\30 > rect:nth-child(1)
-      const chartTypes = await find.allByCssSelector('svg > g > g.series > rect');
-      const bars = await Promise.all(chartTypes.map(async (chart) => {
-        const barHeight = await chart.getAttribute('height');
+      const svg = await find.byCssSelector('div.chart > svg');
+      const $ = await svg.parseDomContent();
+      const yAxisHeight = $('rect.background').attr('height');
+      log.debug('theHeight = ' + yAxisHeight);
+      const bars = $('g > g.series > rect').toArray().map(chart => {
+        const barHeight = $(chart).attr('height');
         return Math.round(barHeight / yAxisHeight * yAxisLabel);
-      }));
+      });
 
       return bars;
     }

test/functional/page_objects/visualize_page.js

@@ -729,18 +729,15 @@ export function VisualizePageProvider({ getService, getPageObjects }) {
     }
 
     async getXAxisLabels() {
-      const chartTypes = await find.allByCssSelector('.x > g');
-      async function getChartType(chart) {
-        return await chart.getVisibleText();
-      }
-      const getChartTypesPromises = chartTypes.map(getChartType);
-      return await Promise.all(getChartTypesPromises);
+      const xAxis = await find.byCssSelector('.visAxis--x.visAxis__column--bottom');
+      const $ = await xAxis.parseDomContent();
+      return $('.x > g > text').toArray().map(tick => $(tick).text().trim());
     }
 
     async getYAxisLabels() {
-      const chartTypes = await find.allByCssSelector('.y > g');
-      const getChartTypesPromises = chartTypes.map(async chart => await chart.getVisibleText());
-      return await Promise.all(getChartTypesPromises);
+      const yAxis = await find.byCssSelector('.visAxis__column--y.visAxis__column--left');
+      const $ = await yAxis.parseDomContent();
+      return $('.y > g > text').toArray().map(tick => $(tick).text().trim());
     }
 
     /*
@@ -803,12 +800,12 @@ export function VisualizePageProvider({ getService, getPageObjects }) {
       // 1). get the range/pixel ratio
       const yAxisRatio = await this.getChartYAxisRatio(axis);
       // 3). get the visWrapper__chart elements
-      const chartTypes = await find.allByCssSelector(`svg > g > g.series > rect[data-label="${dataLabel}"]`);
-      log.debug(`chartTypes count = ${chartTypes.length}`);
-      const chartData = await Promise.all(chartTypes.map(async chart => {
-        const barHeight = await chart.getAttribute('height');
+      const svg = await find.byCssSelector('div.chart > svg');
+      const $ = await svg.parseDomContent();
+      const chartData = $(`g > g.series > rect[data-label="${dataLabel}"]`).toArray().map(chart => {
+        const barHeight = $(chart).attr('height');
         return Math.round(barHeight * yAxisRatio);
-      }));
+      });
 
       return chartData;
     }

test/functional/services/inspector.js

@@ -94,13 +94,10 @@ export function InspectorProvider({ getService }) {
       // TODO: we should use datat-test-subj=inspectorTable as soon as EUI supports it
       const inspectorPanel = await testSubjects.find('inspectorPanel');
       const tableBody = await retry.try(async () => inspectorPanel.findByTagName('tbody'));
-      // Convert the data into a nested array format:
-      // [ [cell1_in_row1, cell2_in_row1], [cell1_in_row2, cell2_in_row2] ]
-      const rows = await tableBody.findAllByTagName('tr');
-      return await Promise.all(rows.map(async row => {
-        const cells = await row.findAllByTagName('td');
-        return await Promise.all(cells.map(async cell => await cell.getVisibleText()));
-      }));
+      const $ = await tableBody.parseDomContent();
+      return $('tr').toArray().map(tr => {
+        return $(tr).find('td').toArray().map(cell => $(cell).text().trim());
+      });
     }
 
     async getTableHeaders() {
@@ -110,11 +107,9 @@ export function InspectorProvider({ getService }) {
         const inspectorPanel = await testSubjects.find('inspectorPanel');
         return await inspectorPanel.findByTagName('thead');
       });
-      const cells = await dataTableHeader.findAllByTagName('th');
-      return await Promise.all(cells.map(async (cell) => {
-        const untrimmed = await cell.getVisibleText();
-        return untrimmed.trim();
-      }));
+      const $ = await dataTableHeader.parseDomContent();
+      return $('th span.euiTableCellContent__text').toArray()
+        .map(cell => $(cell).text().trim());
     }
 
     async expectTableHeaders(expected) {

test/functional/services/lib/leadfoot_element_wrapper/leadfoot_element_wrapper.js

@@ -18,6 +18,7 @@
  */
 
 import { scrollIntoViewIfNecessary } from './scroll_into_view_if_necessary';
+import cheerio from 'cheerio';
 
 export class LeadfootElementWrapper {
   constructor(leadfootElement, leadfoot, fixedHeaderHeight) {
@@ -339,4 +340,18 @@ export class LeadfootElementWrapper {
   async scrollIntoViewIfNecessary() {
     await this._leadfoot.execute(scrollIntoViewIfNecessary, [this._leadfootElement, this._fixedHeaderHeight]);
   }
+
+  /**
+   * Gets element innerHTML and wrap it up with cheerio
+   *
+   * @nonstandard
+   * @return {Promise<void>}
+   */
+  async parseDomContent() {
+    const htmlContent = await this.getProperty('innerHTML');
+    return cheerio.load(htmlContent, {
+      normalizeWhitespace: true,
+      xmlMode: true
+    });
+  }
 }