test: playwright cucumber setup by KrupaPammi · Pull Request #454 · comicrelief/giftaid-react

KrupaPammi · 2026-04-29T16:51:18Z

This PR migrates both the playwright-local and playwright-staging test suites from the Playwright Test runner to a Cucumber + Playwright framework using Gherkin feature files and reusable step definitions.

As part of the migration, the existing Playwright tests were first refactored and cleaned up before converting them into Cucumber scenarios.

…s every test run

AndyEPhipps · 2026-05-07T14:37:45Z

The Netlify URL pattern always seems to be

https://deploy-preview-**THE-PR-NUMBER**--giftaid-react.netlify.app/
so we might be able to easily suss out a way to pass that as an env var of sorts to give you a test env URL?

curlyfriesplease · 2026-05-26T12:54:17Z

+    await this.page.locator(selectors.marketingPreferences.fields.email).type(email);
+    await this.page.locator(selectors.marketingPreferences.options.phone).click();
+    await this.page.locator(selectors.marketingPreferences.fields.phone).type(phone, { delay: 200 });
+    await this.page.locator(selectors.formFields.mobile).click();


should this be selecting the text option? Comparing against the staging one, I think it might mean to be

Thanks, fixed it

curlyfriesplease · 2026-05-26T13:45:43Z

Does Cucumber offer us videos and trace reports like Playwright does? I would hate to lose those, they're very handy

curlyfriesplease · 2026-05-26T13:57:47Z

@@ -0,0 +1,11 @@
+@sanity @valid-submission


Small amendment to filename - missing a letter T

KrupaPammi · 2026-06-04T10:54:40Z

@seb-cr @curlyfriesplease, I've commented on the questions and made the changes. This is ready for re-review.

…enarios

curlyfriesplease · 2026-06-05T08:50:37Z

@@ -43,12 +43,14 @@ jobs:
          FORCE_COLOR: 1

      # Test run video was always captured, so this action uses "always()" condition


Best to amend this code comment as it's out of date now that always() is dropped

curlyfriesplease · 2026-06-05T08:52:47Z

-          path: playwright-local/test-results/videos/
+          name: playwright-failure-artifacts-mobile
+          path: |
+            playwright-local/test-results/failed-videos/


Have you seen this work, and save results? Just visually comparing to how we do it in CRCom and there we specify the filetypes, like /**/*.webm for the videos and /**/*.zip for the traces

Videos and the traces seem to be working now
https://github.com/comicrelief/giftaid-react/actions/runs/27022175929/job/79752714564?pr=454
https://github.com/comicrelief/giftaid-react/actions/runs/27022175929/job/79752714722?pr=454

curlyfriesplease · 2026-06-05T09:17:48Z

+  if (process.env.CI && videoPath) {
+    if (isFailed) {
+      const failedVideosDir = 'test-results/failed-videos';
+      fs.mkdirSync(failedVideosDir, { recursive: true });


Do we also need to mkdirSync/copyFileSync the traces folder too?

I added mkdirSync for the traces directory as well. We don't need a copyFileSync for traces, as Playwright saves the trace zip directly to the path we provide in tracing.stop(), whereas videos are initially saved to the Playwright video directory and then copied into the failed-videos folder.

curlyfriesplease · 2026-06-05T09:19:20Z

    "@comicrelief/data-models": "^1.29.6",
    "@comicrelief/test-utils": "^1.5.15",
+    "@cucumber/cucumber": "8.9.1",
    "@playwright/test": "1.56.1",


Although the lines haven't been changed in this PR, I've noticed that the version of playwright/test is different in the two package.jsons (1.38.1 and 1.56.1). Do you think we should align them?

I did look at aligning them, but playwright-local currently uses the root package.json, which is still tied to Node 16. When I tried upgrading Playwright there to match staging, the newer Playwright version wasn't supported by the Node version we're using.

playwright-staging has its own separate package.json, so it can use Playwright 1.56.1 without affecting the rest of the project. For now I've left playwright-local on 1.38.1 to avoid introducing wider dependency changes, but once we update the Node version, we can then align the Playwright versions.

curlyfriesplease · 2026-06-05T09:35:18Z

+// When steps
+When('I enter the local mobile number {string}', async function (mobile) {
+  await this.page.locator(selectors.formFields.mobile).fill('');
+  await this.page.locator(selectors.formFields.mobile).fill(mobile, { delay: 100 });


Just had a quick look at the documentation for some of the playwright functions, I don't think it will accept delay, doesn't seem to be on the list. timeout is there though that's not quite what we want. Looks like delay is an option for press()
https://playwright.dev/docs/api/class-locator#locator-fill

Thanks, looks like I missed removing the delay when it was updated from type() to fill(). The delay option isn't supported on fill(), so I'll remove it unless we specifically need character-by-character typing for this field

KrupaPammi · 2026-06-05T16:15:08Z

Thanks for the review @curlyfriesplease, have pushed all the requsted changes

curlyfriesplease

Lovely!

test: centralise locators and refactor tests

dc6d400

KrupaPammi marked this pull request as draft April 29, 2026 16:52

KrupaPammi self-assigned this Apr 29, 2026

KrupaPammi added 6 commits April 29, 2026 18:02

test: add test that's been removed

e9062b1

test: write first test in cucumber

6a524f7

test: convert submit dir tests into Gherkin and add step definitions

5bb625d

test: convert /update tests into Gherkin and add step-definitions

4004a8a

test: Add comments in cucumber config

d2b564d

test: disable local playwright reports and test-results that generate…

6c97779

…s every test run

KrupaPammi added 20 commits May 8, 2026 16:41

test: move shard redirect step into comon step-definitions

fd17063

test: setup and convert playwright-local tests into cucumber

f195111

ci: Add retry and parallel options in the config

ae0d8a7

ci: update playwright run with cucumber script

69e5750

test: Add mobile safari config and parallel scripts

65a24df

test: fix marketing prefs step by adding scrollingintoview

9c22095

test: few tweaks

3edd445

test: fix failing staging tests locally

dd18155

test: resolve ambiguous steps

a7e3b1b

test: fix campaign code from RND26 to SR26

f0a2b5c

test: remove nightly-sanity tag

4769a96

use consistent kebab casing

bbb00de

config: add playwright equivalent timeouts in cucumber config

06a398a

move browserstack capabilities into cucumber config

051336b

keep the test script as before

b3125f6

test: add default navigation timeout

1968a49

downgrade cucumber version to 8.9.1 to support node 16

7637a84

test: move resuable steps into giftaid common

01353cc

test: delete giftaid submission steps file as it's moved to common

db2969f

test: update transsource value to SR26_GiftAid

b545fc7

curlyfriesplease reviewed May 26, 2026

View reviewed changes

KrupaPammi added 6 commits May 27, 2026 13:56

test: reorder and group Given, When, thens in step def files

5ac4344

test: add cucumber config typing for IntelliSense purpose

55722f2

test: fix local MP helper method to select Text/SMS option

8e14b6d

test: use fill instead of type

605803d

test: add missing letter T in the file name

636ea8b

test: increase timeout for the thank you message to appear

0a7a4ab

KrupaPammi added 2 commits June 4, 2026 12:15

test: test: enable Playwright video recording in CI for Cucumber tests

547c5db

test: add Playwright video and trace artifacts for failed Cucumber sc…

4269040

…enarios

curlyfriesplease reviewed Jun 5, 2026

View reviewed changes

KrupaPammi added 8 commits June 5, 2026 14:27

test: update playwright artifacts comment

ae391bd

ci: change artifacts path from directory paths

e40fbc0

ci: save failed videos after browser context closes

68b3831

ci: save chromuim failed videos after browser context closes

5c6b7c6

ci: debug Playwright artifact upload step

29c040b

ci: move the debug steop

fc2f684

clean up debug steps for artifacts

dab8db0

test: remove unspported delay option from fill()

a8f81f6

curlyfriesplease approved these changes Jun 5, 2026

View reviewed changes

KrupaPammi changed the title ~~test: playwright cucumber POC~~ test: playwright cucumber setup Jun 8, 2026

KrupaPammi merged commit 9fa04f7 into master Jun 8, 2026
7 checks passed

KrupaPammi deleted the test/eng-5100-playwright-cucumber branch June 8, 2026 09:53

		@@ -43,12 +43,14 @@ jobs:
		FORCE_COLOR: 1

		# Test run video was always captured, so this action uses "always()" condition

Conversation

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

Uh oh!

Uh oh!

AndyEPhipps commented May 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

curlyfriesplease commented May 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

KrupaPammi commented Jun 4, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

KrupaPammi commented Jun 5, 2026

Uh oh!

curlyfriesplease left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

KrupaPammi commented Apr 29, 2026 •

edited

Loading

AndyEPhipps commented May 7, 2026 •

edited

Loading

curlyfriesplease commented May 26, 2026 •

edited

Loading