WS-2281 Migrate a Few Homepage E2E Tests from Cypress to Playwright and Integrate with CI

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

@@ -0,0 +1,57 @@
+name: Playwright E2E - Simorgh
+on:
+  pull_request:
+    branches:
+      - '**'
+permissions:
+  contents: read
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [22.x]
+    env:
+      CI: true
+      LOG_LEVEL: 'error'
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Cache Node Modules
+        id: cache
+        uses: actions/cache@v4
+        with:
+          path: |
+            node_modules
+            ws-nextjs-app/node_modules
+          key: node-modules-${{ hashFiles('yarn.lock', 'ws-nextjs-app/yarn.lock') }}
+
+      - name: Install Node Modules
+        if: steps.cache.outputs.cache-hit != 'true'
+        run: |
+          rm -rf node_modules
+          git config --global user.name "${{ secrets.WS_UTF_USERNAME }}"
+          git config --global user.email "${{ secrets.WS_UTF_EMAIL }}"
+          git config --global url."https://${{ secrets.WS_UTF_AUTH }}@github.com/".insteadOf "https://github.com/"
+          ./scripts/installNodeModules.sh
+
+      - name: Install Playwright Browsers
+        working-directory: ws-nextjs-app
+        run: npx playwright install --with-deps
+
+      - name: Run Playwright tests
+        working-directory: ws-nextjs-app
+        run: HEADLESS=true npx playwright test --project="WorldService - Chrome"
+
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: ws-nextjs-app/playwright-report
+          retention-days: 30

.github/workflows/simorgh-integration-tests.yml

@@ -35,7 +35,12 @@ jobs:
 
       - name: Install Node Modules
         if: steps.cache.outputs.cache-hit != 'true'
-        run: ./scripts/installNodeModules.sh
+        run: |
+          rm -rf node_modules
+          git config --global user.name "${{ secrets.WS_UTF_USERNAME }}"
+          git config --global user.email "${{ secrets.WS_UTF_EMAIL }}"
+          git config --global url."https://${{ secrets.WS_UTF_AUTH }}@github.com/".insteadOf "https://github.com/"
+          ./scripts/installNodeModules.sh
 
       - name: Integration Tests - Express
         run: yarn test:integration:ci

.github/workflows/simorgh-local-server-tests.yml

@@ -35,7 +35,12 @@ jobs:
 
       - name: Install Node Modules
         if: steps.cache.outputs.cache-hit != 'true'
-        run: ./scripts/installNodeModules.sh
+        run: |
+          rm -rf node_modules
+          git config --global user.name "${{ secrets.WS_UTF_USERNAME }}"
+          git config --global user.email "${{ secrets.WS_UTF_EMAIL }}"
+          git config --global url."https://${{ secrets.WS_UTF_AUTH }}@github.com/".insteadOf "https://github.com/"
+          ./scripts/installNodeModules.sh
 
       - name: Build Simorgh - Express App
         run: yarn build:local

.github/workflows/simorgh-misc-checks.yml

@@ -40,7 +40,12 @@ jobs:
 
       - name: Install Node Modules
         if: steps.cache.outputs.cache-hit != 'true'
-        run: ./scripts/installNodeModules.sh
+        run: |
+          rm -rf node_modules
+          git config --global user.name "${{ secrets.WS_UTF_USERNAME }}"
+          git config --global user.email "${{ secrets.WS_UTF_EMAIL }}"
+          git config --global url.https://${{ secrets.WS_UTF_AUTH }}@github.com/.insteadOf https://github.com/
+          ./scripts/installNodeModules.sh
 
       - name: Chromatic UI Tests
         uses: chromaui/action@latest

.github/workflows/simorgh-unit-tests.yml

@@ -34,7 +34,12 @@ jobs:
 
       - name: Install Node Modules
         if: steps.cache.outputs.cache-hit != 'true'
-        run: ./scripts/installNodeModules.sh
+        run: |
+          rm -rf node_modules
+          git config --global user.name "${{ secrets.WS_UTF_USERNAME }}"
+          git config --global user.email "${{ secrets.WS_UTF_EMAIL }}"
+          git config --global url.https://${{ secrets.WS_UTF_AUTH }}@github.com/.insteadOf https://github.com/
+          ./scripts/installNodeModules.sh
 
       - name: Build Simorgh - Express App
         run: yarn build

.gitignore

@@ -31,3 +31,5 @@ secret.env
 src/app/legacy/moment-timezone-include/tz
 tsconfig.tsbuildinfo
 src/service-worker-test.js
+# playwright report files
+__assets__ 

.yarnrc.yml

@@ -2,7 +2,7 @@ checksumBehavior: update
 
 compressionLevel: mixed
 
-defaultSemverRangePrefix: ''
+defaultSemverRangePrefix: ""
 
 enableGlobalCache: false
 
@@ -13,13 +13,13 @@ nodeLinker: node-modules
 npmAuditExcludePackages: []
 
 npmAuditIgnoreAdvisories:
-  - 1112686 # https://github.com/advisories/GHSA-p5wg-g6qr-c7cg
+  - 1112686
 
 plugins:
   - checksum: 5e73a1acbb9741fce1e8335e243c9480ea2107b9b4b65ed7643785ddea9e3019aee254a92a853b1cd71023b16fff5b7d3afd5256fe57cd35a54f8785b8c30281
     path: .yarn/plugins/@yarnpkg/plugin-outdated.cjs
-    spec: 'https://go.mskelton.dev/yarn-outdated/v4'
+    spec: "https://go.mskelton.dev/yarn-outdated/v4"
 
-progressBarStyle: 'patrick' # https://yarnpkg.com/configuration/yarnrc#progressBarStyle
+progressBarStyle: patrick
 
-yarnPath: .yarn/releases/yarn-4.9.4.cjs
+yarnPath: .yarn/releases/yarn-4.13.0.cjs

package.json

@@ -63,12 +63,12 @@
     "test:puppeteer": "jest --ci --colors --verbose ./puppeteer",
     "test:puppeteer:local": "PUPPETEER_APP_ENV=local yarn test:puppeteer",
     "test:unit": "test -z $CI && yarn test:unit:local || yarn test:unit:ci",
-    "test:unit:local": "NODE_OPTIONS=--experimental-vm-modules jest --colors --shard=1/1 --testPathIgnorePatterns=\"src/integration/pages\" \"scripts/bundleSize\" \"puppeteer\" \"ws-nextjs-app\"",
+    "test:unit:local": "NODE_OPTIONS=--experimental-vm-modules jest --colors --shard=1/1 --testPathIgnorePatterns=\"src/integration/pages\" \"scripts/bundleSize\" \"puppeteer\" \"ws-nextjs-app\" \"playwright\"",
     "test:unit:ci": "yarn test:unit:local --ci",
     "test:unit:scripts": "jest --colors --testPathPatterns=\"scripts/bundleSize/\"",
     "test:unit:onetest": "test -z && NODE_OPTIONS=--experimental-vm-modules jest --colors --testPathPatterns=\"src/server/\" || NODE_OPTIONS=--experimental-vm-modules jest --ci --runInBand --colors --testPathPatterns=\"src/server/\"",
     "test:unit:watch": "yarn test:unit -- --watch",
-    "test:unit:updatesnapshots": "NODE_OPTIONS=--experimental-vm-modules jest --updateSnapshot --silent=false --colors --testPathIgnorePatterns=\"src/integration/pages\" \"scripts/bundleSize\" \"puppeteer\" \"ws-nextjs-app\"",
+    "test:unit:updatesnapshots": "NODE_OPTIONS=--experimental-vm-modules jest --updateSnapshot --silent=false --colors --testPathIgnorePatterns=\"src/integration/pages\" \"scripts/bundleSize\" \"puppeteer\" \"ws-nextjs-app\" \"playwright\"",
     "test:integration": "NODE_OPTIONS=\"--no-experimental-strip-types --experimental-vm-modules\" node src/integration/utils/runTests/index.js",
     "test:integration:updatesnapshots": "run-p test:integration:express:updatesnapshots test:integration:nextjs:updatesnapshots",
     "test:integration:express:updatesnapshots": "NODE_OPTIONS=\"--no-experimental-strip-types --experimental-vm-modules\" node src/integration/utils/runTests/index.js  --updateSnapshot",
@@ -269,5 +269,5 @@
       "cloud-init"
     ]
   },
-  "packageManager": "yarn@4.9.4"
+  "packageManager": "yarn@4.13.0"
 }

tsconfig.json

@@ -43,5 +43,5 @@
     }
   },
   "include": ["src/**/*", "src/app/legacy/**/*.ts*"],
-  "exclude": ["node_modules", "build"]
+  "exclude": ["node_modules", "build", "ws-nextjs-app/playwright/**/*.ts"]
 }

ws-nextjs-app/jest.config.ts

@@ -15,6 +15,7 @@ const buildConfig = async (config: Config): Promise<Config> => {
       ...(config.testPathIgnorePatterns || []),
       'build',
       'node_modules',
+      'playwright',
     ],
   })();
 };

ws-nextjs-app/package.json

@@ -25,12 +25,14 @@
     "cypress": "cypress run --browser chrome",
     "cypress:interactive": "cypress open --browser chrome",
     "test:e2e": "yarn stop && yarn build && run-p --race start cypress -- --e2e",
-    "test:e2e:interactive": "yarn stop && yarn build && run-p --race start cypress:interactive -- --e2e"
-  },
+    "test:e2e:interactive": "yarn stop && yarn build && run-p --race start cypress:interactive -- --e2e",
+    "test:e2e:playwright": "npx playwright test --project=\"WorldService - Chrome\""},
   "devDependencies": {
+    "@bbc/unified-web-e2e-framework": "github:bbc/unified-web-e2e-framework#v4.0.0",
     "@cypress/webpack-preprocessor": "7.0.1",
     "@jest/environment": "30.2.0",
     "@jest/types": "30.2.0",
+    "@playwright/test": "1.59.1",
     "@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,8 @@
+import { config } from '@bbc/unified-web-e2e-framework';
+
+config.testDir = 'playwright/specs';
+if (config.use) {
+  config.use.baseURL = 'https://www.bbc.com';
+}
+
+export default config;

ws-nextjs-app/playwright/.eslintrc

@@ -0,0 +1,7 @@
+{
+  "rules": {
+    // these rules seem to be used as the common pattern for looping elements in playwright
+    "no-restricted-syntax": ["off", "ForOfStatement"],
+    "no-await-in-loop": "off",
+  },
+}

ws-nextjs-app/playwright/README.md

@@ -0,0 +1,4 @@
+# Playwright
+
+To run the Playwright tests for the World Service Chrome project, change to the `ws-nextjs-app` directory and use the package script:
+`cd ws-nextjs-app && yarn test:e2e:playwright --project="WorldService - Chrome"`

ws-nextjs-app/playwright/specs/homePage.spec.ts

@@ -0,0 +1,85 @@
+import SERVICES from '#app/lib/config/services';
+import { test } from '@bbc/unified-web-e2e-framework';
+import { expect } from '@playwright/test';
+
+const SERVICES_PATTERN = SERVICES.join('|');
+
+const VALID_HREF_REGEX = new RegExp(
+  `^https://www\\.bbc\\.com/(?:${SERVICES_PATTERN}|usingthebbc/[^/]+(?:/.*)?|programmes/[a-z0-9]{8,15})(?:/.*)?$`,
+);
+
+const testSuites = [
+  {
+    path: '/arabic',
+    service: 'arabic',
+  },
+  {
+    path: '/dari',
+    service: 'dari',
+  },
+  {
+    path: '/kyrgyz',
+    service: 'kyrgyz',
+  },
+  {
+    path: '/magyarul',
+    service: 'magyarul',
+    expectedPath: '/magyarul/articles/cwywderkzy2o',
+  },
+  {
+    path: '/polska',
+    service: 'polska',
+  },
+  {
+    path: '/portuguese',
+    service: 'portuguese',
+  },
+  {
+    path: '/romania',
+    service: 'romania',
+    expectedPath: '/romania/articles/c993yged1xno',
+  },
+  {
+    path: '/serbian/lat',
+    service: 'serbian',
+    variant: 'lat',
+  },
+  {
+    path: '/serbian/cyr',
+    service: 'serbian',
+    variant: 'cyr',
+  },
+  {
+    path: '/uzbek/lat',
+    service: 'uzbek',
+    variant: 'lat',
+  },
+  {
+    path: '/uzbek/cyr',
+    service: 'uzbek',
+    variant: 'cyr',
+  },
+];
+
+testSuites.forEach(suite => {
+  test.describe(`Home Page - ${suite.service}${suite.variant ?? ''}`, () => {
+    test('all links within <main> element should be a valid World Service URL', async ({
+      page,
+    }) => {
+      const expectedPath = suite.expectedPath || suite.path;
+
+      await page.goto(suite.path);
+      await expect(page).toHaveURL(expectedPath);
+
+      const pageLinks = await page
+        .locator('main a[href^="https://www.bbc.com"]')
+        .all();
+
+      for (const link of pageLinks) {
+        const href = await link.getAttribute('href');
+        expect(href).not.toBeNull();
+        expect(href).toMatch(VALID_HREF_REGEX);
+      }
+    });
+  });
+});