Fix failing UI tests (#17970)

5 files changed, 21 insertions, 4 deletions

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;