add browser parameters to run tests

.circleci/config.yml

@@ -82,7 +82,7 @@ executors:
   # step, and the saving the initial a workspace state.
   build-executor:
     docker:
-      - image: mozilla/fxa-circleci:ci-builder-v4
+      - image: mozilla/fxa-circleci:ci-builder-v5
     environment:
       NODE_ENV: development
       FIRESTORE_EMULATOR_HOST: localhost:9090
@@ -98,7 +98,7 @@ executors:
         default: medium
     resource_class: << parameters.resource_class >>
     docker:
-      - image: mozilla/fxa-circleci:ci-test-runner-v4
+      - image: mozilla/fxa-circleci:ci-test-runner-v5
     environment:
       NODE_ENV: development
       FIRESTORE_EMULATOR_HOST: localhost:9090
@@ -114,7 +114,7 @@ executors:
         default: large
     resource_class: << parameters.resource_class >>
     docker:
-      - image: mozilla/fxa-circleci:ci-test-runner-v4
+      - image: mozilla/fxa-circleci:ci-test-runner-v5
       - image: cimg/mysql:8.0
         command: --default-authentication-plugin=mysql_native_password
       - image: jdlk7/firestore-emulator
@@ -137,7 +137,7 @@ executors:
         default: large
     resource_class: << parameters.resource_class >>
     docker:
-      - image: mozilla/fxa-circleci:ci-functional-test-runner-v4
+      - image: mozilla/fxa-circleci:ci-functional-test-runner-v5
       - image: redis
       - image: pafortin/goaws
       - image: cimg/mysql:8.0
@@ -178,7 +178,7 @@ executors:
         default: medium+
     resource_class: << parameters.resource_class >>
     docker:
-      - image: mozilla/fxa-circleci:ci-functional-test-runner-v4
+      - image: mozilla/fxa-circleci:ci-functional-test-runner-v5
     environment:
       NODE_ENV: development
       CUSTOMS_SERVER_URL: none
@@ -323,7 +323,7 @@ commands:
             cd packages/functional-tests/tests
             TEST_FILES=$(circleci tests glob "./**/*.spec.ts")
             cd ..
-            echo $TEST_FILES | circleci tests run --command="xargs yarn playwright test --project=<< parameters.project >> $GREP" --verbose --split-by=timings --timings-type=classname
+            echo $TEST_FILES | circleci tests run --command="xargs yarn playwright test --project=<< parameters.project >>-webkit $GREP" --verbose --split-by=timings --timings-type=classname
           environment:
             NODE_OPTIONS: --dns-result-order=ipv4first
             JEST_JUNIT_OUTPUT_DIR: ./artifacts/tests
@@ -474,7 +474,7 @@ commands:
             docker build . \
                 -f ./project/_dev/docker/ci/Dockerfile \
                 --target << parameters.target >> \
-                -t mozilla/fxa-circleci:ci-<< parameters.target >>-v4
+                -t mozilla/fxa-circleci:ci-<< parameters.target >>-v5
 
   create-fxa-ci-images:
     # Build CI images. Images are built on top of each other. Each is optimized for a specific task.
@@ -503,10 +503,10 @@ commands:
           name: Push CI Images and Extract Yarn Cache
           command: |
             docker login -u $DOCKER_USER_fxa_circleci -p $DOCKER_PASS_fxa_circleci
-            .circleci/docker-copy-cache.sh mozilla/fxa-circleci:ci-builder-v4
-            docker push mozilla/fxa-circleci:ci-test-runner-v4
-            docker push mozilla/fxa-circleci:ci-functional-test-runner-v4
-            docker push mozilla/fxa-circleci:ci-builder-v4
+            .circleci/docker-copy-cache.sh mozilla/fxa-circleci:ci-builder-v5
+            docker push mozilla/fxa-circleci:ci-test-runner-v5
+            docker push mozilla/fxa-circleci:ci-functional-test-runner-v5
+            docker push mozilla/fxa-circleci:ci-builder-v5
             wait
 
 jobs:
@@ -881,44 +881,6 @@ workflows:
             - Init (PR)
           post-steps:
             - fail-fast
-      - unit-test:
-          name: Unit Test (PR)
-          requires:
-            - Build (PR)
-          post-steps:
-            - fail-fast
-      - integration-test:
-          name: Integration Test - Frontends (PR)
-          resource_class: large
-          nx_run: affected --base=main --head=$CIRCLE_SHA1
-          projects: --exclude '*,!tag:scope:frontend'
-          requires:
-            - Build (PR)
-      - integration-test:
-          name: Integration Test - Servers (PR)
-          nx_run: affected --base=main --head=$CIRCLE_SHA1
-          projects: --exclude '*,!tag:scope:server'
-          requires:
-            - Build (PR)
-      - integration-test:
-          name: Integration Test - Servers - Auth (PR)
-          nx_run: affected --base=main --head=$CIRCLE_SHA1
-          projects: --exclude '*,!tag:scope:server:auth'
-          requires:
-            - Build (PR)
-      - integration-test:
-          name: Integration Test - Servers - Auth V2 (PR)
-          nx_run: affected --base=main --head=$CIRCLE_SHA1
-          projects: --exclude '*,!tag:scope:server:auth'
-          target: -t test-integration-v2
-          requires:
-            - Build (PR)
-      - integration-test:
-          name: Integration Test - Libraries (PR)
-          nx_run: affected --base=main --head=$CIRCLE_SHA1
-          projects: --exclude '*,!tag:scope:shared:*'
-          requires:
-            - Build (PR)
       - check-required-jobs-complete:
           name: Check all required jobs are complete (PR)
           requires:
@@ -933,26 +895,6 @@ workflows:
           name: Merge Playwright Reports (PR)
           requires:
             - Check all required jobs are complete (PR)
-      - build-and-deploy-storybooks:
-          name: Deploy Storybooks (PR)
-          requires:
-            - Build (PR)
-      - on-complete:
-          name: Tests Complete (PR)
-          stage: Tests
-          job_type: build
-          requires:
-            - Lint (PR)
-            - Compile (PR)
-            - Unit Test (PR)
-            - Integration Test - Frontends (PR)
-            - Integration Test - Servers (PR)
-            - Integration Test - Servers - Auth (PR)
-            - Integration Test - Servers - Auth V2 (PR)
-            - Integration Test - Libraries (PR)
-            - Functional Tests - Playwright (PR)
-            - Deploy Storybooks (PR)
-            - Check all required jobs are complete (PR)
 
   # Triggered remotely. See .circleci/README.md
   production_smoke_tests:
@@ -1026,7 +968,7 @@ workflows:
             branches:
               only:
                 - main
-                - update-ci-image
+                - run-tests-in-multiple-browsers
             tags:
               ignore: /.*/
           force-deploy: << pipeline.parameters.force-deploy-fxa-ci-images >>

_dev/docker/ci/Dockerfile

@@ -15,7 +15,7 @@ RUN cp yarn.lock yarn.lock.base;
 
 
 # Runs initial build stage in CI. Needs full install. Responsible for
-# setting up the initially workspace state. This image installs npm
+# setting up the initial workspace state. This image installs npm
 # packages and builds heavily referenced workspaces.
 FROM test-runner as builder
 WORKDIR /home/circleci
@@ -26,20 +26,52 @@ ENV FXA_AUTO_INSTALL=0
 RUN _scripts/l10n/clone.sh
 RUN yarn install --immutable;
 
-# Acts as an intermediate stage for adding the firefox install. Note,
-# that a yarn install must happen first to ensure the correct version
-# of firefox is installed. Also note that the functional-test-runner
-# must based on cimg/node:20.11-browsers, which is why this stage
-# is necessary.
-FROM builder as playwright-install
-RUN npx playwright install --with-deps firefox chromium webkit;
 
+# Use the official Playwright image to install Playwright and browsers
+FROM mcr.microsoft.com/playwright:v1.46.1-noble as playwright-install
 
-# Runs functional tests in our CI. Needs minimal install. Assumes
-# workspace will be restored into the project folder.
+RUN apt-get update && apt-get install -y \
+    libicu-dev \
+    libxslt1.1 \
+    libwoff1 \
+    libvpx-dev \
+    libevent-dev \
+    libopus-dev \
+    gstreamer1.0-libav \
+    gstreamer1.0-plugins-base \
+    gstreamer1.0-plugins-good \
+    gstreamer1.0-plugins-bad \
+    gstreamer1.0-plugins-ugly \
+    gstreamer1.0-alsa \
+    gstreamer1.0-pulseaudio \
+    gstreamer1.0-plugins-rtp \
+    gstreamer1.0-tools \
+    gstreamer1.0-x \
+    libwebpdemux2 \
+    libenchant-2-2 \
+    libsecret-1-0 \
+    libhyphen0 \
+    libmanette-0.2-0 \
+    libflite1 \
+    libx264-dev
+
+WORKDIR /home/pwuser
+# Playwright comes preinstalled in this image, so we don't need additional steps here.
+
+# Runs functional tests in our CI, using the cimg/node image and the Playwright installation
 FROM cimg/node:20.11-browsers as functional-test-runner
 WORKDIR /home/circleci
-COPY --chown=circleci:circleci --from=playwright-install /home/circleci/.cache/ms-playwright .cache/ms-playwright/
+
+# Copy the Playwright browsers and setup from the official image
+COPY --from=playwright-install /ms-playwright /ms-playwright
+
+# Copy project files
 COPY --chown=circleci:circleci project project
 WORKDIR /home/circleci/project
+
+# Ensure correct library path at runtime
+ENV PLAYWRIGHT_BROWSERS_PATH=/ms-playwright
+ENV LD_LIBRARY_PATH=/lib/x86_64-linux-gnu:$LD_LIBRARY_PATH
+
+# Copy the install script and any necessary binaries
 COPY --chown=circleci:circleci install /usr/local/bin/

packages/functional-tests/package.json

@@ -13,7 +13,7 @@
     "lint": "eslint ."
   },
   "devDependencies": {
-    "@playwright/test": "^1.43.1",
+    "@playwright/test": "1.46.1",
     "@types/eslint": "^8",
     "@types/pdf-parse": "^1.1.4",
     "@types/upng-js": "^2",

packages/functional-tests/playwright.config.ts

@@ -56,16 +56,46 @@ export default defineConfig<PlaywrightTestConfig<TestOptions, WorkerOptions>>({
     viewport: { width: 1280, height: 720 },
   },
   projects: [
+    // ...TargetNames.map(
+    //   (name) =>
+    //     ({
+    //       name,
+    //       use: {
+    //         browserName: 'firefox',
+    //         targetName: name,
+    //         launchOptions: {
+    //           args: DEBUG ? ['-start-debugger-server'] : undefined,
+    //           firefoxUserPrefs: getFirefoxUserPrefs(name, DEBUG),
+    //           headless: !DEBUG,
+    //           slowMo: SLOWMO,
+    //         },
+    //         trace: 'retain-on-failure',
+    //       },
+    //     } as Project)
+    // ),
+    // ...TargetNames.map(
+    //   (name) =>
+    //     ({
+    //       name: `${name}-chromium`,
+    //       use: {
+    //         browserName: 'chromium',
+    //         targetName: name,
+    //         launchOptions: {
+    //           headless: !DEBUG,
+    //           slowMo: SLOWMO,
+    //         },
+    //         trace: 'retain-on-failure',
+    //       },
+    //     } as Project)
+    // ),
     ...TargetNames.map(
       (name) =>
         ({
-          name,
+          name: `${name}-webkit`,
           use: {
-            browserName: 'firefox',
+            browserName: 'webkit',
             targetName: name,
             launchOptions: {
-              args: DEBUG ? ['-start-debugger-server'] : undefined,
-              firefoxUserPrefs: getFirefoxUserPrefs(name, DEBUG),
               headless: !DEBUG,
               slowMo: SLOWMO,
             },

yarn.lock

@@ -15783,14 +15783,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@playwright/test@npm:^1.43.1":
-  version: 1.43.1
-  resolution: "@playwright/test@npm:1.43.1"
+"@playwright/test@npm:1.46.1":
+  version: 1.46.1
+  resolution: "@playwright/test@npm:1.46.1"
   dependencies:
-    playwright: 1.43.1
+    playwright: 1.46.1
   bin:
     playwright: cli.js
-  checksum: f9db387b488a03125e5dc22dd7ffed9c661d1f2428188912a35a2235b3bd9d826b390e7600d04998639994f5a96695b9dc9034ca9cb59e261d2fdee93a60df3f
+  checksum: 180d90c6421ee6a8c00a1ae65d91d5f69767e2de95c3f5582ac2bdf3a388e621fdd3ee00ecb7836db427bb0d4cee58111c14f133cb62150357d8e4f43e3e2295
   languageName: node
   linkType: hard
 
@@ -40476,7 +40476,7 @@ fsevents@~2.1.1:
   version: 0.0.0-use.local
   resolution: "functional-tests@workspace:packages/functional-tests"
   dependencies:
-    "@playwright/test": ^1.43.1
+    "@playwright/test": 1.46.1
     "@types/eslint": ^8
     "@types/pdf-parse": ^1.1.4
     "@types/upng-js": ^2
@@ -56635,27 +56635,27 @@ fsevents@~2.1.1:
   languageName: node
   linkType: hard
 
-"playwright-core@npm:1.43.1":
-  version: 1.43.1
-  resolution: "playwright-core@npm:1.43.1"
+"playwright-core@npm:1.46.1":
+  version: 1.46.1
+  resolution: "playwright-core@npm:1.46.1"
   bin:
     playwright-core: cli.js
-  checksum: 7c96b3a4a4bce2ee22c3cd680c9b0bb9e4bf07ee4b51d1e9a7f47a6489c7b0b960d4b550e530b8f41d1ffeadd26c7c6bb626ae8689dfd90dce1cb8e35ae78ff7
+  checksum: 99a03f97d76af02b0565aa09758eb03427e13497ef7e9e9044fd1184a5f050e7545a517dd7ad8988a68b3ea76e2ba0d411f81e410b1cb29f5ac9161c49689822
   languageName: node
   linkType: hard
 
-"playwright@npm:1.43.1":
-  version: 1.43.1
-  resolution: "playwright@npm:1.43.1"
+"playwright@npm:1.46.1":
+  version: 1.46.1
+  resolution: "playwright@npm:1.46.1"
   dependencies:
     fsevents: 2.3.2
-    playwright-core: 1.43.1
+    playwright-core: 1.46.1
   dependenciesMeta:
     fsevents:
       optional: true
   bin:
     playwright: cli.js
-  checksum: de9db021f93018a18275bbb5af09ebf1804aa0534f47578b35b440064abc774509740205802824afc94a99fc84dd55ffe9e215718ad3ecc691b251ab3882b096
+  checksum: 9e721cb27f919cd92ea8c7461f4a8e97e32eade9da036baa4747f483549e33a8d77585f51e228d6639a1e28a76b0c1d59ca0a05dbd07aa3cfe427be7aaeb9ec8
   languageName: node
   linkType: hard