Modernize UI screenshot-testing npm stack → Node 24

.ddev/initial-config/config.js

@@ -1,22 +1,10 @@
-const fs = require('fs');
-
 exports.piwikUrl = "https://matomo.ddev.site/";
 exports.phpServer = {
     HTTP_HOST: 'matomo.ddev.site',
     REQUEST_URI: '/',
     REMOTE_ADDR: '127.0.0.1'
 };
 
-const browserConfig = {
-  args: ['--no-sandbox', '--ignore-certificate-errors']
-};
-
-// Puppeteer's bundled Chromium is amd64-only. When running on an arm64
-// container (e.g. Apple Silicon without Rosetta), fall back to the system
-// Chromium so UI tests still execute -- screenshots won't match CI in that
-// case (the configure-platform.sh hook prints a warning).
-if (process.arch !== 'x64' && fs.existsSync('/usr/bin/chromium')) {
-  browserConfig.executablePath = '/usr/bin/chromium';
-}
-
-exports.browserConfig = browserConfig;
+// browserConfig (including the Chrome/Chromium executable path) is provided by tests/UI/config.dist.js,
+// which resolves the Chromium the ddev web image installs. Local screenshots may still differ
+// slightly from the CI-generated expected screenshots.

.github/workflows/matomo-tests.yml

@@ -316,7 +316,7 @@ jobs:
         with:
           test-type: 'JS'
           php-version: '8.1'
-          node-version: '12'
+          node-version: '24'
   Client:
     runs-on: ubuntu-24.04
     timeout-minutes: 15
@@ -402,7 +402,7 @@ jobs:
           php-version: '8.1'
           mysql-engine: 'Mysql'
           mysql-version: '8.0'
-          node-version: '16'
+          node-version: '24'
           redis-service: true
           artifacts-pass: ${{ secrets.ARTIFACTS_PASS }}
           upload-artifacts: true
@@ -439,7 +439,7 @@ jobs:
           php-version: '8.1'
           mysql-engine: 'Mysql'
           mysql-version: '8.0'
-          node-version: '16'
+          node-version: '24'
           redis-service: true
           artifacts-pass: ${{ secrets.ARTIFACTS_PASS }}
           upload-artifacts: true

.github/workflows/run-single-ui-test-suite.yml

@@ -47,7 +47,7 @@ jobs:
           ui-test-options: '${{ inputs.test_suite_name }}'
           test-type: 'UI'
           php-version: '8.1'
-          node-version: '16'
+          node-version: '24'
           redis-service: true
           artifacts-pass: ${{ secrets.ARTIFACTS_PASS }}
           upload-artifacts: true

plugins/BotTracking/tests/UI/BotTracking_spec.js

@@ -268,6 +268,16 @@ describe("BotTracking", function () {
         expect(await sameRow(docsWidgetId, brokenWidgetId)).to.equal(1);
         expect(await sameRow(humanWidgetId, aiWidgetId)).to.equal(1);
 
+        // The first (wide) report's DataTable header can be left mis-positioned after the layout reflows
+        // (help notification dismissal) under the modern headless Chrome. Scroll to top and trigger a
+        // resize so the tables recompute their header/column layout before capturing.
+        await page.evaluate(() => {
+            window.scrollTo(0, 0);
+            window.dispatchEvent(new Event('resize'));
+        });
+        await page.waitForTimeout(250);
+        await page.waitForNetworkIdle();
+
         var elem = await page.$('.pageWrap');
         expect(await elem.screenshot()).to.matchImage('bot_content_requests');
     });