Migrate errorPage404 to Playwright with CI setup

.github/workflows/simorgh-e2e-playwright-page-types.yml

@@ -0,0 +1,73 @@
+name: Playwright E2E - Page Types
+on:
+  pull_request:
+    branches:
+      - '**'
+permissions:
+  contents: read
+
+jobs:
+  playwright-run:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [22.x]
+    env:
+      CI: true
+      LOG_LEVEL: 'error'
+      APP_ENV: 'local'
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: yarn
+
+      - name: Enable Corepack
+        run: corepack enable
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Install Playwright browser
+        working-directory: ws-nextjs-app
+        run: npx playwright install --with-deps chromium
+
+      - name: Build Simorgh NextJS app
+        working-directory: ws-nextjs-app
+        run: yarn build
+
+      - name: Start Simorgh NextJS app and run Playwright tests
+        working-directory: ws-nextjs-app
+        run: |
+          set -euo pipefail
+          yarn start > /tmp/simorgh-nextjs.log 2>&1 &
+          SERVER_PID=$!
+
+          cleanup() {
+            kill "$SERVER_PID" || true
+          }
+          trap cleanup EXIT
+
+          if ! curl --retry 120 --retry-delay 1 --retry-all-errors \
+              -fsS "http://127.0.0.1:7081/api/status" > /dev/null; then
+            echo "Server failed to start"
+            cat /tmp/simorgh-nextjs.log || true
+            exit 1
+          fi
+
+          yarn playwright:e2e
+
+      - name: Upload Playwright test artifacts
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-error-page404-artifacts
+          path: |
+            ws-nextjs-app/playwright-report
+            ws-nextjs-app/test-results
+          if-no-files-found: ignore

ws-nextjs-app/.gitignore

@@ -7,6 +7,8 @@
 
 # testing
 /coverage
+/test-results/
+/playwright-report/
 
 # next.js
 /.next/

ws-nextjs-app/cypress/support/config/envs.ts

@@ -12,7 +12,11 @@ export type EnvironmentConfigType = {
   togglesUrl: string;
 };
 
-type Environment = 'live' | 'test' | 'local';
+export type Environment = 'live' | 'test' | 'local';
+
+type CypressEnvironmentReader = {
+  env: (name: string) => string | boolean | undefined;
+};
 
 const config = {
   live: {
@@ -59,14 +63,48 @@ const config = {
 const geoLocate = (conf: EnvironmentConfigType, isUk = false) => {
   if (!isUk) return conf;
 
-  // eslint-disable-next-line no-param-reassign
-  conf.baseUrl = conf.baseUrl.replace('.com', '.co.uk');
-  // eslint-disable-next-line no-param-reassign
-  conf.dataUrl = conf.dataUrl.replace('.com', '.co.uk');
+  return {
+    ...conf,
+    baseUrl: conf.baseUrl.replace('.com', '.co.uk'),
+    dataUrl: conf.dataUrl.replace('.com', '.co.uk'),
+  };
+};
+
+const environmentConfig = config satisfies Record<
+  Environment,
+  EnvironmentConfigType
+>;
+
+const isEnvironment = (
+  value: string | boolean | undefined,
+): value is Environment =>
+  value === 'live' || value === 'test' || value === 'local';
+
+const getCypressEnvironmentReader = () => {
+  const { Cypress } = globalThis as typeof globalThis & {
+    Cypress?: CypressEnvironmentReader;
+  };
+
+  return Cypress;
+};
+
+export const getEnvConfig = (env: Environment, uk = false) =>
+  geoLocate(environmentConfig[env], uk);
+
+const getCurrentEnvConfig = () => {
+  const cypressEnvironmentReader = getCypressEnvironmentReader();
+  const currentEnvironment = cypressEnvironmentReader?.env('APP_ENV');
+
+  if (!isEnvironment(currentEnvironment)) {
+    return getEnvConfig('local');
+  }
 
-  return conf;
+  return getEnvConfig(
+    currentEnvironment,
+    Boolean(cypressEnvironmentReader?.env('UK')),
+  );
 };
 
-export default typeof Cypress !== 'undefined'
-  ? geoLocate(config[Cypress.env('APP_ENV') as Environment], Cypress.env('UK'))
-  : (env: Environment, uk: boolean) => geoLocate(config[env], uk);
+export default getCypressEnvironmentReader()
+  ? getCurrentEnvConfig()
+  : (env: Environment, uk = false) => getEnvConfig(env, uk);

ws-nextjs-app/jest.config.ts

@@ -69,6 +69,7 @@ export default async (): Promise<Config> => {
       '**/__tests__/**/*.{js,jsx,ts,tsx}',
       '**/?(*.)+(spec|test).{js,jsx,ts,tsx}',
       '!**/integration/!(utils)/**/*',
+      '!**/playwright/**/*',
     ],
   });
 

ws-nextjs-app/package.json

@@ -28,6 +28,11 @@
     "cypress:application": "cypress run --browser chrome --spec ./cypress/e2e/application",
     "cypress:page-types": "cypress run --browser chrome --spec ./cypress/e2e/pageTypes",
     "cypress:special-features": "cypress run --browser chrome --spec ./cypress/e2e/specialFeatures",
+    "playwright:e2e": "APP_ENV=local playwright test",
+    "playwright:e2e:chrome": "APP_ENV=local PLAYWRIGHT_CHANNEL=chrome playwright test --headed",
+    "playwright:e2e:test": "APP_ENV=test playwright test",
+    "playwright:e2e:live": "APP_ENV=live playwright test",
+    "playwright:e2e:ui": "APP_ENV=local playwright test --ui",
     "cypress:onefile": "CYPRESS_APP_ENV=live CYPRESS_SMOKE=false cypress run --spec './cypress/e2e/articlePage/*'",
     "cypress:oneserviceandonefile": "CYPRESS_APP_ENV=live CYPRESS_SMOKE=false CYPRESS_ONLY_SERVICE=mundo cypress run  --spec './cypress/e2e/articlePage/*'",
     "cypress:interactive": "cypress open --browser chrome",
@@ -38,6 +43,7 @@
     "@cypress/webpack-preprocessor": "7.0.1",
     "@jest/environment": "30.2.0",
     "@jest/types": "30.2.0",
+    "@playwright/test": "1.55.0",
     "@swc/core": "1.15.24",
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.3.1",

ws-nextjs-app/playwright.config.ts

@@ -0,0 +1,29 @@
+import { defineConfig, type ReporterDescription } from '@playwright/test';
+
+const appEnv = process.env.APP_ENV || 'local';
+const playwrightChannel = process.env.PLAYWRIGHT_CHANNEL;
+
+const baseUrlByEnv: Record<string, string> = {
+  local: 'http://localhost:7081',
+  test: 'https://www.test.bbc.com',
+  live: 'https://www.bbc.com',
+};
+
+const baseURL =
+  process.env.PLAYWRIGHT_BASE_URL || baseUrlByEnv[appEnv] || baseUrlByEnv.local;
+
+const reporter: ReporterDescription[] = process.env.CI
+  ? [['list'], ['html', { open: 'never' }]]
+  : [['list']];
+
+export default defineConfig({
+  testDir: './playwright',
+  timeout: 15_000,
+  retries: appEnv === 'live' ? 2 : 1,
+  use: {
+    baseURL,
+    trace: 'retain-on-failure',
+    ...(playwrightChannel ? { channel: playwrightChannel } : {}),
+  },
+  reporter,
+});

ws-nextjs-app/playwright/README.md

@@ -0,0 +1,141 @@
+# Playwright E2E Guide (ws-nextjs-app)
+
+This guide explains how to set up and run Playwright tests for the Next.js app.
+
+## Scope
+
+- Test runner: `@playwright/test`
+- Config file: `ws-nextjs-app/playwright.config.ts`
+- Test root (from config): `ws-nextjs-app/playwright`
+
+This is intentionally general so additional page types can be added over time.
+
+## Prerequisites
+
+1. Use the correct Node version for this repo.
+2. Install dependencies from repo root:
+
+```
+yarn install
+```
+
+3. Install Playwright browsers once:
+
+```
+cd ws-nextjs-app
+npx playwright install --with-deps chromium
+```
+
+If you plan to run tests against the locally installed Google Chrome browser (rather than the bundled Chromium build), install the Chrome channel too:
+
+```
+npx playwright install chrome
+```
+
+> "Channel" here is Playwright's term for a specific browser distribution (e.g. `chrome`, `msedge`). By default Playwright runs against its bundled Chromium build; setting a channel switches to a real installed browser instead.
+
+## Environment model
+
+Playwright uses `APP_ENV` to select base URL in `playwright.config.ts`:
+
+- `local` -> `http://localhost:7081`
+- `test` -> `https://www.test.bbc.com`
+- `live` -> `https://www.bbc.com`
+
+Default script behavior is local unless another script sets `APP_ENV`.
+
+## Running tests
+
+From `ws-nextjs-app`:
+
+- Run all Playwright tests (local):
+
+```
+yarn playwright:e2e
+```
+
+- Run all Playwright tests in headed Chrome (local):
+
+```
+yarn playwright:e2e:chrome
+```
+
+- Run all Playwright tests against test/live environments:
+
+```
+yarn playwright:e2e:test
+yarn playwright:e2e:live
+```
+
+- Run a single file:
+
+```
+yarn playwright:e2e playwright/pageTypes/<pageType>/<file>.spec.ts
+```
+
+- List discovered tests without running:
+
+```
+yarn playwright:e2e --list
+```
+
+- Filter by test name:
+
+```
+yarn playwright:e2e --grep "404"
+```
+
+## Local server expectations
+
+Local runs use `http://localhost:7081`. If tests fail to connect, start the app first.
+
+Development mode:
+
+```
+yarn dev
+```
+
+Production-like mode:
+
+```
+yarn build
+yarn start
+```
+
+Then run Playwright in a second terminal.
+
+## Debugging failures
+
+Current config keeps traces on failure (`trace: retain-on-failure`).
+
+- Open HTML report:
+
+```
+npx playwright show-report
+```
+
+- Open trace file (if available):
+
+```
+npx playwright show-trace <path-to-trace.zip>
+```
+
+## Adding new page types
+
+To add coverage for a new page type:
+
+1. Create a folder under `ws-nextjs-app/playwright/pageTypes/<pageType>/`.
+2. Add one or more `*.spec.ts` files.
+3. Reuse shared helpers/data where practical.
+4. Keep test naming clear and service-aware.
+5. Verify discovery:
+
+```
+yarn playwright:e2e --list
+```
+
+Optional: add convenience scripts in `ws-nextjs-app/package.json` for frequently run specs.
+
+## CI notes
+
+A Playwright workflow exists under `.github/workflows/` to run Playwright page type tests on pull requests. Keep CI commands aligned with the scripts in `ws-nextjs-app/package.json`.