[Discover] Improve Percy functional tests (#51699)

* Implement new wait for chart rendered function

* Add findByCssSelector to ensure the charts have been rendered

Author: kertal

test/visual_regression/tests/discover/chart_visualization.js

@@ -27,6 +27,7 @@ export default function ({ getService, getPageObjects }) {
   const kibanaServer = getService('kibanaServer');
   const PageObjects = getPageObjects(['common', 'discover', 'header', 'timePicker']);
   const visualTesting = getService('visualTesting');
+  const find = getService('find');
   const defaultSettings = {
     defaultIndex: 'logstash-*',
     'discover:sampleSize': 1
@@ -48,10 +49,12 @@ export default function ({ getService, getPageObjects }) {
 
     describe('query', function () {
       this.tags(['skipFirefox']);
+      let renderCounter = 0;
 
       it('should show bars in the correct time zone', async function () {
         await PageObjects.header.awaitGlobalLoadingIndicatorHidden();
         await PageObjects.discover.waitUntilSearchingHasFinished();
+        await find.byCssSelector(`.echChart[data-ech-render-count="${++renderCounter}"]`);
         await visualTesting.snapshot({
           show: ['discoverChart'],
         });
@@ -61,6 +64,7 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.header.awaitGlobalLoadingIndicatorHidden();
         await PageObjects.discover.waitUntilSearchingHasFinished();
         await PageObjects.discover.setChartInterval('Hourly');
+        await find.byCssSelector(`.echChart[data-ech-render-count="${++renderCounter}"]`);
         await visualTesting.snapshot({
           show: ['discoverChart'],
         });
@@ -70,6 +74,7 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.header.awaitGlobalLoadingIndicatorHidden();
         await PageObjects.discover.waitUntilSearchingHasFinished();
         await PageObjects.discover.setChartInterval('Daily');
+        await find.byCssSelector(`.echChart[data-ech-render-count="${++renderCounter}"]`);
         await visualTesting.snapshot({
           show: ['discoverChart'],
         });
@@ -79,6 +84,7 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.header.awaitGlobalLoadingIndicatorHidden();
         await PageObjects.discover.waitUntilSearchingHasFinished();
         await PageObjects.discover.setChartInterval('Weekly');
+        await find.byCssSelector(`.echChart[data-ech-render-count="${++renderCounter}"]`);
         await visualTesting.snapshot({
           show: ['discoverChart'],
         });
@@ -92,6 +98,7 @@ export default function ({ getService, getPageObjects }) {
         });
         await PageObjects.header.awaitGlobalLoadingIndicatorHidden();
         await PageObjects.discover.waitUntilSearchingHasFinished();
+        await find.byCssSelector(`.echChart[data-ech-render-count="${++renderCounter}"]`);
         await visualTesting.snapshot({
           show: ['discoverChart'],
         });
@@ -101,6 +108,7 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.header.awaitGlobalLoadingIndicatorHidden();
         await PageObjects.discover.waitUntilSearchingHasFinished();
         await PageObjects.discover.setChartInterval('Monthly');
+        await find.byCssSelector(`.echChart[data-ech-render-count="${++renderCounter}"]`);
         await visualTesting.snapshot({
           show: ['discoverChart'],
         });
@@ -110,6 +118,7 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.header.awaitGlobalLoadingIndicatorHidden();
         await PageObjects.discover.waitUntilSearchingHasFinished();
         await PageObjects.discover.setChartInterval('Yearly');
+        await find.byCssSelector(`.echChart[data-ech-render-count="${++renderCounter}"]`);
         await visualTesting.snapshot({
           show: ['discoverChart'],
         });
@@ -119,6 +128,7 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.header.awaitGlobalLoadingIndicatorHidden();
         await PageObjects.discover.waitUntilSearchingHasFinished();
         await PageObjects.discover.setChartInterval('Auto');
+        await find.byCssSelector(`.echChart[data-ech-render-count="${++renderCounter}"]`);
         await visualTesting.snapshot({
           show: ['discoverChart'],
         });