Refactor playwright tests (#423)

* Refactor playwright tests

* Update Github actionns config

* Add color flag for playwright tests output to display in color

* ci: change tests output color to 1 and reduce tests timeout miniutes

* test: refactor giftaid tests

* test: fix local tests

* add chance package

* test: fix local tests

* test: fix form validation local test

* test: fix form validation local test

* debug: run only form validation test

* debug: fix form validation test

* test: fix form validation test

* test: fix MP validation test

* test: fix the thank you message step

.github/workflows/main.yml

@@ -5,7 +5,7 @@ on: [push]
 jobs:
   playwright:
     name: Playwright test
-    timeout-minutes: 60
+    timeout-minutes: 30
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
@@ -35,11 +35,12 @@ jobs:
         run: yarn playwright install --with-deps chromium
 
       - name: Run end-to-end tests
-        run: yarn test:e2e:ci
+        run: yarn test:playwright-local:ci
         continue-on-error: false
         env:
           NODE_ENV: development
           REACT_APP_ENDPOINT_URL: ${{ secrets.REACT_APP_ENDPOINT_URL }}
+          FORCE_COLOR: 1
 
       # Test run video was always captured, so this action uses "always()" condition
       - name: Upload videos

README.md

@@ -67,29 +67,29 @@ The domains for giftaid are as follows
 
 ## Testing
 
-### PR Playwright Tests
+### Playwright-Local Tests
 
-To run PR Playwright Tests locally (after running `yarn playwright install` if you haven't previously), you need to first export `REACT_APP_ENDPOINT_URL=https://giftaid-sandbox.sls.comicrelief.com/` in your terminal for the form to get submitted and then run the script `yarn test:e2e:local` found in package.json; this script starts the http://localhost:3000 server in the background, config for this is found in `playwright.config.js` file and runs the tests in headless mode. 
+To run PR Playwright Tests locally (after running `yarn playwright install` if you haven't previously), you need to first export `REACT_APP_ENDPOINT_URL=https://giftaid-sandbox.sls.comicrelief.com/` in your terminal for the form to get submitted and then run the script `test:playwright-local:local` found in package.json; this script starts the http://localhost:3000 server in the background, config for this is found in `playwright-local/playwright-local.config.js` file and runs the tests in headless mode. 
 
-To view a test in a headed mode locally, add `--headed` flag option to `"test:e2e": "playwright test --project=chromium --headed"` script found in package.json. 
+To view a test in a headed mode locally, add `--headed` flag option to `"test:playwright-local:local": "playwright test --config=./playwright-local/playwright-local.config.js --project=chromium --headed"` script found in package.json. 
 
 To run a single test, add `only` annotation
 
-eg: test.only('Header ESU validation', async ({ page }) => {
+eg: test.only('Valid giftaid submission', async ({ page }) => {
     });
 
 ### Staging Playwright Tests
 
 In order to run Playwright end-to-end tests locally you need to change directory to playwright folder `cd playwright` and export the following environment variables to your terminal:`BASE_URL, BROWSERSTACK_ACCESS_KEY, BROWSERSTACK_USERNAME`
 Browserstack credentials can be found in https://github.com/comicrelief/serverless-giftaid/blob/master/concourse/private.yml
 ```bash
-export BASE_URL='https://donation-staging.spa.comicrelief.com/' or PR env 'https://donation-pr.spa.comicrelief.com/'
+export BASE_URL='https://giftaid-staging.comicrelief.com/'
 export BROWSERSTACK_USERNAME='<INSERT_USERNAME>'
 export BROWSERSTACK_ACCESS_KEY='<INSERT_ACCESS_KEY>'
 ```
 ### Running tests 
 
-To run sanity or nightly-tests, check the commands in playwright/package.json  
+To run spa-feature-test or nightly-test-sanity, check the commands in playwright/package.json eg: `yarn test:sanity` 
 
 To run a single test, add `only` annotation