test: write first test in cucumber

KrupaPammi · KrupaPammi · commit 6a524f73ea98 · 2026-04-30T15:57:45.000+01:00
diff --git a/playwright-staging/browserstack.js b/playwright-staging/browserstack.js
@@ -1,7 +1,7 @@
 require('dotenv').config();
 
 const base = require('@playwright/test');
-const clientPlaywrightVersion = require('@playwright/test/package.json').version; // "1.50.0"
+const clientPlaywrightVersion = require('@playwright/test/package.json').version; // "1.56.1"
 
 // BrowserStack Specific Capabilities.
 const caps = {
diff --git a/playwright-staging/config/cucumber.js b/playwright-staging/config/cucumber.js
@@ -0,0 +1,13 @@
+module.exports = {
+  default: {
+    paths: ['tests/features/**/*.feature'],
+    require: [
+      'tests/support/**/*.js',
+      'tests/step-definitions/**/*.js',
+    ],
+    format: ['progress', 'summary'],
+    // Use 'pretty' locally for readable step-by-step output.
+    // On CI keep the output minimal to avoid noisy logs.
+    publishQuiet: true,
+  },
+};
diff --git a/playwright-staging/package.json b/playwright-staging/package.json
@@ -8,6 +8,7 @@
   "devDependencies": {
     "@comicrelief/data-models": "^1.29.6",
     "@comicrelief/test-utils": "^1.5.15",
+    "@cucumber/cucumber": "^12.8.2",
     "@playwright/test": "1.56.1",
     "axios": "^0.21.1",
     "chance": "^1.1.7",
@@ -16,6 +17,8 @@
     "uuid": "8.3.2"
   },
   "scripts": {
-    "test:sanity": "FORCE_COLOR=1 playwright test --grep '@sanity'"
+    "test:sanity": "FORCE_COLOR=1 playwright test --grep '@sanity'",
+    "test:cucumber": "FORCE_COLOR=1 cucumber-js --config config/cucumber.js",
+    "test:cucumber:sanity": "FORCE_COLOR=1 cucumber-js --config config/cucumber.js --tags '@sanity'"
   }
 }
diff --git a/playwright-staging/tests/features/submit/addressValidation.spec.js b/playwright-staging/tests/features/submit/addressValidation.spec.js
@@ -1,7 +1,7 @@
 // @ts-check
 const { expect } = require('@playwright/test');
-const { test } = require('../../browserstack');
-const { selectors } = require('../utils/locators');
+const { test } = require('../../../browserstack');
+const { selectors } = require('../../utils/locators');
 
 test.describe('Address validation @sanity @nightly-sanity', () => {
 
diff --git a/playwright-staging/tests/features/submit/formValidation.spec.js b/playwright-staging/tests/features/submit/formValidation.spec.js
@@ -1,8 +1,8 @@
 // @ts-check
 const { expect } = require('@playwright/test');
-const { test } = require('../../browserstack');
-const { Commands } = require('../utils/commands');
-const { selectors } = require('../utils/locators');
+const { test } = require('../../../browserstack');
+const { Commands } = require('../../utils/commands');
+const { selectors } = require('../../utils/locators');
 
 test.describe('Form validation @sanity @nightly-sanity', () => {
   
diff --git a/playwright-staging/tests/features/submit/internationalAddressesValidation.spec.js b/playwright-staging/tests/features/submit/internationalAddressesValidation.spec.js
@@ -1,8 +1,8 @@
 // @ts-check
 const { expect } = require('@playwright/test');
-const { test } = require('../../browserstack');
-const { Commands } = require('../utils/commands');
-const { selectors } = require('../utils/locators');
+const { test } = require('../../../browserstack');
+const { Commands } = require('../../utils/commands');
+const { selectors } = require('../../utils/locators');
 
 test.describe('International addresses validation @sanity @nightly-sanity', () => {
   test('selecting a non-UK country and entering a non-UK postcode should submit the form', async ({ page }) => {
diff --git a/playwright-staging/tests/features/submit/marketingPreferencesData.spec.js b/playwright-staging/tests/features/submit/marketingPreferencesData.spec.js
@@ -1,9 +1,9 @@
 // @ts-check
 const { expect } = require('@playwright/test');
-const { test } = require('../../browserstack');
-const { Commands } = require('../utils/commands');
-const { MarketingPrefsVerify } = require('../utils/marketingPrefsVerify');
-const { selectors } = require('../utils/locators');
+const { test } = require('../../../browserstack');
+const { Commands } = require('../../utils/commands');
+const { MarketingPrefsVerify } = require('../../utils/marketingPrefsVerify');
+const { selectors } = require('../../utils/locators');
 
 const Chance = require('chance');
 const chance = new Chance();
diff --git a/playwright-staging/tests/features/submit/marketingPreferencesValidation.spec.js b/playwright-staging/tests/features/submit/marketingPreferencesValidation.spec.js
@@ -1,8 +1,8 @@
 // @ts-check
 const { expect } = require('@playwright/test');
-const { test } = require('../../browserstack');
-const { Commands } = require('../utils/commands');
-const { selectors } = require('../utils/locators');
+const { test } = require('../../../browserstack');
+const { Commands } = require('../../utils/commands');
+const { selectors } = require('../../utils/locators');
 
 const Chance = require('chance');
 const chance = new Chance();
diff --git a/playwright-staging/tests/features/submit/postcodeLookup.spec.js b/playwright-staging/tests/features/submit/postcodeLookup.spec.js
@@ -1,7 +1,7 @@
 // @ts-check
 const { expect } = require('@playwright/test');
-const { test } = require('../../browserstack');
-const { selectors } = require('../utils/locators');
+const { test } = require('../../../browserstack');
+const { selectors } = require('../../utils/locators');
 
 test.describe('Postcode validation @sanity @nightly-sanity', () => {
   
diff --git a/playwright-staging/tests/features/submit/sorry.spec.js b/playwright-staging/tests/features/submit/sorry.spec.js
@@ -1,7 +1,7 @@
 // @ts-check
 const { expect } = require('@playwright/test');
-const { test } = require('../../browserstack');
-const { selectors } = require('../utils/locators');
+const { test } = require('../../../browserstack');
+const { selectors } = require('../../utils/locators');
 
 test('Accessing giftaid sorry page should show the sorry message @sanity @nightly-sanity', async ({ page }) => {
   // Go directly to the "sorry" page appended to the base URL
diff --git a/playwright-staging/tests/features/submit/successRedirect.spec.js b/playwright-staging/tests/features/submit/successRedirect.spec.js
@@ -1,7 +1,7 @@
 // @ts-check
 const { expect } = require('@playwright/test');
-const { test } = require('../../browserstack');
-const { selectors } = require('../utils/locators');
+const { test } = require('../../../browserstack');
+const { selectors } = require('../../utils/locators');
 
 test('Accessing success page should redirect to giftaid homepage @sanity @nightly-sanity', async ({ page }) => {
   // Navigate directly to the success page and expect a redirect
diff --git a/playwright-staging/tests/features/submit/validFormSubmission.feature b/playwright-staging/tests/features/submit/validFormSubmission.feature
@@ -0,0 +1,11 @@
+@sanity @nightly-sanity
+Feature: Giftaid submission
+
+  Scenario: Submit Giftaid form with valid details
+    Given I am on the Giftaid page
+    When I select Giftaid
+    And I complete the Giftaid form with valid details
+    And I select marketing preferences
+    And I submit the Giftaid form
+    Then I should see the Giftaid thank you message
+
diff --git a/playwright-staging/tests/features/update/formValidation.spec.js b/playwright-staging/tests/features/update/formValidation.spec.js
@@ -1,11 +1,11 @@
 // @ts-check
 const { expect } = require('@playwright/test');
-const { test } = require('../../browserstack');
-const { Commands } = require('../utils/commands');
+const { test } = require('../../../browserstack');
+const { Commands } = require('../../utils/commands');
 const { v4: uuidv4 } = require('uuid');
 const Chance = require('chance');
 const chance = new Chance();
-const { selectors } = require('../utils/locators');
+const { selectors } = require('../../utils/locators');
 
 test.describe('Giftaid Update form validation @sanity @nightly-sanity', () => {
   let commands;
diff --git a/playwright-staging/tests/features/update/giftaidDeclarationOptions.spec.js b/playwright-staging/tests/features/update/giftaidDeclarationOptions.spec.js
@@ -1,8 +1,8 @@
 // @ts-check
 const { expect } = require('@playwright/test');
-const { test } = require('../../browserstack');
-const { Commands } = require('../utils/commands');
-const { selectors } = require('../utils/locators');
+const { test } = require('../../../browserstack');
+const { Commands } = require('../../utils/commands');
+const { selectors } = require('../../utils/locators');
 
 test('Validate Giftaid declaration claim selections @sanity @nightly-sanity', async ({ page }) => {
   const commands = new Commands(page);
diff --git a/playwright-staging/tests/features/update/internationalAddressesValidation.spec.js b/playwright-staging/tests/features/update/internationalAddressesValidation.spec.js
@@ -1,8 +1,8 @@
 // @ts-check
 const { expect } = require('@playwright/test');
-const { test } = require('../../browserstack');
+const { test } = require('../../../browserstack');
 const { v4: uuidv4 } = require('uuid');
-const { selectors } = require('../utils/locators');
+const { selectors } = require('../../utils/locators');
 
 test.describe('International addresses validation on update form @sanity @nightly-sanity', () => {
   test('selecting a non-UK country and entering a non-UK postcode should submit the update form', async ({ page }) => {
diff --git a/playwright-staging/tests/features/update/sorry.spec.js b/playwright-staging/tests/features/update/sorry.spec.js
@@ -1,7 +1,7 @@
 // @ts-check
 const { expect } = require('@playwright/test');
-const { test } = require('../../browserstack');
-const { selectors } = require('../utils/locators');
+const { test } = require('../../../browserstack');
+const { selectors } = require('../../utils/locators');
 
 test('Accessing giftaid update sorry page should show the sorry message @sanity @nightly-sanity', async ({ page }) => {
   // Navigate to the 'Sorry' page of giftaid update form
diff --git a/playwright-staging/tests/features/update/updateSuccessRedirect.spec.js b/playwright-staging/tests/features/update/updateSuccessRedirect.spec.js
@@ -1,7 +1,7 @@
 // @ts-check
 const { expect } = require('@playwright/test');
-const { test } = require('../../browserstack');
-const { selectors } = require('../utils/locators');
+const { test } = require('../../../browserstack');
+const { selectors } = require('../../utils/locators');
 
 test.describe('Success page redirect @sanity @nightly-sanity', () => {
   test('Accessing success page should redirect to giftaid update homepage', async ({ page }) => {
diff --git a/playwright-staging/tests/features/update/validFormSubmission.spec.js b/playwright-staging/tests/features/update/validFormSubmission.spec.js
@@ -1,8 +1,8 @@
 // @ts-check
 const { expect } = require('@playwright/test');
-const { test } = require('../../browserstack');
-const { Commands } = require('../utils/commands');
-const { selectors } = require('../utils/locators');
+const { test } = require('../../../browserstack');
+const { Commands } = require('../../utils/commands');
+const { selectors } = require('../../utils/locators');
 
 test.only('Valid giftaid update submission @sanity @nightly-sanity', async ({ page }) => {
   const commands = new Commands(page);
diff --git a/playwright-staging/tests/step-definitions/submit/giftaidSubmission.steps.js b/playwright-staging/tests/step-definitions/submit/giftaidSubmission.steps.js
@@ -0,0 +1,31 @@
+const { Given, When, Then } = require('@cucumber/cucumber');
+const { expect } = require('@playwright/test');
+const { selectors } = require('../../utils/locators');
+
+Given('I am on the Giftaid page', async function () {
+  await this.page.goto(process.env.BASE_URL, { timeout: 30000 });
+  await this.page.waitForLoadState('domcontentloaded');
+});
+
+When('I select Giftaid', async function () {
+  await this.page.click(selectors.giftaid.option);
+});
+
+When('I complete the Giftaid form with valid details', async function () {
+  await this.commands.populateFormFields(this.page);
+});
+
+When('I select marketing preferences', async function () {
+  await this.commands.selectMarketingPrefs(this.page);
+});
+
+When('I submit the Giftaid form', async function () {
+  await Promise.all([
+    this.page.waitForNavigation(),
+    this.page.click(selectors.formFields.submitButton),
+  ]);
+});
+
+Then('I should see the Giftaid thank you message', async function () {
+  await expect(this.page.locator(selectors.success.heading)).toHaveText('Thank you, test!');
+});
diff --git a/playwright-staging/tests/submit/validFormSubmission.spec.js b/playwright-staging/tests/submit/validFormSubmission.spec.js
diff --git a/playwright-staging/tests/support/hooks.js b/playwright-staging/tests/support/hooks.js
@@ -0,0 +1,78 @@
+require('dotenv').config();
+
+const { Before, After, Status, setDefaultTimeout } = require('@cucumber/cucumber');
+const { chromium } = require('@playwright/test');
+const { Commands } = require('../utils/commands');
+
+setDefaultTimeout(300 * 1000);
+
+const clientPlaywrightVersion = require('@playwright/test/package.json').version;
+
+const caps = {
+  project: 'giftaid-react',
+  name: 'cucumber e2e tests',
+  browser: 'chrome',
+  browser_version: 'latest',
+  resolution: '1920x1080',
+  os: 'Windows',
+  os_version: '11',
+  'browserstack.username': process.env.BROWSERSTACK_USERNAME,
+  'browserstack.accessKey': process.env.BROWSERSTACK_ACCESS_KEY,
+  'client.playwrightVersion': clientPlaywrightVersion,
+  'browserstack.playwrightVersion': clientPlaywrightVersion,
+  
+  // logs
+  'browserstack.networkLogs': true,
+  'browserstack.console': 'info',
+  'browserstack.debug': true,
+  'browserstack.idleTimeout': 300,
+};
+
+Before(async function (scenario) {
+  caps.name = scenario.pickle.name;
+  
+  this.browser = await chromium.connect({
+    wsEndpoint:
+      `wss://cdp.browserstack.com/playwright?caps=${encodeURIComponent(JSON.stringify(caps))}`,
+  });
+  
+  this.context = await this.browser.newContext({
+    viewport: null,
+    serviceWorkers: 'block',
+  });
+  
+  this.page = await this.context.newPage();
+  
+  // maximise window
+  const session = await this.context.newCDPSession(this.page);
+  const { windowId } = await session.send('Browser.getWindowForTarget');
+  await session.send('Browser.setWindowBounds', {
+    windowId,
+    bounds: { windowState: 'maximized' },
+  });
+  
+  this.commands = new Commands(this.page);
+});
+
+After(async function (scenario) {
+  const testResult = {
+    action: 'setSessionStatus',
+    arguments: {
+      status: scenario.result?.status === Status.PASSED ? 'passed' : 'failed',
+      reason: scenario.result?.message || '',
+    },
+  };
+  
+  if (this.page) {
+    await this.page.evaluate(() => {}, `browserstack_executor: ${JSON.stringify(testResult)}`);
+    await this.page.close();
+  }
+  
+  if (this.context) {
+    await this.context.close();
+  }
+  
+  if (this.browser) {
+    await this.browser.close();
+  }
+});
diff --git a/playwright-staging/tests/support/world.js b/playwright-staging/tests/support/world.js
@@ -0,0 +1,12 @@
+const { setWorldConstructor } = require('@cucumber/cucumber');
+
+class CustomWorld {
+  constructor() {
+    this.browser = null;
+    this.context = null;
+    this.page = null;
+    this.commands = null;
+  }
+}
+
+setWorldConstructor(CustomWorld);
diff --git a/playwright-staging/yarn.lock b/playwright-staging/yarn.lock
