chore(functional_tests): update CI image to add different browsers

.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-v3
+      - image: mozilla/fxa-circleci:ci-builder-v4
     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-v3
+      - image: mozilla/fxa-circleci:ci-test-runner-v4
     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-v3
+      - image: mozilla/fxa-circleci:ci-test-runner-v4
       - 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-v3
+      - image: mozilla/fxa-circleci:ci-functional-test-runner-v4
       - 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-v3
+      - image: mozilla/fxa-circleci:ci-functional-test-runner-v4
     environment:
       NODE_ENV: development
       CUSTOMS_SERVER_URL: none
@@ -468,7 +468,7 @@ commands:
             docker build . \
                 -f ./project/_dev/docker/ci/Dockerfile \
                 --target << parameters.target >> \
-                -t mozilla/fxa-circleci:ci-<< parameters.target >>-v3
+                -t mozilla/fxa-circleci:ci-<< parameters.target >>-v4
 
   create-fxa-ci-images:
     # Build CI images. Images are built on top of each other. Each is optimized for a specific task.
@@ -497,10 +497,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-v3
-            docker push mozilla/fxa-circleci:ci-test-runner-v3
-            docker push mozilla/fxa-circleci:ci-functional-test-runner-v3
-            docker push mozilla/fxa-circleci:ci-builder-v3
+            .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
             wait
 
 jobs:
@@ -976,8 +976,7 @@ workflows:
             branches:
               only:
                 - main
-                - chore/update-tsconfig-for-node-20
-                - update-functional-test-executor
+                - update-ci-image
             tags:
               ignore: /.*/
           force-deploy: << pipeline.parameters.force-deploy-fxa-ci-images >>

_dev/docker/ci/Dockerfile

@@ -21,7 +21,6 @@ FROM test-runner as builder
 WORKDIR /home/circleci
 COPY --chown=circleci:circleci .yarn .yarn
 WORKDIR /home/circleci/project
-ENV PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1
 ENV YARN_CHECKSUM_BEHAVIOR=throw
 ENV FXA_AUTO_INSTALL=0
 RUN _scripts/l10n/clone.sh
@@ -33,7 +32,7 @@ RUN yarn install --immutable;
 # must based on cimg/node:20.11-browsers, which is why this stage
 # is necessary.
 FROM builder as playwright-install
-RUN npx playwright install firefox;
+RUN npx playwright install --with-deps firefox chromium webkit;
 
 
 # Runs functional tests in our CI. Needs minimal install. Assumes