Visual regression

.env.example

@@ -0,0 +1,6 @@
+# Include for running the Playwright tests in Docker
+# This is switched out in CI when the Docker container isn't required
+PLAYWRIGHT_BASE_URL=http://host.docker.internal:6006
+
+# Anthropic API key
+ANTHROPIC_API_KEY=

.github/workflows/playwright.yaml

@@ -0,0 +1,36 @@
+name: 'Playwright Tests'
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    env:
+      PLAYWRIGHT_BASE_URL: http://localhost:6006
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.node-version'
+      - name: Install dependencies
+        run: npm ci
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+      - name: Build Storybook
+        run: npm run build-storybook
+      - name: Serve Storybook and run Playwright tests
+        run: |
+          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+            "npx http-server storybook-static --port 6006 --silent" \
+            "npx wait-on tcp:6006 && npx playwright test"
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -27,6 +27,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel
@@ -36,3 +37,9 @@ yarn-error.log*
 next-env.d.ts
 
 *storybook.log
+
+# playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

documentation/getting-started.md

@@ -29,3 +29,31 @@ npm run dev
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. Make sure that you don't have any other app already running on `3000` otherwise the site may show up on another port number.
 
 If you'd like to contribute to the project, create a branch off of `main` with a description of the feature or bug fix.
+
+## Running Storybook
+
+Components used in this project are documented in a Storybook instance. To run storybook locally, use the following command:
+
+`npm run storybook`
+
+To run automated smoke and accessibility tests over the Storybook stories, open a new terminal window. Then run `npm run test-storybook`.
+
+## Running Playwright tests
+
+The Playwright tests for this repository are based on the Storybook instance, so make sure this is running first. There are different methods of setting up your environment depending on the device you are using:
+
+### Linux
+
+Edit your `.env` file so that the `PLAYWRIGHT_BASE_URL=http://localhost:6006`
+
+### Windows and MacOS
+
+Edit your `.env` file so that the `PLAYWRIGHT_BASE_URL=http://host.docker.internal:6006`
+
+Run `npm run docker-playwright` to enter a docker container. This means that CI and you will have the same operating system while testing visual regression, standardising font rendering and other small differences.
+
+### Test commands
+
+You can now run tests using `npm run playwright`
+
+To update snapshots, run `npm run playwright -- --update-snapshots`. If you just want to update one component, use `npm run playwright -- header --update-snapshots` and only the name of the component specified will be run.