Switch UI tests from phantomjs to chrome headless (#14421)

* Make sure xss entries is always an array.

* Update expected test files and submodule.

* Regenerate broken omnifixture dump.

* poc conversion to chrome headless for UI tests, single test works locally

* Get single test to pass on travis & local w/ headless chrome.

* Remove old diff viewer generation, and get output to look the same as before when there is a failure.

* Add global timeout & get ViewDataTableTest to pass.

* Convert BarGraph_spec.js.

* Convert EmptySite_spec.

* Update EvolutionGraph spec for chrome headless.

* Convert GoalsTable test & find/replace for common changes.

* Convert MeasurableManager.

* Another find & replace.

* Get Menus/OptOutForm to pass w/ chrome headless

* Convert PeriodSelector, PieGraph & PivotByDimension UI tests.

* undo unrelated debugging change

* Convert QuickAccess UI tests

* Converts ActionsDataTable UI tests

* reset viewport after each testsuite

* Converts RowEvolution UI tests

* Converts Theme UI tests

* Converts SiteSelector UI tests

* Converts CustomVariables UI test

* Converts DBStats UI test

* Ignore empty responses when calling api/controller

* Converts Dashboard UI tests

* Converts Live UI tests

* Converts SimpleUI tests

* Converts Installation UI tests

* Converts ImageGraph UI tests

* Converts Login UI tests

* Converts Marketplace UI tests

* Converts Insights UI tests

* Converts ReportExporting UI tests

* Converts UIIntegration tests

* Updates ViewDataTable UI tests

* Converts CoreUpdater UI tests

* Converts UsersManager UI tests

* Converts Morpheus UI tests

* Converts MultiSites UI tests

* Fix testEnvironment.callApi handling of array parameters

* Converts Overlay UI tests

* Converts PrivacyManager UI tests

* Converts ScheduledReports UI tests

* Converts SegmentEditor UI tests

* compare pixel difference in images

* Converts PeriodSelector UI tests

* allow a pixel difference

* Converts SingleMetricView UI tests

* Converts SitesManager UI tests

* Converts Transitions UI tests

* Converts MeasurableManager UI tests

* Move Mouse out of screen after each test suite

* Converts PieGraph UI tests

* Ensure cursor is not shown in focused input elements

* Converts VisitorMap UI tests

* Converts CustomLogo UI tests

* Converts BarGraph UI tests

* Converts EvolutionGraph UI tests

* Converts IntranetMeasurable UI tests

* Converts TrackingFailures UI tests

* Converts CampaignBuilder UI tests

* Converts TagManagerTeaser UI tests

* fix request url rewrite for changed port

* Converts TwoFactorAuth UI tests

* do not print full responses in logs, but size instead

* improve additional style injection

* use submodule branches

* fix request interception

* update dependencies

* [TEMP] disable dangerous link checks

* [TEMP] limit tests

* Use puppeteer@next and make sure diffs get uploaded properly.

* Use correct fs function.

* Allow timeout to be specified on command line for UI tests and debug console logs.

* timeout option tweak

* Setup diff dir once before running tests not before each suite.

* fix last commit

* Update screenshots and fix some specs.

* Convert some tests that were not converted during merge.

* updating screenshots

* Updating screenshots and fixing some tests.

* more test fixes

* couple more test fixes

* More test fixes and plugin updates.

* wait for jquery

* Fix some screenshots and tests.

* more test fixes

* debug travis test failure

* remove .only

* more test fixes and updated expected files

* another test fixing iteration

* typo

* another quick test change

* more tests updates

* Test fixes and & more debugging.

* more debugging and test fixes

* more fixes and debugging.

* remove .only

* Another round of fixed tests.

* more debugging & fixes

* more test changes

* more debugging and fixes

* Fixing more tests + some bug fixes.

* Couple more fixes.

* Couple more fixes.

* Fixing tracking failures test

* more fixes

* Last couple fixes hopefully.

* couple more test fixes

* more fixes, bug fix in usersmanager, some test updates

* Some more test fixes/changes.

* more and more fixes

* hoping for a green build

* Do not compare against existing files in dashboard_spec.

* more fixes, re-enabling travis

* really re-enable travis

* Install puppeteer on travis-ci.

* more fixes

* try to fix random failues

* remove return

* Convert some login tests I forgot and update UsersManager expected file

* Fix test for primary key update

* Update AddPrimaryKey.php

* More test fixes + implement synchronous comparison threshold (so no resemblejs)

* More wait fixes + reset token detection fix.

* couple more fixes

* Fix login/overlay screenshot issue & magick command running issue.

* identify is the executable on travis (hopefully) + fix some random failures

* Another run.

* Last fix.

* two more tweaks

* typo

11 files changed, 117 insertions, 113 deletions

diff --git a/plugins/Overlay/templates/index.twig b/plugins/Overlay/templates/index.twig
index ff58a50803..5001bc8484 100644
--- a/plugins/Overlay/templates/index.twig
+++ b/plugins/Overlay/templates/index.twig
@@ -59,7 +59,7 @@
     </div>
 
     <div id="overlayMain">
-        <iframe id="overlayIframe" src="" frameborder="0"></iframe>
+        <iframe id="overlayIframe" name="overlayIframe" src="" frameborder="0"></iframe>
     </div>
 
     <script type="text/javascript">
diff --git a/plugins/Overlay/tests/UI/Overlay_spec.js b/plugins/Overlay/tests/UI/Overlay_spec.js
index e655f97202..c4c47367fd 100644
--- a/plugins/Overlay/tests/UI/Overlay_spec.js
+++ b/plugins/Overlay/tests/UI/Overlay_spec.js
@@ -7,8 +7,6 @@
  * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
  */
 describe("Overlay", function () {
-    this.retries(3);
-
     this.timeout(0);
 
     var baseUrl;
@@ -16,143 +14,149 @@ describe("Overlay", function () {
     var url = null;
     var urlWithSegment;
 
-    function removeOptOutIframe(page) {
-        page.evaluate(function () {
+    async function removeOptOutIframe() {
+        await page.evaluate(function () {
             $('iframe#optOutIframe', $('iframe').contents()).remove();
         });
     }
 
-    before(function (done) {
+    before(async function () {
         baseUrl = '?module=Overlay&period=year&date=today&idSite=3';
         hash = '#?l=' + encodeURIComponent(testEnvironment.overlayUrl).replace(/[%]/g, "$");
 
         url = baseUrl + hash;
-        urlWithSegment = baseUrl + '&segment=' + encodeURIComponent('visitIp==20.56.34.67') + hash;
+        urlWithSegment = baseUrl + '&segment=' + encodeURIComponent('visitIp==50.112.3.5') + hash;
 
-        testEnvironment.callApi("SitesManager.addSiteAliasUrls", {idSite: 3, urls: [config.piwikUrl]}, done);
+        await testEnvironment.callApi("SitesManager.addSiteAliasUrls", {idSite: 3, urls: [config.piwikUrl]});
     });
 
-    after(function (done) {
+    after(async function () {
         testEnvironment.testUseMockAuth = 1;
         if (testEnvironment.configOverride.General && testEnvironment.configOverride.General.enable_framed_pages) {
             delete testEnvironment.configOverride.General.enable_framed_pages;
         }
         testEnvironment.save();
 
-        testEnvironment.callApi("SitesManager.setSiteAliasUrls", {idSite: 3, urls: []}, done);
+        await testEnvironment.callApi("SitesManager.setSiteAliasUrls", {idSite: 3, urls: []});
     });
 
-    it("should load correctly", function (done) {
-        expect.screenshot("loaded").to.be.capture(function (page) {
-            page.load(url);
+    it("should load correctly", async function() {
+        await page.goto(url);
 
-            removeOptOutIframe(page);
-        }, done);
+        await removeOptOutIframe();
+        expect(await page.screenshot({ fullPage: true })).to.matchImage('loaded');
     });
 
-    it("should show clicks when hover over link in iframe", function (done) {
-        expect.screenshot("page_link_clicks").to.be.capture(function (page) {
-            var pos = page.webpage.evaluate(function () {
-                var iframe = $('iframe'),
-                    innerOffset = $('.btn.btn-large', iframe.contents()).offset();
-                return {
-                    x: iframe.offset().left + innerOffset.left,
-                    y: iframe.offset().top + innerOffset.top
-                };
-            });
-            page.sendMouseEvent('mousemove', pos);
-
-            page.evaluate(function () {
-                $('div#PIS_StatusBar', $('iframe').contents()).each(function () {
-                    var html = $(this).html();
-                    html = html.replace(/localhost\:[0-9]+/g, 'localhost');
-                    $(this).html(html);
-                });
-            });
+    it("should show clicks when hover over link in iframe", async function() {
+        var pos = await page.webpage.evaluate(() => {
+            var iframe = $('iframe'),
+                innerOffset = $('.btn.btn-large', iframe.contents()).offset();
+            return {
+                x: iframe.offset().left + innerOffset.left,
+                y: iframe.offset().top + innerOffset.top
+            };
+        });
+        await page.mouse.move(pos.x, pos.y);
 
-            removeOptOutIframe(page);
-        }, done);
+        await page.evaluate(function () {
+            $('div#PIS_StatusBar', $('iframe').contents()).each(function () {
+                var html = $(this).html();
+                html = html.replace(/localhost\:[0-9]+/g, 'localhost');
+                $(this).html(html);
+            });
+        });
+        await removeOptOutIframe();
+        expect(await page.screenshot({ fullPage: true })).to.matchImage('page_link_clicks');
     });
 
-    it("should show stats for new links when dropdown opened", function (done) {
-        expect.screenshot("page_new_links").to.be.capture(function (page) {
-            page.reload(2500);
-            page.evaluate(function(){
-                $('.dropdown-toggle', $('iframe').contents())[0].click();
-            }, 500);
-            removeOptOutIframe(page);
-        }, done);
+    it("should show stats for new links when dropdown opened", async function() {
+        await page.reload();
+        await page.evaluate(function(){
+            $('.dropdown-toggle', $('iframe').contents())[0].click();
+        });
+        await page.waitFor(1000);
+
+        await removeOptOutIframe();
+        expect(await page.screenshot({ fullPage: true })).to.matchImage('page_new_links');
     });
 
-    it("should change page when clicking on internal iframe link", function (done) {
-        expect.screenshot("page_change").to.be.capture(function (page) {
-            var pos = page.webpage.evaluate(function () {
-                var iframe = $('iframe'),
-                    innerOffset = $('ul.nav>li:nth-child(2)>a', iframe.contents()).offset();
-                return {
-                    x: iframe.offset().left + innerOffset.left + 32, // position is incorrect for some reason w/o adding pixels
-                    y: iframe.offset().top + innerOffset.top
-                };
-            });
-            page.sendMouseEvent('click', pos);
+    it("should change page when clicking on internal iframe link", async function() {
+        var pos = await page.webpage.evaluate(() => {
+            var iframe = $('iframe'),
+                innerOffset = $('ul.nav>li:nth-child(2)>a', iframe.contents()).offset();
+            return {
+                x: iframe.offset().left + innerOffset.left + 32, // position is incorrect for some reason w/o adding pixels
+                y: iframe.offset().top + innerOffset.top
+            };
+        });
+        await page.mouse.click(pos.x, pos.y);
+        await page.waitForNetworkIdle();
 
-            removeOptOutIframe(page);
-        }, done);
+        await removeOptOutIframe();
+        expect(await page.screenshot({ fullPage: true })).to.matchImage('page_change');
     });
 
-    it("should change date range when period changed", function (done) {
-        expect.screenshot("period_change").to.be.capture(function (page) {
-            page.evaluate(function () {
-                $('#overlayDateRangeSelect').val('day;yesterday').trigger('change');
-            });
+    it("should change date range when period changed", async function() {
+        await page.waitForSelector('#overlayDateRangeSelect');
+        await page.webpage.evaluate(function () {
+            $('#overlayDateRangeSelect').val('day;yesterday').trigger('change');
+        });
+
+        await page.waitFor('.overlayMainMetrics,.overlayNoData');
+        await page.waitForNetworkIdle();
 
-            removeOptOutIframe(page);
-        }, done);
+        await removeOptOutIframe();
+        expect(await page.screenshot({ fullPage: true })).to.matchImage('period_change');
     });
 
-    it("should open row evolution popup when row evolution link clicked", function (done) {
-        expect.screenshot("row_evolution").to.be.capture(function (page) {
-            page.evaluate(function () {
-                $('#overlayRowEvolution').click();
-            }, 500);
-            page.evaluate(function () {
-                $('.jqplot-xaxis').hide(); // xaxis will change every day so hide it
-            });
+    it("should open row evolution popup when row evolution link clicked", async function() {
+        await page.evaluate(function(){
+            $('#overlayRowEvolution').click();
+        });
+        await page.waitFor(500); // for modal to appear
+        await page.waitForNetworkIdle();
+        await page.evaluate(function () {
+            $('.jqplot-xaxis').hide(); // xaxis will change every day so hide it
+        });
 
-            removeOptOutIframe(page);
-        }, done);
+        await removeOptOutIframe();
+        expect(await page.screenshot({ fullPage: true })).to.matchImage('row_evolution');
     });
 
-    it("should open transitions popup when transitions link clicked", function (done) {
-        expect.screenshot("transitions").to.be.capture(function (page) {
-            page.evaluate(function () {
-                $('button.ui-dialog-titlebar-close').click();
-            }, 500);
-            page.evaluate(function () {
-                $('#overlayTransitions').click();
-            }, 500);
-
-            removeOptOutIframe(page);
-        }, done);
+    it("should open transitions popup when transitions link clicked", async function() {
+        await page.click('button.ui-dialog-titlebar-close');
+        await page.waitFor('#overlayTransitions');
+        await page.click('#overlayTransitions');
+        await page.waitForNetworkIdle();
+        await page.waitFor(2000);
+
+        await removeOptOutIframe();
+        expect(await page.screenshot({ fullPage: true })).to.matchImage('transitions');
     });
 
-    it("should load an overlay with segment", function (done) {
-        expect.screenshot("loaded_with_segment").to.be.capture(function (page) {
-            page.load(urlWithSegment);
+    it("should load an overlay with segment", async function() {
+        await page.goto(urlWithSegment);
+        await page.waitForNetworkIdle();
+
+        await page.waitFor(2000);
+
+        const frame = page.frames().find(f => f.name() === 'overlayIframe');
+        await frame.waitFor('.PIS_LinkTag');
 
-            removeOptOutIframe(page);
-        }, done);
+        await removeOptOutIframe();
+        expect(await page.screenshot({ fullPage: true })).to.matchImage('loaded_with_segment');
     });
 
-    it('should load correctly with token_auth if enable_framed_pages is set', function (done) {
+    it('should load correctly with token_auth if enable_framed_pages is set', async function () {
         testEnvironment.testUseMockAuth = 0;
         testEnvironment.overrideConfig('General', 'enable_framed_pages', 1);
         testEnvironment.save();
 
-        expect.screenshot("framed_loaded").to.be.capture(function (page) {
-            page.load(baseUrl + '&token_auth=' + testEnvironment.tokenAuth + hash);
+        console.log(`[Note: token auth is ${testEnvironment.tokenAuth}]`);
+        await page.goto(baseUrl + '&token_auth=' + testEnvironment.tokenAuth + hash);
+        await page.waitFor('.overlayMainMetrics,.overlayNoData');
 
-            removeOptOutIframe(page);
-        }, done);
+        await removeOptOutIframe();
+        expect(await page.screenshot({ fullPage: true })).to.matchImage('framed_loaded');
     });
 });
\ No newline at end of file
diff --git a/plugins/Overlay/tests/UI/expected-screenshots/Overlay_framed_loaded.png b/plugins/Overlay/tests/UI/expected-screenshots/Overlay_framed_loaded.png
index bf46100ba2..31f8fe0541 100644
--- a/plugins/Overlay/tests/UI/expected-screenshots/Overlay_framed_loaded.png
+++ b/plugins/Overlay/tests/UI/expected-screenshots/Overlay_framed_loaded.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:cc0eb9b5a7d599c97d289369977dec5832324a3892efc717072311f98aa88851
-size 109425
+oid sha256:89622d7959d65773551e91c03a8b49eed5ec3425c4b6aefd327041152fe034b3
+size 108604
diff --git a/plugins/Overlay/tests/UI/expected-screenshots/Overlay_loaded.png b/plugins/Overlay/tests/UI/expected-screenshots/Overlay_loaded.png
index bf46100ba2..31f8fe0541 100644
--- a/plugins/Overlay/tests/UI/expected-screenshots/Overlay_loaded.png
+++ b/plugins/Overlay/tests/UI/expected-screenshots/Overlay_loaded.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:cc0eb9b5a7d599c97d289369977dec5832324a3892efc717072311f98aa88851
-size 109425
+oid sha256:89622d7959d65773551e91c03a8b49eed5ec3425c4b6aefd327041152fe034b3
+size 108604
diff --git a/plugins/Overlay/tests/UI/expected-screenshots/Overlay_loaded_with_segment.png b/plugins/Overlay/tests/UI/expected-screenshots/Overlay_loaded_with_segment.png
index 5387c71560..59d495255f 100644
--- a/plugins/Overlay/tests/UI/expected-screenshots/Overlay_loaded_with_segment.png
+++ b/plugins/Overlay/tests/UI/expected-screenshots/Overlay_loaded_with_segment.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e8a366e7b676f520a43006e699b776e4af89bd32709e4b1d30def426879a6d50
-size 106965
+oid sha256:ceb6b00dc2f11e98e580e87b803603e35ab9720a85b71eb6eb6b338338b9282a
+size 105675
diff --git a/plugins/Overlay/tests/UI/expected-screenshots/Overlay_page_change.png b/plugins/Overlay/tests/UI/expected-screenshots/Overlay_page_change.png
index 06c04feee1..88f620c8cb 100644
--- a/plugins/Overlay/tests/UI/expected-screenshots/Overlay_page_change.png
+++ b/plugins/Overlay/tests/UI/expected-screenshots/Overlay_page_change.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:45418d98df67e907dae48930d6f2ddb82655c3191403b8f9825bcc9c74d3be7d
-size 216392
+oid sha256:f454684e2f601554b698c84e481737e5d3cf280aa27942126f70552192e858ca
+size 210368
diff --git a/plugins/Overlay/tests/UI/expected-screenshots/Overlay_page_link_clicks.png b/plugins/Overlay/tests/UI/expected-screenshots/Overlay_page_link_clicks.png
index 196c514512..d65f5c98d8 100644
--- a/plugins/Overlay/tests/UI/expected-screenshots/Overlay_page_link_clicks.png
+++ b/plugins/Overlay/tests/UI/expected-screenshots/Overlay_page_link_clicks.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c8abcc19395f62b41c6336c6e5c883ceb049ed43fd90aceb254a635836c0b72f
-size 115911
+oid sha256:f652c4dff6cc99f684a564abc156aeb27bdba9b0b5771c49e3ea8487134a2f0a
+size 115003
diff --git a/plugins/Overlay/tests/UI/expected-screenshots/Overlay_page_new_links.png b/plugins/Overlay/tests/UI/expected-screenshots/Overlay_page_new_links.png
index 1c9dae3f91..41f78fc329 100644
--- a/plugins/Overlay/tests/UI/expected-screenshots/Overlay_page_new_links.png
+++ b/plugins/Overlay/tests/UI/expected-screenshots/Overlay_page_new_links.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f2b0a215610899bceb759e618b78fdefbeeaea4aab7083d8e8d0aa1fbb5f3434
-size 119971
+oid sha256:f241a2f3e46ba6806e6cd3a10a28313305736dcad8d6108330ca65bfb56f08c5
+size 112361
diff --git a/plugins/Overlay/tests/UI/expected-screenshots/Overlay_period_change.png b/plugins/Overlay/tests/UI/expected-screenshots/Overlay_period_change.png
index d5189d885d..c887c9114a 100644
--- a/plugins/Overlay/tests/UI/expected-screenshots/Overlay_period_change.png
+++ b/plugins/Overlay/tests/UI/expected-screenshots/Overlay_period_change.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:45336f28fa3beaa992cd483a8f83c77a57a9782b77f98862a1815114ef4222dc
-size 218442
+oid sha256:a65a9dec1044a8844afaea4f77957a3bbfcb681342c4c7533a6af5fbc640b6b8
+size 212553
diff --git a/plugins/Overlay/tests/UI/expected-screenshots/Overlay_row_evolution.png b/plugins/Overlay/tests/UI/expected-screenshots/Overlay_row_evolution.png
index b14b2a996b..be0942f722 100644
--- a/plugins/Overlay/tests/UI/expected-screenshots/Overlay_row_evolution.png
+++ b/plugins/Overlay/tests/UI/expected-screenshots/Overlay_row_evolution.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:be2df585cdf74bb14e0e5da3c648d425c2b1a050dedeb47b48bb3fff9774fde9
-size 108972
+oid sha256:f01a29d14164009ec3670c84fc2c65f28371a12f07d5a39b58391f87d0d262ab
+size 101461
diff --git a/plugins/Overlay/tests/UI/expected-screenshots/Overlay_transitions.png b/plugins/Overlay/tests/UI/expected-screenshots/Overlay_transitions.png
index 4fdf422528..7bab2cf675 100644
--- a/plugins/Overlay/tests/UI/expected-screenshots/Overlay_transitions.png
+++ b/plugins/Overlay/tests/UI/expected-screenshots/Overlay_transitions.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8e584e4557798b1e461093cbbfe4e76a76d8035ee0082a6320c43925b357229c
-size 135986
+oid sha256:edf2e0c07ef2b916ee9f4f9ae9b828e6224a89b0a81b298fad0c27a24366de3d
+size 150427