#1188, #1194 - Add POM for the E2E tests and update all tests (#1265)

* Created basic POM for the Playwright tests - initial commit

Added method and configurations

Additional refactoring - methods, specs and gitignore

Implemented Support page for E2E tests

Fixed tests for Support page

New changes on the tests

* Created basic POM for the Playwright tests - initial commit

Added method and configurations

Additional refactoring - methods, specs and gitignore

Implemented Support page for E2E tests

Fixed tests for Support page

New changes on the tests

Fixes on E2E tests

* Updated paths for the localization files for E2E

* Merge branch '1194-feature-create-playwright-page-object-model-for-the-e2e-tests' of https://github.com/podkrepi-bg/frontend into 1194-feature-create-playwright-page-object-model-for-the-e2e-tests

* Revert "Merge branch '1194-feature-create-playwright-page-object-model-for-the-e2e-tests' of https://github.com/podkrepi-bg/frontend into 1194-feature-create-playwright-page-object-model-for-the-e2e-tests"

This reverts commit 3bb8a19, reversing
changes made to b18b16b.

* Updated Readme file

* Fixed Sonar issues and updated Playwright version

Additional fix

* 1194 - init yarn project in the e2e folder and move out gitignore

* 1194 - fix ts errors

* 1194 - add e2e/.yarn to gitignore

* 1194 - remove e2e/.yarn

* 1194 - remove cached .yarn folder

* 1194 - change GH Action workflow to now run the `test:e2e`

* 1194 - change GH Action workflow to include artifacts of the reports and results

* 1194 - fix home.page.ts ts errors

* 1194 - remove hardcoded navigation to different environments

* 1194 - add installation of dependencies for the e2e folder  in the CI action

* 1194 - fix translation on the homepage

* 1194 - fix e2e script in the root folder

* 1194 - add a tsconfig.build.json to exclude e2e while next is building

* 1194 - add data based on the STAGING env variable

* 1194 - resolve environment related tests

* 1194 - remove uneccessasry `tsconfigPath` inside of the config

* 1194 - put video to `off` by default

* 1194 - add a clickCampaignByIndex method

* 1194 - remove campaign specific test and changed them to index based

* 1194 - add the index on the campaigns page list

* 1194 - change the expiry date tests data to `04 / 42`

* 1194 - add the index to the campaign card on the campaigns section on the home page

* 1194 - add `playwright` as a dependency for the project

* 1194 - add the changed `yarn.lock`

* 1194 - fix the support action button click test  to not click the card beforehand

---------

Co-authored-by: Daniel Takev <[email protected]>

.github/workflows/playwright.yml

@@ -68,6 +68,10 @@ jobs:
       - name: Install Frontend Dependencies
         working-directory: ./frontend
         run: yarn
+
+      - name: Install e2e Dependencies
+        working-directory: ./frontend/e2e
+        run: yarn
 
       - name: Setup env
         working-directory: ./frontend
@@ -92,8 +96,8 @@ jobs:
         run: yarn start &> frontend.log &
 
       - name: Install Playwright Browsers
-        working-directory: ./frontend
-        run: npx playwright install --with-deps
+        working-directory: ./frontend/e2e
+        run: yarn run playwright:install
 
       - name: Wait on frontend
         uses: iFaxity/wait-on-action@v1
@@ -103,13 +107,20 @@ jobs:
 
       - name: Run Frontend Tests
         working-directory: ./frontend
-        run: yarn playwright test e2e/local
+        run: yarn run test:e2e
 
       - uses: actions/upload-artifact@v3
         if: always()
         with:
           name: playwright-report
-          path: ./frontend/playwright-report/
+          path: ./frontend/e2e/test-results/
+          retention-days: 14
+
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: ./frontend/e2e/e2e-reports/
           retention-days: 14
 
       - uses: actions/upload-artifact@v3

.gitignore

@@ -17,6 +17,13 @@ lerna-debug.log*
 coverage
 .nyc_output
 
+# E2E
+test-results/
+playwright-report/
+playwright/.cache/
+e2e-reports/
+e2e/.yarn/*
+
 # IDEs and editors
 .idea
 .project
@@ -51,9 +58,6 @@ build/
 bld/
 [Bb]in/
 [Oo]bj/
-/test-results/
-/playwright-report/
-/playwright/.cache/
 
 # https://yarnpkg.com/getting-started/qa/#which-files-should-be-gitignored
 .pnp.*

e2e/README.md

@@ -45,14 +45,8 @@ Options:
 yarn test:e2e
 ```
 
-### Run only local test suites
+### Run test suites in headed mode with enabled debug
 
 ```shell
-yarn test:e2e local
-```
-
-### Run local test suites in headed mode with enabled debug
-
-```shell
-yarn test:e2e local --headed --debug -x -g support
+yarn test:e2e --headed --debug -x -g support
 ```

e2e/data/enums/donation-regions.enum.ts

@@ -0,0 +1,14 @@
+// This enum should be used as a parameter for methods in E2E tests
+
+// Check bgLocalizationOneTimeDonation["third-step"]["card-region"]
+export enum bgDonationRegions {
+  EUROPE = 'Европа',
+  GREAT_BRITAIN = 'Великобритания',
+  OTHER = 'други',
+}
+
+export enum enDonationRegions {
+  EUROPE = 'Europe',
+  GREAT_BRITAIN = 'Great Britain',
+  OTHER = 'other',
+}

e2e/data/enums/languages.enum.ts

@@ -0,0 +1,6 @@
+// This enum should be used as a parameter for methods in E2E tests
+
+export enum LanguagesEnum {
+  BG = 'BG',
+  EN = 'EN',
+}

e2e/data/localization.ts

@@ -0,0 +1,37 @@
+import bgLocalizationCommonJson from '../../public/locales/bg/common.json'
+import enLocalizationCommonJson from '../../public/locales/en/common.json'
+
+import bgLocalizationIndexJson from '../../public/locales/bg/index.json'
+import enLocalizationIndexJson from '../../public/locales/en/index.json'
+
+import bgLocalizationSupportJson from '../../public/locales/bg/support.json'
+import enLocalizationSupportJson from '../../public/locales/en/support.json'
+
+import bgLocalizationValidationJson from '../../public/locales/bg/validation.json'
+import enLocalizationValidationJson from '../../public/locales/en/validation.json'
+
+import bgLocalizationCampaignsJson from '../../public/locales/bg/campaigns.json'
+import enLocalizationCampaignsJson from '../../public/locales/en/campaigns.json'
+
+import bgLocalizationOneTimeDonationJson from '../../public/locales/bg/one-time-donation.json'
+import enLocalizationOneTimeDonationJson from '../../public/locales/en/one-time-donation.json'
+
+// All these constants are used in the E2E test pages to manipulate web elements in a respective language
+// Common localization terms
+export const bgLocalizationCommon = bgLocalizationCommonJson
+export const enLocalizationCommon = enLocalizationCommonJson
+// Home
+export const bgLocalizationIndex = bgLocalizationIndexJson
+export const enLocalizationIndex = enLocalizationIndexJson
+// Support page
+export const bgLocalizationSupport = bgLocalizationSupportJson
+export const enLocalizationSupport = enLocalizationSupportJson
+// Campaigns page
+export const bgLocalizationCampaigns = bgLocalizationCampaignsJson
+export const enLocalizationCampaigns = enLocalizationCampaignsJson
+// Donations
+export const bgLocalizationOneTimeDonation = bgLocalizationOneTimeDonationJson
+export const enLocalizationOneTimeDonation = enLocalizationOneTimeDonationJson
+// Validations
+export const bgLocalizationValidation = bgLocalizationValidationJson
+export const enLocalizationValidation = enLocalizationValidationJson

e2e/data/support-page-tests.data.ts

@@ -0,0 +1,15 @@
+export const supportPageVolutneerTestData = {
+  firstName: 'Test valid first name',
+  lastName: 'Test valid last name',
+  email: '[email protected]',
+  phone: '+359888000000',
+  comment: 'E2E Test comment',
+}
+
+export const anonDonationTestData = {
+  cardNumber: '4242 4242 4242 4242',
+  cardExpDate: '04 / 42',
+  cardCvc: '424',
+  billingName: 'E2E Test Anonymous Donation',
+  country: 'BG',
+}