Use Chrome for testing in E2E tests

Author: Janne Rönkkö

.github/workflows/cd.yml

@@ -31,26 +31,16 @@ jobs:
     name: Set Variables
     runs-on: ubuntu-24.04
     outputs:
-      chrome_version: ${{ steps.chrome_version.outputs.CHROME_VERSION }}
+      CHROME_FOR_TESTING_VERSION: ${{ steps.chrome_for_testing_version.outputs.CHROME_FOR_TESTING_VERSION }}
     steps:
       - name: Get latest stable Chrome version
-        id: chrome_version
+        id: chrome_for_testing_version
         run: |
-          # The cypress/factory Docker image requires CHROME_VERSION to be set and the image downloads Chrome from deb
-          # repository provided by Chrome project:
-          # https://github.com/cypress-io/cypress-docker-images/blob/master/factory/installScripts/chrome/default.sh
-          # The default.sh is called from
-          # https://github.com/cypress-io/cypress-docker-images/blob/master/factory/installScripts/chrome/install-chrome-version.js
-          #
-          # A deb repository contains Packages file that lists all packages with current versions available in the package
-          # repository, i.e. the Packages file can be used to find out the current Chrome version
-          echo "CHROME_VERSION=$(
-            curl -s https://dl.google.com/linux/chrome/deb/dists/stable/main/binary-amd64/Packages \
-            | awk '
-                /^Package: google-chrome-stable/{stable_pkg=1}
-                stable_pkg && /^$/{stable_pkg=0}
-                stable_pkg && /^Version:/{print $2}
-              ' \
+          echo "CHROME_FOR_TESTING_VERSION=$(
+            curl \
+              -s \
+              https://googlechromelabs.github.io/chrome-for-testing/last-known-good-versions.json \
+              | jq -r .channels.Stable.version
           )" >> $GITHUB_OUTPUT
 
   publish_cypress_docker_image_to_acr:
@@ -66,7 +56,7 @@ jobs:
       build_arm64_image: true
       file: Dockerfile.cypress
       build_args: |
-        CHROME_VERSION=${{ needs.set_variables.outputs.chrome_version }}
+        CHROME_FOR_TESTING_VERSION=${{ needs.set_variables.outputs.chrome_for_testing_version }}
     secrets:
       azure_client_id: ${{ secrets.AZURE_CLIENT_ID }}
       azure_tenant_id: ${{ secrets.AZURE_TENANT_ID }}

cypress/package.json

@@ -9,8 +9,8 @@
     "ts:check": "yarn tsc --noEmit",
     "ts:build": "yarn tsc --build",
     "qa": "yarn --frozen-lockfile && yarn ts:check && yarn prettier:check",
-    "cy:run": "CYPRESS_BASE_URL=${CYPRESS_BASE_URL:-http://localhost:3300} cypress run --browser chrome",
-    "cy:run:video": "CYPRESS_BASE_URL=${CYPRESS_BASE_URL:-http://localhost:3300} cypress run --browser chrome --config-file ./cypress.config.video.ts"
+    "cy:run": "CYPRESS_BASE_URL=${CYPRESS_BASE_URL:-http://localhost:3300} cypress run --browser chrome-for-testing",
+    "cy:run:video": "CYPRESS_BASE_URL=${CYPRESS_BASE_URL:-http://localhost:3300} cypress run --browser chrome-for-testing --config-file ./cypress.config.video.ts"
   },
   "dependencies": {
     "@4tw/cypress-drag-drop": "^2.2.5",

cypress/support/launchBrowser.ts

@@ -23,7 +23,7 @@ function setHeadlessBrowserScreenSizeLaunchOptions(
 ): Cypress.BeforeBrowserLaunchOptions {
   console.log('Setting the browser window size to %d x %d', width, height);
 
-  if (browser.name === 'chrome') {
+  if (browser.name === 'chrome-for-testing') {
     return {
       ...launchOptions,
       args: launchOptions.args.concat(
@@ -104,7 +104,7 @@ function applyReducedMotionOptions(
   browser: Cypress.Browser,
   launchOptions: Cypress.BeforeBrowserLaunchOptions,
 ): Cypress.BeforeBrowserLaunchOptions {
-  if (browser.name === 'chrome') {
+  if (browser.name === 'chrome-for-testing') {
     return {
       ...launchOptions,
       args: launchOptions.args.concat('--force-prefers-reduced-motion'),

package.json

@@ -21,7 +21,7 @@
     "lint": "eslint './**/*.{ts,tsx}' './ui/src/locales/**/*.json' --max-warnings=0",
     "test": "yarn ws:ui test:unit",
     "test:integration": "yarn ws:ui test:integration",
-    "test:e2e": "yarn ws:db build && yarn ws:tdi timetables-data-inserter:build && CYPRESS=true yarn ws:e2e cypress run --browser chrome",
+    "test:e2e": "yarn ws:db build && yarn ws:tdi timetables-data-inserter:build && CYPRESS=true yarn ws:e2e cypress run --browser chrome-for-testing",
     "test:e2e:fast": "yarn test:e2e --config-file cypress.config.fast.ts",
     "test:e2e:open": "yarn check-hasura-metadata --e2e && yarn ws:db build && yarn ws:tdi timetables-data-inserter:build && CYPRESS=true yarn ws:e2e cypress open",
     "test:e2e:list": "yarn ws:e2e print-tests 'e2e/**.cy.ts'",