front, scripts: add playwright container for e2e tests

Signed-off-by: Alice Khoudli <[email protected]>

flake.nix

@@ -84,6 +84,7 @@
 
               # OSRD dev scripts
               osrd-dev-scripts
+              jq
 
             ]
             # Section added only on Linux systems

front/.dockerignore

@@ -1,3 +1,4 @@
 node_modules
 npm-debug.log
 Dockerfile
+playwright-report

front/README.md

@@ -45,21 +45,27 @@ It requires:
 
 Now you can run the test with `cd front/ && yarn e2e-tests`.
 
-> [!CAUTION]
-> If you try to run `yarn start` instead of running it through docker, you'll notice it doesn't
-> work because the gateway can't access your local port from inside a container. 2 solutions:
+If you are using a Linux distribution not supported by playwright (which only supports Windows, macOS and Ubuntu/Debian),
+you can instead start the tests inside a docker container using `osrd/scripts/run-front-playwright-container.sh`.
+You may pass the same options and arguments to this script as you would to `yarn e2e-tests` or `yarn playwright test`.
+
+> [!CAUTION] If you try to run `yarn start` instead of running it through docker, you'll notice it
+> doesn't work because the gateway can't access your local port from inside a container. 2
+> solutions:
 >
 > - run all the components locally (you might keep Postgres and Valkey in containers)
 > - if on Linux, you can also launch all the containers on the host network: you can replace the
-> `docker compose <something>` above with `osrd/scripts/host-compose.sh <something>`
+>   `docker compose <something>` above with `osrd/scripts/host-compose.sh <something>`
 
 If the tests fail, you'll find a `front/test-results` folder that will contain videos of the fail
 test executions. They might be of help to understand what's going on. Note that the CI also exports
 these videos as artifacts.
 
-You may also want to explore the documentation of the test framework [Playwright](https://playwright.dev/).
-For example, try launching each test independently using `yarn playwright test --ui`, or debug a
-test with `yarn playwright test --debug`.
+You may also want to explore the documentation of the test framework
+[Playwright](https://playwright.dev/). For example, try launching each test independently using
+`yarn playwright test --ui`, debug a test with `yarn playwright test --debug`, or launch a specified
+test of a specified test file with a specified browser once with for example
+`yarn playwright test 011-op-times-and-stops-tab.spec.ts -g "should correctly set and display times and stops tables" --project=firefox  --retries=0`.
 
 ## Design rules
 

front/docker/Dockerfile.playwright

@@ -0,0 +1,10 @@
+ARG PLAYWRIGHT_VERSION=latest
+FROM mcr.microsoft.com/playwright:$PLAYWRIGHT_VERSION
+
+COPY front/package.json front/yarn.lock /app/front/
+WORKDIR /app/front
+RUN yarn install --frozen-lockfile
+
+COPY front /app/front/
+COPY tests /app/tests
+RUN chmod a+w /app/front/

scripts/run-front-playwright-container.sh

@@ -0,0 +1,43 @@
+#!/usr/bin/env bash
+
+set -e
+
+# Open the base osrd folder, assuming the script is located in osrd/scripts
+cd "$(realpath "$(dirname "$0")"/..)"
+
+# Detect the playwright version installed in the front
+if ! command -v jq &> /dev/null; then
+  echo "Error: jq is not installed. Please install jq using your package manager to continue." >&2
+  exit 1
+fi
+cd front
+VERSION=$(yarn list --pattern playwright --json | jq -r '.data.trees[].name | split("@")[-1]' | sort -u)
+if [ "$(echo "$VERSION" | wc -l)" -ne 1 ]; then
+  echo "Error: Zero or multiple playwright versions found: $VERSION" >&2
+  exit 1
+fi
+cd ..
+
+# Loop through each argument passed to the scripts, and replace --ui with --ui=host=localhost
+args=()
+for arg in "$@"; do
+  if [ "$arg" = "--ui" ]; then
+    args+=("--ui-host=localhost")
+  else
+    args+=("$arg")
+  fi
+done
+
+docker build --build-arg PLAYWRIGHT_VERSION=v"$VERSION" -t osrd-playwright:latest -f front/docker/Dockerfile.playwright .
+
+# Create the bind mounted folders if they don't exist, to avoid them being created as root
+mkdir -p "$PWD/front/playwright-report"
+mkdir -p "$PWD/front/test-results"
+
+docker run -it --rm \
+    --ipc=host \
+    --network=host \
+    -v "$PWD/front/playwright-report:/app/front/playwright-report" \
+    -v "$PWD/front/test-results:/app/front/test-results" \
+    -u "$(stat -c %u:%g .)" \
+    osrd-playwright:latest yarn playwright test "${args[@]}"