Update the UI expected screenshots and specs for Matomo 6

tests/UI/GoogleAnalyticsImporterGA4_spec.js

@@ -14,6 +14,35 @@ describe("GoogleAnalyticsImporterGA4", function () {
 
     var url = "?module=GoogleAnalyticsImporter&action=index&idSite=1&period=day&date=yesterday";
 
+    // type into a field with real keyboard events and verify the value arrived
+    // (a freshly rendered field sometimes swallows the first characters);
+    // values set programmatically do not reach the Vue model
+    async function typeFieldValue(selector, text) {
+        for (let attempt = 0; attempt < 3; attempt++) {
+            await (await page.$(selector)).type(text);
+            await page.waitForTimeout(100);
+            const actual = await page.evaluate(
+                (selector) => document.querySelector(selector).value,
+                selector
+            );
+            if (actual === text) {
+                return;
+            }
+            await page.evaluate((selector) => {
+                document.querySelector(selector).value = '';
+            }, selector);
+        }
+    }
+
+    // selects bind v-model to the real <select>, so a native change event works
+    async function setSelectValue(selector, value) {
+        await page.evaluate((selector, value) => {
+            const el = document.querySelector(selector);
+            el.value = value;
+            el.dispatchEvent(new Event('change', { bubbles: true }));
+        }, selector, value);
+    }
+
     async function removeStartResumeFinishTime() {
         await page.evaluate(() => $('td.import-start-finish-times').html(''));
     }
@@ -37,18 +66,19 @@ describe("GoogleAnalyticsImporterGA4", function () {
     it("should load the settings correctly with GA4 option selected", async function () {
         await page.goto(url);
 
+        // there is no importer selection radio — GA4 is the only importer on
+        // this page, so this matches the load screenshot by design
         const content = await page.$('.pageWrap');
-        await page.evaluate(() => $('input:radio[name=selectedImporter]').val('ga4').change());
         expect(await content.screenshot()).to.matchImage('load_ga4');
     });
 
     it("should start an import properly", async function () {
-        await page.evaluate(() => $('input#startDateGA4').val('2019-06-27').change());
-        await page.evaluate(() => $('input#endDateGA4').val('2019-07-02').change());
-        await page.evaluate(() => $('input#propertyIdGA4').val('properties/12345').change());
-        await page.evaluate(() => $('div[name=streamIds] input.control_text').val('streamId1').change());
-        await page.evaluate(() => $('div[name=extraCustomDimensionsGA4] input.control_text').val('userAgeBracket').change());
-        await page.evaluate(() => $('div[name=extraCustomDimensionsGA4] select:eq(0)').val('string:visit').change());
+        await typeFieldValue('input#startDateGA4', '2019-06-27');
+        await typeFieldValue('input#endDateGA4', '2019-07-02');
+        await typeFieldValue('input#propertyIdGA4', 'properties/12345');
+        await typeFieldValue('div[name=streamIds] input.control_text', 'streamId1');
+        await typeFieldValue('div[name=extraCustomDimensionsGA4] input.control_text', 'userAgeBracket');
+        await setSelectValue('div[name=extraCustomDimensionsGA4] select', 'string:visit');
         await page.click('[name=isVerboseLoggingEnabledGA4] label');
 
         await page.click('#startImportSubmitGA4');