Fix failing UI tests (#17970)

9 files changed, 30 insertions, 9 deletions

diff --git a/plugins/Dashboard/tests/UI/DashboardManager_spec.js b/plugins/Dashboard/tests/UI/DashboardManager_spec.js
index 5207523176..d4be12b265 100644
--- a/plugins/Dashboard/tests/UI/DashboardManager_spec.js
+++ b/plugins/Dashboard/tests/UI/DashboardManager_spec.js
@@ -85,6 +85,10 @@ describe("DashboardManager", function () {
         }
 
         button = await page.jQuery('.modal.open .modal-footer a:contains(Ok)');
+        // ensure tour widget always shows the same state
+        testEnvironment.completeAllChallenges = 1;
+        testEnvironment.save();
+
         await button.click();
 
         await page.mouse.move(-10, -10);
diff --git a/plugins/Dashboard/tests/UI/expected-screenshots/DashboardManager_create_new.png b/plugins/Dashboard/tests/UI/expected-screenshots/DashboardManager_create_new.png
index e137896427..bdb6008a6a 100644
--- a/plugins/Dashboard/tests/UI/expected-screenshots/DashboardManager_create_new.png
+++ b/plugins/Dashboard/tests/UI/expected-screenshots/DashboardManager_create_new.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2db0147a760b37a63f5cf42a5020c0640d1e0832042a94772478a9cb7278cc90
-size 313984
+oid sha256:a36863b3ef09abd951bdd0c031e7d422cc94bd078e53f5f7e4509cefd95caa87
+size 294039
diff --git a/plugins/PrivacyManager/tests/UI/expected-screenshots/PrivacyManager_users_opt_out_default.png b/plugins/PrivacyManager/tests/UI/expected-screenshots/PrivacyManager_users_opt_out_default.png
index 656a98e691..fbfef16b1d 100644
--- a/plugins/PrivacyManager/tests/UI/expected-screenshots/PrivacyManager_users_opt_out_default.png
+++ b/plugins/PrivacyManager/tests/UI/expected-screenshots/PrivacyManager_users_opt_out_default.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:32f3b9b6be11da85e702b0c40d3dcab5a0b41b5e627bd6b62b4773365e752807
-size 154252
+oid sha256:fe44313954adedf31d13c619b3a40a3d0060d95eed0c790a4b316404ec8d0380
+size 154294
diff --git a/plugins/SegmentEditor/tests/UI/SegmentSelectorEditor_spec.js b/plugins/SegmentEditor/tests/UI/SegmentSelectorEditor_spec.js
index 35179aa6eb..ad988111e2 100644
--- a/plugins/SegmentEditor/tests/UI/SegmentSelectorEditor_spec.js
+++ b/plugins/SegmentEditor/tests/UI/SegmentSelectorEditor_spec.js
@@ -188,7 +188,7 @@ describe("SegmentSelectorEditorTest", function () {
         var elem = await page.jQuery('.modal.open .modal-footer a:contains(Yes):visible');
         await elem.click();
         await page.waitForNetworkIdle();
-        await page.click('.segmentationContainer');
+        await (await page.waitForSelector('.segmentationContainer')).click();
         await page.waitForNetworkIdle();
         expect(await page.screenshotSelector(selectorsToCapture)).to.matchImage('updated');
     });
diff --git a/tests/UI/expected-screenshots/UIIntegrationTest_admin_diagnostics_configfile.png b/tests/UI/expected-screenshots/UIIntegrationTest_admin_diagnostics_configfile.png
index 412f49b00c..20f3344a02 100644
--- a/tests/UI/expected-screenshots/UIIntegrationTest_admin_diagnostics_configfile.png
+++ b/tests/UI/expected-screenshots/UIIntegrationTest_admin_diagnostics_configfile.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0b0a79eab39fdae3db8868a0bfa8bb9ddb6e24109d67a9770750879905ea3b5b
-size 5187957
+oid sha256:a4f80ec7a381250a5a6343330563c81940f9343980454856f1677cb0280321fa
+size 5214081
diff --git a/tests/UI/expected-screenshots/UIIntegrationTest_dashboard2.png b/tests/UI/expected-screenshots/UIIntegrationTest_dashboard2.png
index 9778721018..2f74b00b24 100644
--- a/tests/UI/expected-screenshots/UIIntegrationTest_dashboard2.png
+++ b/tests/UI/expected-screenshots/UIIntegrationTest_dashboard2.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f5e6d49a5dd27bea015a37d7e3d4fe47f90e03db4bdf6fd8bdd142cbcc14f800
-size 1561035
+oid sha256:9b439b080d1eceafab24c144edcd3a98aea249e800912fc22a11706c72f27e1c
+size 1566866
diff --git a/tests/UI/specs/UIIntegration_spec.js b/tests/UI/specs/UIIntegration_spec.js
index 6b58ad14ec..a56f0261b1 100644
--- a/tests/UI/specs/UIIntegration_spec.js
+++ b/tests/UI/specs/UIIntegration_spec.js
@@ -67,6 +67,7 @@ describe("UIIntegrationTest", function () { // TODO: Rename to Piwik?
                 // Prevent random sizing error eg. http://builds-artifacts.matomo.org/ui-tests.master/2301.1/screenshot-diffs/diffviewer.html
                 $("[widgetid=widgetActionsgetOutlinks] .widgetContent").text('Displays different at random -> hidden');
             });
+            await page.waitForLazyImages();
 
             pageWrap = await page.$('.pageWrap');
             expect(await pageWrap.screenshot()).to.matchImage('dashboard1');
@@ -76,6 +77,7 @@ describe("UIIntegrationTest", function () { // TODO: Rename to Piwik?
             await page.goto("?" + urlBase + "#?" + generalParams + "&category=Dashboard_Dashboard&subcategory=2");
             await page.waitForSelector('.widget');
             await page.waitForNetworkIdle();
+            await page.waitForLazyImages();
 
             pageWrap = await page.$('.pageWrap');
             expect(await pageWrap.screenshot()).to.matchImage('dashboard2');
@@ -85,6 +87,7 @@ describe("UIIntegrationTest", function () { // TODO: Rename to Piwik?
             await page.goto("?" + urlBase + "#?" + generalParams + "&category=Dashboard_Dashboard&subcategory=3");
             await page.waitForSelector('.widget');
             await page.waitForNetworkIdle();
+            await page.waitForLazyImages();
 
             pageWrap = await page.$('.pageWrap');
             expect(await pageWrap.screenshot()).to.matchImage('dashboard3');
@@ -95,6 +98,7 @@ describe("UIIntegrationTest", function () { // TODO: Rename to Piwik?
             await page.waitForNetworkIdle();
             await page.waitForSelector('.widget');
             await page.waitForNetworkIdle();
+            await page.waitForLazyImages();
 
             pageWrap = await page.$('.pageWrap');
             expect(await pageWrap.screenshot()).to.matchImage('dashboard4');
@@ -107,6 +111,7 @@ describe("UIIntegrationTest", function () { // TODO: Rename to Piwik?
             });
             await page.goto("?" + urlBase + "#?" + generalParams + "&category=Dashboard_Dashboard&subcategory=5");
             await page.waitForNetworkIdle();
+            await page.waitForLazyImages();
 
             expect(await page.screenshot({ fullPage: true })).to.matchImage('dashboard5_mobile');
 
diff --git a/tests/UI/specs/ViewDataTable_spec.js b/tests/UI/specs/ViewDataTable_spec.js
index 44e8c34040..9cf847ef91 100644
--- a/tests/UI/specs/ViewDataTable_spec.js
+++ b/tests/UI/specs/ViewDataTable_spec.js
@@ -151,6 +151,7 @@ describe("ViewDataTableTest", function () { // TODO: should remove Test suffix f
 
     it("should show aggregate rows when the aggregate rows option is clicked", async function () {
         await page.goto(url.replace(/filter_limit=5/, 'filter_limit=10') + '&flat=1');
+        await page.waitForNetworkIdle();
         await page.click('.dropdownConfigureIcon');
         await page.click('.dataTableIncludeAggregateRows');
         await page.mouse.move(-10, -10);
diff --git a/tests/lib/screenshot-testing/support/page-renderer.js b/tests/lib/screenshot-testing/support/page-renderer.js
index 7afb156615..afe80c0e76 100644
--- a/tests/lib/screenshot-testing/support/page-renderer.js
+++ b/tests/lib/screenshot-testing/support/page-renderer.js
@@ -298,6 +298,17 @@ PageRenderer.prototype.waitForNetworkIdle = async function () {
     }
 };
 
+PageRenderer.prototype.waitForLazyImages = async function () {
+    // remove loading attribute from images
+    await this.webpage.evaluate(function(){
+        $('img[loading]').removeAttr('loading');
+    });
+    // wait for the browser to request the images
+    await this.webpage.waitForTimeout(200);
+    // wait till all requests are finished
+    await this.waitForNetworkIdle();
+};
+
 PageRenderer.prototype.downloadUrl = async function (url) {
     return await this.webpage.evaluate(function (url) {
         var $ = window.jQuery;