test: playwright cucumber POC

.github/workflows/main.yml

@@ -34,8 +34,8 @@ jobs:
       - name: Install playwright browsers
         run: yarn playwright install chromium
 
-      - name: Run Playwright Chrome Tests
-        run: yarn test:playwright-local:ci:chromium
+      - name: Run Cucumber Giftaid Sanity Tests
+        run: yarn test:cucumber:ci:chromium:sanity
         continue-on-error: false
         env:
           NODE_ENV: development
@@ -85,8 +85,8 @@ jobs:
       - name: Install playwright browsers (WebKit)
         run: yarn playwright install webkit
 
-      - name: Run Mobile WebKit Tests
-        run: yarn test:playwright-local:ci:mobile
+      - name: Run Mobile Cucumber Tests
+        run: yarn test:cucumber:ci:mobile:sanity
         continue-on-error: false
         env:
           NODE_ENV: development

package.json

@@ -37,15 +37,20 @@
     "start": "node scripts/start.js",
     "build": "node scripts/build.js",
     "lint": "eslint --color src",
-    "test:playwright-local:local": "playwright test --config=./playwright-local/playwright-local.config.js",
-    "test:playwright-local:local:chromium": "playwright test --config=./playwright-local/playwright-local.config.js --project=chromium",
-    "test:playwright-local:local:chromium--h": "playwright test --config=./playwright-local/playwright-local.config.js --project=chromium --headed",
-    "test:playwright-local:local:mobile": "playwright test --config=./playwright-local/playwright-local.config.js --project=mobile-safari",
-    "test:playwright-local:local:mobile--h": "playwright test --config=./playwright-local/playwright-local.config.js --project=mobile-safari --headed",
-    "test:playwright-local:ci": "export NODE_ENV=development; start-server-and-test start http://localhost:3000 test:playwright-local",
-    "test:playwright-local:ci:chromium": "export NODE_ENV=development; start-server-and-test start http://localhost:3000 test:playwright-local:local:chromium",
-    "test:playwright-local:ci:mobile": "export NODE_ENV=development; start-server-and-test start http://localhost:3000 test:playwright-local:local:mobile",
-    "test:playwright-local:local:chrome:mobile": "export NODE_ENV=development; start-server-and-test start http://localhost:3000 test:playwright-local:local",
+    "test:cucumber:local": "cd playwright-local && BASE_URL=http://localhost:3000 cucumber-js --config config/cucumber.js",
+    "test:cucumber:local:sanity": "cd playwright-local && BASE_URL=http://localhost:3000 cucumber-js --config config/cucumber.js --tags '@sanity'",
+    "test:cucumber:local:chromium": "cd playwright-local && BROWSER=chromium BASE_URL=http://localhost:3000 cucumber-js --config config/cucumber.js",
+    "test:cucumber:local:chromium:sanity": "cd playwright-local && BROWSER=chromium BASE_URL=http://localhost:3000 cucumber-js --config config/cucumber.js --tags '@sanity'",
+    "test:cucumber:local:chromium:headed": "cd playwright-local && BROWSER=chromium HEADED=true BASE_URL=http://localhost:3000 cucumber-js --config config/cucumber.js --tags '@sanity'",
+    "test:cucumber:local:mobile": "cd playwright-local && BROWSER=mobile-safari BASE_URL=http://localhost:3000 cucumber-js --config config/cucumber.js",
+    "test:cucumber:local:mobile:sanity": "cd playwright-local && BROWSER=mobile-safari BASE_URL=http://localhost:3000 cucumber-js --config config/cucumber.js --tags '@sanity'",
+    "test:cucumber:local:mobile:headed": "cd playwright-local && BROWSER=mobile-safari HEADED=true BASE_URL=http://localhost:3000 cucumber-js --config config/cucumber.js --tags '@sanity'",
+    "test:cucumber:ci": "export NODE_ENV=development; start-server-and-test start http://localhost:3000 test:cucumber:local",
+    "test:cucumber:ci:sanity": "export NODE_ENV=development; start-server-and-test start http://localhost:3000 test:cucumber:local:sanity",
+    "test:cucumber:ci:chromium": "export NODE_ENV=development; start-server-and-test start http://localhost:3000 test:cucumber:local:chromium",
+    "test:cucumber:ci:chromium:sanity": "export NODE_ENV=development; start-server-and-test start http://localhost:3000 test:cucumber:local:chromium:sanity",
+    "test:cucumber:ci:mobile": "export NODE_ENV=development; start-server-and-test start http://localhost:3000 test:cucumber:local:mobile",
+    "test:cucumber:ci:mobile:sanity": "export NODE_ENV=development; start-server-and-test start http://localhost:3000 test:cucumber:local:mobile:sanity",
     "snyk-protect": "snyk-protect",
     "prepublish": "yarn snyk-protect"
   },
@@ -59,6 +64,7 @@
     "@babel/runtime": "^7.11.2",
     "@comicrelief/data-models": "^1.15.4",
     "@comicrelief/test-utils": "^1.5.13",
+    "@cucumber/cucumber": "8.9.1",
     "@playwright/test": "1.38.1",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.1.0",

playwright-local/config/cucumber.js

@@ -0,0 +1,15 @@
+module.exports = {
+  default: {
+    paths: ['tests/features/**/*.feature'],
+    require: [
+      'tests/support/**/*.js',
+      'tests/step-definitions/**/*.js',
+    ],
+    // Use 'pretty' locally for readable step-by-step output.
+    // On CI keep the output minimal to avoid noisy logs.
+    format: ['progress', 'summary'],
+    retry: 2, // Retry failed scenarios twice
+    parallel: 2, // Run scenarios in parallel workers
+    publishQuiet: true,
+  },
+};

playwright-local/tests/features/submit/addressValidation.feature

@@ -0,0 +1,43 @@
+@sanity @address-validation
+Feature: Address validation
+
+  Background:
+    Given I am on the local Giftaid page
+    And I select the local Giftaid option
+    And I enter the local supporter details
+
+  Scenario: Empty postcode should show an error message
+    When I clear the local postcode field
+    And I submit the local Giftaid form
+    Then I should see the local postcode error message "Please enter your postcode"
+
+  Scenario Outline: Invalid postcodes should show error messages
+    When I enter the local postcode "<postcode>"
+    Then I should see the local postcode error message "<message>"
+
+    Examples:
+      | postcode     | message                                                                                               |
+      | 12SE17TP     | Please enter a valid UK postcode, using a space. For non-UK addresses, please use manual entry below. |
+      | comic relief | Please enter a valid UK postcode, using a space. For non-UK addresses, please use manual entry below. |
+      | cro 7tp      | Please enter a valid UK postcode, using a space. For non-UK addresses, please use manual entry below. |
+
+  Scenario: Entering a postcode without selecting an address should show an error message
+    When I enter the local postcode "SE1 7TP"
+    And I search for the local postcode
+    Then I should see the local address dropdown
+    When I submit the local Giftaid form
+    Then I should see the local address select error message "Please select your address"
+
+  Scenario: Clicking the manual address link should show the address fields
+    When I enter the local postcode "SE1 7TP"
+    Then I should see the local manual address link
+    When I click the local manual address link
+    Then I should see the local manual address fields
+
+  Scenario: Invalid address fields should show error messages
+    When I enter the local postcode "SE1 7TP"
+    And I click the local manual address link
+    And I enter the local invalid address line 1
+    Then I should see the local address line 1 error message
+    When I enter the local invalid town
+    Then I should see the local town error message

playwright-local/tests/features/submit/formValidation.feature

@@ -0,0 +1,55 @@
+@sanity @form-validation
+Feature: Form validation
+
+  Background:
+    Given I am on the local Giftaid page
+    And I select the local Giftaid option
+
+  Scenario Outline: Invalid mobile numbers should show an error message
+    When I enter the local mobile number "<mobile>"
+    Then I should see the local mobile error message "Please enter a valid mobile phone number - it must be the same number associated with your donation."
+
+    Examples:
+      | mobile        |
+      | 0712345678    |
+      | 0712345678900 |
+      | 0712 345 6789 |
+      | 0780ab5694245 |
+
+  Scenario: Valid mobile number should submit the form
+    When I complete the local Giftaid form with valid details
+    And I submit the local Giftaid form
+    Then I should see the local thank you message "Thank you, test!"
+
+  Scenario Outline: Invalid first names should show an error message
+    When I enter the local first name "<firstName>"
+    Then I should see the local first name error message "This field only accepts 25 alphabetic characters and ' - starting with alphabetic characters"
+
+    Examples:
+      | firstName |
+      | Test^$%£  |
+      | SPACE     |
+      | 123Test   |
+
+  Scenario: Valid first name should submit the form
+    When I complete the local Giftaid form with the first name "testFirstname"
+    And I submit the local Giftaid form
+    Then I should see the local thank you message "Thank you, testFirstname!"
+
+  Scenario Outline: Invalid last names should show an error message
+    When I enter the local last name "<lastName>"
+    Then I should see the local last name error message "This field only accepts 25 alphanumeric characters and , . ( ) / & ' - starting with alphanumeric characters"
+
+    Examples:
+      | lastName |
+      | Test^$%£ |
+      | SPACE    |
+
+  Scenario: Alphanumeric last name should not show an error message
+    When I enter the local last name "123Test"
+    Then I should not see the local last name error message
+
+  Scenario: Valid last name should submit the form
+    When I complete the local Giftaid form with valid details
+    And I submit the local Giftaid form
+    Then I should see the local thank you message containing "Thank you,"

playwright-local/tests/features/submit/internationalAddressesValidation.feature

@@ -0,0 +1,18 @@
+@sanity @international-address-validation
+Feature: International address validation
+
+  Background:
+    Given I am on the local Giftaid page
+    And I select the local Giftaid option
+    And I enter the local supporter details
+
+  Scenario: Selecting a non-UK country and entering a non-UK postcode should submit the form
+    When I enter the local postcode "30916-395"
+    Then I should see the local postcode error message "Please enter a valid UK postcode, using a space. For non-UK addresses, please use manual entry below."
+    When I click the local manual address link
+    And I enter the local international address details
+    And I select a random local non-UK country
+    Then I should not see the local postcode error message
+    When I select the local marketing preferences
+    And I submit the local Giftaid form
+    Then I should see the local thank you message containing "Thank you,"

playwright-local/tests/features/submit/marketingPreferencesValidation.feature

@@ -0,0 +1,36 @@
+@sanity @marketing-preferences-validation
+Feature: Marketing preferences validation
+
+  Background:
+    Given I am on the local Giftaid page
+    And I select the local Giftaid option
+    And I complete the local Giftaid form with valid details
+
+  Scenario: Clicking marketing preference options should submit the Giftaid form
+    When I select all the local marketing preference options
+    And I enter the local marketing email
+    And I enter the local marketing phone
+    And I submit the local Giftaid form
+    Then I should see the local thank you message "Thank you, test!"
+
+  Scenario: The email marketing preference field should show validation errors
+    When I select the local email marketing preference
+    And I enter the local marketing email
+    And I clear the local marketing email
+    Then I should see the local marketing email error message "Please fill in your email address"
+    When I enter an invalid local marketing email "example@£$^&email.com"
+    Then I should see the local marketing email error message "Please fill in a valid email address"
+    When I enter the local marketing email
+    And I submit the local Giftaid form
+    Then I should see the local thank you message "Thank you, test!"
+
+  Scenario: The phone marketing preference field should show validation errors
+    When I select the local phone marketing preference
+    And I enter the local marketing phone
+    And I clear the local marketing phone
+    Then I should see the local marketing phone error message "Please fill in your phone number"
+    When I enter an invalid local marketing phone "0208569424"
+    Then I should see the local marketing phone error message "Please fill in a valid UK phone number, with no spaces"
+    When I enter the local marketing phone
+    And I submit the local Giftaid form
+    Then I should see the local thank you message containing "Thank you,"

playwright-local/tests/features/submit/postcodeLookup.feature

@@ -0,0 +1,23 @@
+@sanity @postcode-lookup
+Feature: Postcode lookup validation
+
+  Background:
+    Given I am on the local Giftaid page
+    And I select the local Giftaid option
+    And I enter the local supporter details
+
+  Scenario Outline: Postcode formatting errors should show validation message
+    When I enter the local postcode "<postcode>"
+    Then I should see the local postcode error message "<message>"
+
+    Examples:
+      | postcode  | message                                                                                               |
+      | S E 1 7 T P | Please enter a valid UK postcode, using a space. For non-UK addresses, please use manual entry below. |
+      | SE$%TP    | Please enter a valid UK postcode, using a space. For non-UK addresses, please use manual entry below. |
+
+  Scenario: Enter valid UK postcode using postcode lookup should submit the form
+    When I enter the local postcode "SE1 7TP"
+    And I search for the local postcode
+    And I select the local lookup address or enter the address manually
+    And I submit the local Giftaid form
+    Then I should see the local thank you message containing "Thank you,"

playwright-local/tests/features/submit/validGiftaidSubmission.feature

@@ -0,0 +1,12 @@
+@sanity @valid-giftaid-submission
+Feature: Valid Giftaid Submission
+
+  Background:
+    Given I am on the local Giftaid page
+    And I select the local Giftaid option
+
+  Scenario: Valid Giftaid Submission
+    When I complete the local Giftaid form with valid details
+    And I select the local marketing preferences
+    And I submit the local Giftaid form and wait for the navigation
+    Then I should see the local thank you message containing "Thank you,"