WS-2281 Migrate a Few Homepage E2E Tests from Cypress to Playwright and Integrate with CI by MeriemMechri · Pull Request #13670 · bbc/simorgh

MeriemMechri · 2026-02-02T22:01:44Z

Resolves JIRA: WS-2015

Summary

Add Playwright + unified E2E framework dependencies and initial Home Page Playwright spec/helpers.
Introduce a dedicated Playwright GitHub Actions workflow and adjust existing workflows’ install step to authenticate GitHub dependency fetches.
Bump Yarn version/config and update Jest/TS configs to avoid picking up Playwright files in unit test runs.

Code changes

I got into several issues in this upgrade since this project uses yarn, unlike other internal projects that use npm, evenutally - after a LOT of failed attempts - I had to:

I had to bump yarn version from 4.0.9 to 4.13.0 because of this error - the fix for it is to upgrade to >=4.12
To be able to run yarn on CI for a private repo, I did this solution .. I tried setting up npmAuth for yarn but didn't work.

Testing

List the steps required to test this PR.

Useful Links

Coding Standards
Repository use guidelines
Add Links to useful resources related to this PR if applicable.

…right-sample-tests

Copilot

Pull request overview

Migrates the Next.js Home Page E2E coverage from Cypress patterns toward Playwright using the BBC unified web E2E framework, alongside Yarn/CI adjustments to support installing a private GitHub dependency in CI.

Changes:

Add Playwright + unified E2E framework dependencies and initial Home Page Playwright spec/helpers.
Introduce a dedicated Playwright GitHub Actions workflow and adjust existing workflows’ install step to authenticate GitHub dependency fetches.
Bump Yarn version/config and update Jest/TS configs to avoid picking up Playwright files in unit test runs.

Reviewed changes

Copilot reviewed 15 out of 37 changed files in this pull request and generated 17 comments.

Show a summary per file

File	Description
yarn.lock	Adds Playwright + unified E2E framework (and related transitive deps) to the lockfile.
ws-nextjs-app/package.json	Adds `@playwright/test` and `@bbc/unified-web-e2e-framework` to the Next.js app.
ws-nextjs-app/playwright.config.ts	Wires unified framework config to point at `playwright/specs`.
ws-nextjs-app/playwright/specs/homePage.spec.ts	Adds initial Playwright Home Page smoke spec.
ws-nextjs-app/playwright/support/helpers/runUrlValidationTest.ts	Adds a Playwright URL validation helper mirroring existing Cypress coverage.
ws-nextjs-app/playwright/support/runtTestForPage.playwright.ts	Adds a Playwright analogue of the Cypress `runTestsForPage` harness.
ws-nextjs-app/playwright/README.md	Adds minimal Playwright run instructions.
ws-nextjs-app/playwright/.eslintrc	Adds Playwright-folder ESLint overrides.
ws-nextjs-app/jest.config.ts	Ignores the `playwright` directory for Jest runs in ws-nextjs-app.
tsconfig.json	Excludes ws-nextjs-app Playwright TS files from the root TS project.
package.json	Updates unit-test scripts’ ignore patterns and bumps Yarn packageManager version.
.yarnrc.yml	Updates Yarn config formatting and `yarnPath` to Yarn 4.13.0.
.gitignore	Adds an ignore entry intended for Playwright report assets.
.github/workflows/simorgh-unit-tests.yml	Updates install step to support private GitHub dependency fetch.
.github/workflows/simorgh-misc-checks.yml	Updates install step to support private GitHub dependency fetch.
.github/workflows/simorgh-local-server-tests.yml	Updates install step to support private GitHub dependency fetch.
.github/workflows/simorgh-integration-tests.yml	Updates install step to support private GitHub dependency fetch.
.github/workflows/simorgh-e2e-playwright.yml	Adds a dedicated Playwright workflow to run E2E checks and upload reports.
.yarn/cache/fsevents-patch-6b67494872-10.zip	Adds Yarn offline cache artifact for fsevents patch.
.yarn/cache/fsevents-patch-19706e7e35-10.zip	Adds Yarn offline cache artifact for fsevents patch (variant).
.yarn/cache/fsevents-npm-2.3.2-a881d6ac9f-6b5b6f5692.zip	Adds Yarn offline cache artifact for fsevents 2.3.2.
.yarn/cache/@playwright-test-npm-1.59.1-8a59644a90-27a894c4d4.zip	Adds Yarn offline cache artifact for `@playwright/test`.
.yarn/cache/@unrs-resolver-binding-linux-x64-gnu-npm-1.11.0-f4a171e974-10.zip	Adds Yarn offline cache artifact (platform binding).
.yarn/cache/@img-sharp-linux-x64-npm-0.34.5-06b002e5f6-10.zip	Adds Yarn offline cache artifact (sharp binary).
.yarn/cache/@img-sharp-libvips-linux-x64-npm-1.2.4-105fd6d44d-10.zip	Adds Yarn offline cache artifact (libvips).
.yarn/cache/@esbuild-linux-x64-npm-0.27.2-11f1a3d9db-10.zip	Adds Yarn offline cache artifact (esbuild binary).

ws-nextjs-app/playwright/.eslintrc

ws-nextjs-app/playwright/support/runTestForPage.playwright.ts

ws-nextjs-app/playwright/support/helpers/runUrlValidationTest.ts

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

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

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

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

…right-sample-tests

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

…right-sample-tests

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

ws-nextjs-app/playwright.config.ts

ws-nextjs-app/playwright/support/helpers/runUrlValidationTest.ts

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

ws-nextjs-app/playwright/support/runTestForPage.playwright.ts

…right-sample-tests

Copilot

Pull request overview

Copilot reviewed 14 out of 25 changed files in this pull request and generated 12 comments.

Copilot · 2026-04-13T07:02:20Z

ws-nextjs-app/playwright/.eslintrc

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


This .eslintrc file is likely to fail parsing: it’s extensionless (YAML/JSON legacy format), but it contains // comments and trailing commas (e.g. after "no-await-in-loop": "off"). Consider switching to a .eslintrc.js (or valid YAML/JSON without trailing commas) and set the rule values using ESLint’s expected shapes (e.g. no-restricted-syntax: "off").

Suggested change

// these rules seem to be used as the common pattern for looping elemnts in playwright

"no-restricted-syntax": ["off", "ForOfStatement"],

"no-await-in-loop": "off",

},

"no-restricted-syntax": "off",

"no-await-in-loop": "off"

}

ws-nextjs-app/playwright/.eslintrc

ws-nextjs-app/playwright/support/runTestForPage.playwright.ts

Copilot · 2026-04-13T07:02:20Z

ws-nextjs-app/playwright/support/runTestForPage.playwright.ts

+        base.beforeAll(async ({ page }) => {
+          for (const fn of beforeAll) fn();
+          await page.goto(path, { waitUntil: 'domcontentloaded' });
+        });
+
+        base.beforeEach(async () => {
+          for (const fn of beforeEachFns) fn();
+          // Add any Playwright-specific setup here
+        });


The beforeAll / beforeEachFns hooks are invoked without await, and they’re typed as synchronous () => void. If any of these setup functions need to be async (common for Playwright), the current implementation will race. Consider allowing () => void | Promise<void> and awaiting each function inside the Playwright hooks.

ws-nextjs-app/playwright/support/runTestForPage.playwright.ts

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

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

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

ws-nextjs-app/playwright/README.md

…right-sample-tests

MeriemMechri · 2026-04-14T08:15:56Z

@alex-magana , @andrewscfc I am ignoring the copilot comments about runTestsForPage - this file is based on the Cypress helpers we had to make the migration from Cypress to PlayWright easier, and is likely going to change a lot once the actual migration starts. The scope of this PR was mainly to get PlayWright and the unified testing framework running locally and on CI.

…right-sample-tests

package.json

remove unused helper for now, and add command to package

…right-sample-tests

Copilot

Pull request overview

Copilot reviewed 13 out of 24 changed files in this pull request and generated 6 comments.

Comments suppressed due to low confidence (1)

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

This workflow now relies on repo secrets (WS_UTF_*) during pull_request runs. For PRs from forks, GitHub Actions does not provide secrets, so yarn install will fail when it tries to fetch the private GitHub dependency. Consider gating the job (or at least the secret-dependent install snippet) to same-repo PRs, similar to how other steps already check github.event.pull_request.head.repo.full_name.

      - 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: Build Simorgh - Express App
        run: yarn build

      - name: Build Simorgh - Next.JS App
        working-directory: ./ws-nextjs-app

ws-nextjs-app/playwright/README.md

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

Copilot · 2026-04-14T16:02:19Z

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

      - 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


This workflow now relies on repo secrets (WS_UTF_*) during pull_request runs. For PRs from forks, GitHub Actions does not provide secrets, so yarn install will fail when it tries to fetch the private GitHub dependency. Consider gating the job (or the secret-dependent install snippet) to same-repo PRs to avoid failing forked PRs unexpectedly.

Copilot · 2026-04-14T16:02:19Z

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

      - 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


This workflow now relies on repo secrets (WS_UTF_*) during pull_request runs. For PRs from forks, GitHub Actions does not provide secrets, so yarn install will fail when it tries to fetch the private GitHub dependency. Consider gating the job (or the secret-dependent install snippet) to same-repo PRs to avoid failing forked PRs unexpectedly.

Copilot · 2026-04-14T16:02:19Z

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

      - 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


This workflow now relies on repo secrets (WS_UTF_*) during pull_request runs. For PRs from forks, GitHub Actions does not provide secrets, so yarn install will fail when it tries to fetch the private GitHub dependency. Consider gating the job (or the secret-dependent install snippet) to same-repo PRs to avoid failing forked PRs unexpectedly.

ws-nextjs-app/package.json

…right-sample-tests

MeriemMechri added 9 commits February 2, 2026 21:59

test(playwright):start migration with homePage

30ff686

test(playwright):add helpers files

9fb58ff

Merge branch 'latest' of https://github.com/bbc/simorgh into ws-playw…

1fd6733

…right-sample-tests

Merge branch 'latest' of https://github.com/bbc/simorgh into ws-playw…

78179d7

…right-sample-tests

Merge branch 'latest' of https://github.com/bbc/simorgh into ws-playw…

e7b5da6

…right-sample-tests

Merge branch 'latest' of https://github.com/bbc/simorgh into ws-playw…

d874188

…right-sample-tests

Merge branch 'latest' of https://github.com/bbc/simorgh into ws-playw…

935f8e6

…right-sample-tests

Merge branch 'latest' of https://github.com/bbc/simorgh into ws-playw…

6acc7dd

…right-sample-tests

test: print user info in GH action

3a08945

MeriemMechri force-pushed the ws-playwright-sample-tests branch 2 times, most recently from f0b411a to 3a08945 Compare March 24, 2026 11:55

MeriemMechri added 6 commits March 24, 2026 11:58

Merge branch 'latest' into ws-playwright-sample-tests

66510d1

test WS_UTF_AUTH token

40da1ab

test

98daebe

test

eae14d7

test:add curl command

5ead5fa

chore: test token for cloning

33797a2

MeriemMechri force-pushed the ws-playwright-sample-tests branch 3 times, most recently from 510d0f8 to 100939e Compare March 24, 2026 14:37

chore: test token for cloning

c1e217f

MeriemMechri force-pushed the ws-playwright-sample-tests branch from 100939e to c1e217f Compare March 24, 2026 14:47

chore: use yarn 4.12

e23b582

MeriemMechri force-pushed the ws-playwright-sample-tests branch 7 times, most recently from 5050a62 to d7e7319 Compare March 24, 2026 15:19

Copilot AI reviewed Apr 7, 2026

View reviewed changes

MeriemMechri added 3 commits April 8, 2026 08:38

Merge branch 'latest' of https://github.com/bbc/simorgh into ws-playw…

3fa8bd6

…right-sample-tests

Merge branch 'latest' of https://github.com/bbc/simorgh into ws-playw…

e1a7565

…right-sample-tests

Merge branch 'latest' of https://github.com/bbc/simorgh into ws-playw…

e4da992

…right-sample-tests

pvaliani reviewed Apr 9, 2026

View reviewed changes

.github/workflows/simorgh-misc-checks.yml Outdated Show resolved Hide resolved

pvaliani approved these changes Apr 9, 2026

View reviewed changes

MeriemMechri added 5 commits April 9, 2026 12:34

Merge branch 'latest' of https://github.com/bbc/simorgh into ws-playw…

be08253

…right-sample-tests

refactor: fix typos in github actions

ed50721

refactor: update path for playwright report

f80cbc5

Merge branch 'latest' of https://github.com/bbc/simorgh into ws-playw…

c542fcf

…right-sample-tests

Merge branch 'latest' of https://github.com/bbc/simorgh into ws-playw…

382d635

…right-sample-tests

alex-magana reviewed Apr 9, 2026

View reviewed changes

ws-nextjs-app/playwright/specs/homePage.spec.ts Outdated Show resolved Hide resolved

alex-magana reviewed Apr 9, 2026

View reviewed changes

ws-nextjs-app/playwright.config.ts Show resolved Hide resolved

alex-magana reviewed Apr 9, 2026

View reviewed changes

ws-nextjs-app/playwright/support/helpers/runUrlValidationTest.ts Outdated Show resolved Hide resolved

andrewscfc reviewed Apr 9, 2026

View reviewed changes

ws-nextjs-app/playwright/specs/homePage.spec.ts Outdated Show resolved Hide resolved

ws-nextjs-app/playwright/support/runTestForPage.playwright.ts Outdated Show resolved Hide resolved

MeriemMechri added 2 commits April 10, 2026 16:38

Merge branch 'latest' of https://github.com/bbc/simorgh into ws-playw…

28841b7

…right-sample-tests

refactor: per comments review

2d30a86

Copilot AI reviewed Apr 13, 2026

View reviewed changes

MeriemMechri added 2 commits April 13, 2026 11:11

Merge branch 'latest' of https://github.com/bbc/simorgh into ws-playw…

c4a89cb

…right-sample-tests

refactor: remove unused code

0ba9d12

MeriemMechri added 2 commits April 14, 2026 10:14

Merge branch 'latest' of https://github.com/bbc/simorgh into ws-playw…

5b01e60

…right-sample-tests

Merge branch 'latest' of https://github.com/bbc/simorgh into ws-playw…

537c87e

…right-sample-tests

alex-magana reviewed Apr 14, 2026

View reviewed changes

package.json Show resolved Hide resolved

MeriemMechri added 3 commits April 14, 2026 13:42

refactor: code review comments

b13c636

remove unused helper for now, and add command to package

Merge branch 'latest' of https://github.com/bbc/simorgh into ws-playw…

f78ef41

…right-sample-tests

Merge branch 'latest' of https://github.com/bbc/simorgh into ws-playw…

d171ebc

…right-sample-tests

Copilot AI reviewed Apr 14, 2026

View reviewed changes

MeriemMechri added 2 commits April 14, 2026 17:20

Merge branch 'latest' of https://github.com/bbc/simorgh into ws-playw…

9040a06

…right-sample-tests

refactor: copilot code review comments

11fb587

Conversation

MeriemMechri commented Feb 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Code changes

Testing

Useful Links

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Apr 13, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI Apr 13, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

MeriemMechri commented Apr 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

MeriemMechri commented Feb 2, 2026 •

edited

Loading

MeriemMechri commented Apr 14, 2026 •

edited

Loading