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

dimitur2204 · 2022-12-22T12:43:45Z

Closes #{#1188, #1194 }

Motivation and context

This change is important because we need stable E2E tests and reusable code.

What we have:

Page Object Model

Separated dependencies into the E2E folder

Reusable methods which work both with EN and BG language versions

Test reports + screenshots on failure and other details

Additional: removed Cyrillic symbol (e) from a few files (ex.: public/locales/bg/common.json)

If we want to run local E2E tests:

Just change one method in the BeforeAll section of the desired spec and the test will run against localhost

New or updated dependencies:

All Playwright dependencies were updated and moved into folder e2e

TODO:

Check with the developers all CI/CD configurations

Fix all warnings from the pipeline

Update what's left from the previous specs

This is a PR based on #1259

TODO:

Check with the developers all CI/CD configurations
Add a way to get around the different content on staging and local
Fix all warnings from the pipeline
Update what's left from the previous specs

Environment

Created a new yarn project inside of the e2e folder which needs to install its dependencies seperately.
Added a tsconfig.build.json which ignores the e2e project. It is needed because when next build is called typescript checked the e2e folder with the missing dependencies and was throwing an error.
Added a STAGING environment variable, which can be passed to the yarn run test:e2e STAGING=true to run the tests on dev.podkrepi.bg instead of locally.

New environment variables:

STAGING: Env variable to toggle the tests on staging, only present in the e2e project folder

New or updated dependencies:

Dependency name|Version|Details
---|---|---|---
@playwright/test|v1.29.1|This dependency is for the e2e project|

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

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

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

…-model-for-the-e2e-tests

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

…l-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.

Additional fix

…and results

…action

…-update-fix-builds

kachar · 2022-12-22T15:34:31Z

@dimitur2204 There's an error in e2e tests

[Podkrepi.bg E2E tests] › regression/donation-flow/anon-donation-custom.spec.ts:48:9 › Anonymous contributor is able to donate custom amount - BG language version › Particular campaign can be opened through the Campaign page 

    Error: H5 header is not visible.

Is it false-positive or we need to tweak the tests a bit more?

dimitur2204 · 2022-12-22T15:43:39Z

Currently some of the tests are dependent on the content on staging. Will have to change that first

DanielTakev · 2022-12-23T12:46:07Z

We should decide what we want to test against dev and localhost.
As far as I understood, the test data for dev env. is different, so we could just open the first available campaign and make validations against it.
But in that case, is possible to miss some bugs (for example - we can not expect any particular campaign title or URL, so this data validation will be skipped).

kachar · 2022-12-23T14:09:12Z

We can also add some seed data that is not random, so we can check it with the e2e tests. It will lack variety but it will help us ensure the smoke tests are running OK.

…pdate-fix-builds

… the home page

… beforehand

igoychev

great for making the tests run on any environment!

kachar

Nicely done 👏

* payment-process-stripe - add flow context * payment-process-stripe - add choose amount component * payment-process-stripe - connect the accordion group to work with formik now * payment-process-stripe - connect the accordion card group to work with formik * payment-process-stripe - add formik to the flow form * payment-process-stripe - add the choose amount from the old donation flow * payment-process-stripe - add disabled prop to the options on the cards * payment-process-stripe - add the stripe payment intent to the context * payment-process-stripe - add the stripe key to the runtime config * payment-process-stripe - add locale to the stripe payment process * dependencies - bump up minor next version to 13.1 * payment-process-stripe - add step splitter component * payment-process-stripe - add mobile view for the payment method * payment-process-stripe - add disabled and fix styling for the RadioAccordionGroup * 1284 - add flow context * 1284 - add choose amount component * 1284 - connect the accordion group to work with formik now * 1284 - connect the accordion card group to work with formik * 1284 - add formik to the flow form * 1284 - add the choose amount from the old donation flow * 1284 - add disabled prop to the options on the cards * 1284 - add the stripe payment intent to the context * 1284 - add the stripe key to the runtime config * 1284 - add locale to the stripe payment process * dependencies - bump up minor next version to 13.1 * 1284 - add step splitter component * 1284 - add mobile view for the payment method * 1284 - add disabled and fix styling for the RadioAccordionGroup * 1284 - rewrite DonationFlowPage styles to use the new `styled` api * 1284 - remove unecessary `StyledLayout` * 1284 - move tax calculations and checkbox to the PaymentMethod step * 1284 - fix stripe promise and styling issues * 1284 - fix mobile and tablet styling * 1284 - remove stripe public key from the .env example file * 1284 - add `<LinkAuthenticationElement />` for email on the stripe payment * 1284 - fix rerendering issue on RadioCardItems * a11y - add accessibility :focus styling to all buttons * a11y - fix keyboard navigation for `LinkButton` component * dependencies - update material dependencies * 1292 - add authentication form RadioAccordionGroup and initial skeleton * 1292 - add the inline login form to the login step * 1292 - add translation to the `Authentication` * 1292 - fix Radio checks on the authentication form accordions * 1292 - add ƒorm validation and initial values * 1292 - add inline register form * 1292 - add authentication folder * 1292 - style form donate button * 1292 - return yup.then to non-functions * 1292 - fix payment method grid problem * 1292 - remove stripe public key from example env * 1292 - add heading to the form * 1292 - move payment method components to a folder * 1292 - change structure of the donation-flow directory * 1292 - add docs to the RadioGroup components * 1292 - fix context import * 1292 - remove `stripe-fee-calculators.ts` from the payment-method folder * 1292 - add `anonymous` as a seperate checkbox and field * feat-7134 - add a `NOREGISTER` state to the authentication and a conditionally rendered checkbox * feat-7134 - return the authentication on null if checkbox is unchecekd * avatar-letters-hotfix - add a fallback to `given_name` and `family_name` avatar letters (#1300) * put campaigns with status different than active at the bottom of the … (#1304) * put campaigns with status different than active at the bottom of the list * remove left out `console.log` * Fix Campaigns section max width and alignment on Homepage and Campaigns page (#1303) * Fix maxWidth of Campaigns section on Homepage * Fix maxWidth for Campaigns section on Campaign page * Fix alignment of campaigns page * Fix spacings on campaigns section * Remove unused import (#1306) * 1292 - add a noregister radio button and put the anonymous checkbox to be avaliable to both logged and unlogged users * 1292 - add an email field for no-register users * 1292 - arrange imports on the Authentication * Adding withdrawnAmount in Admin Campaign Grid (#1305) * fixed scroll in admin campaign grid * allow edit of public donor name for all donations - #1206 * fixed: misleading names for bank upload * fixed typos valt vs vault * moved: vault grid actions as first column * fixed: editing of withdrawals and status change to successfully approved * added: withdrawnAmount column in Admin Campaign grid * forbid changes on succeeded withdrawal --------- Co-authored-by: quantum-grit <[email protected]> * 1299 - move out stripe `Elements` in a separate provider outside the form * 1299 - add `formik-persist-values` dependency and session storage persistance * 1299 - add create stripe donation endpoint * 1299 - add update endpoint call to update the current payment intent * 1299 - add a call to the createStripePayment endpoint before submitting * 1299 - reorder imports * 1299 - update form validation * #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]> * feat-7134 - add `yarn install --immutable` to the Github Workflow * feat-7134 - update `yarn.lock` * 1299 - fix `e2e` region pick test --------- Co-authored-by: Ani <[email protected]> Co-authored-by: quantum-grit <[email protected]> Co-authored-by: quantum-grit <[email protected]> Co-authored-by: Daniel Takev <[email protected]>

* payment-process-stripe - add flow context * payment-process-stripe - add choose amount component * payment-process-stripe - connect the accordion group to work with formik now * payment-process-stripe - connect the accordion card group to work with formik * payment-process-stripe - add formik to the flow form * payment-process-stripe - add the choose amount from the old donation flow * payment-process-stripe - add disabled prop to the options on the cards * payment-process-stripe - add the stripe payment intent to the context * payment-process-stripe - add the stripe key to the runtime config * payment-process-stripe - add locale to the stripe payment process * dependencies - bump up minor next version to 13.1 * payment-process-stripe - add step splitter component * payment-process-stripe - add mobile view for the payment method * payment-process-stripe - add disabled and fix styling for the RadioAccordionGroup * 1284 - add flow context * 1284 - add choose amount component * 1284 - connect the accordion group to work with formik now * 1284 - connect the accordion card group to work with formik * 1284 - add formik to the flow form * 1284 - add the choose amount from the old donation flow * 1284 - add disabled prop to the options on the cards * 1284 - add the stripe payment intent to the context * 1284 - add the stripe key to the runtime config * 1284 - add locale to the stripe payment process * dependencies - bump up minor next version to 13.1 * 1284 - add step splitter component * 1284 - add mobile view for the payment method * 1284 - add disabled and fix styling for the RadioAccordionGroup * 1284 - rewrite DonationFlowPage styles to use the new `styled` api * 1284 - remove unecessary `StyledLayout` * 1284 - move tax calculations and checkbox to the PaymentMethod step * 1284 - fix stripe promise and styling issues * 1284 - fix mobile and tablet styling * 1284 - remove stripe public key from the .env example file * 1284 - add `<LinkAuthenticationElement />` for email on the stripe payment * 1284 - fix rerendering issue on RadioCardItems * a11y - add accessibility :focus styling to all buttons * a11y - fix keyboard navigation for `LinkButton` component * dependencies - update material dependencies * 1292 - add authentication form RadioAccordionGroup and initial skeleton * 1292 - add the inline login form to the login step * 1292 - add translation to the `Authentication` * 1292 - fix Radio checks on the authentication form accordions * 1292 - add ƒorm validation and initial values * 1292 - add inline register form * 1292 - add authentication folder * 1292 - style form donate button * 1292 - return yup.then to non-functions * 1292 - fix payment method grid problem * 1292 - remove stripe public key from example env * 1292 - add heading to the form * 1292 - move payment method components to a folder * 1292 - change structure of the donation-flow directory * 1292 - add docs to the RadioGroup components * 1292 - fix context import * 1292 - remove `stripe-fee-calculators.ts` from the payment-method folder * 1292 - add `anonymous` as a seperate checkbox and field * feat-7134 - add a `NOREGISTER` state to the authentication and a conditionally rendered checkbox * feat-7134 - return the authentication on null if checkbox is unchecekd * avatar-letters-hotfix - add a fallback to `given_name` and `family_name` avatar letters (#1300) * put campaigns with status different than active at the bottom of the … (#1304) * put campaigns with status different than active at the bottom of the list * remove left out `console.log` * Fix Campaigns section max width and alignment on Homepage and Campaigns page (#1303) * Fix maxWidth of Campaigns section on Homepage * Fix maxWidth for Campaigns section on Campaign page * Fix alignment of campaigns page * Fix spacings on campaigns section * Remove unused import (#1306) * 1292 - add a noregister radio button and put the anonymous checkbox to be avaliable to both logged and unlogged users * 1292 - add an email field for no-register users * 1292 - arrange imports on the Authentication * Adding withdrawnAmount in Admin Campaign Grid (#1305) * fixed scroll in admin campaign grid * allow edit of public donor name for all donations - #1206 * fixed: misleading names for bank upload * fixed typos valt vs vault * moved: vault grid actions as first column * fixed: editing of withdrawals and status change to successfully approved * added: withdrawnAmount column in Admin Campaign grid * forbid changes on succeeded withdrawal --------- Co-authored-by: quantum-grit <[email protected]> * 1299 - move out stripe `Elements` in a separate provider outside the form * 1299 - add `formik-persist-values` dependency and session storage persistance * 1299 - add create stripe donation endpoint * 1299 - add update endpoint call to update the current payment intent * 1299 - add a call to the createStripePayment endpoint before submitting * 1299 - reorder imports * 1299 - update form validation * #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]> * feat-7134 - add `yarn install --immutable` to the Github Workflow * feat-7134 - update `yarn.lock` * 1299 - fix `e2e` region pick test * 1299 - add `formik-persist-values` dependency and session storage persistance * 1299 - add create stripe donation endpoint * 1299 - reorder imports * 1286 - add alerts column on desktop * 1286 - add payment method alerts and create a separete types file * 1286 - add authentication alert info * 1286 - add hiding logic to the alerts boxes * 1286 - remove recurring donations checkbox * 1286 - add summary alert box skeleton * 1286 - style summary alret box * 1286 - add a privacy field and move the anonymous checkbox * 1286 - add the splitter and fix typings * 1286 - add mobile alerts * 1286 - change authenticated text * 1286 - remove mobile auth alerts on desktop * 1286 - add strict typings to the form * 1286 - split register validation * 1286 - split login, general, amount validation * 1286 - split initial form values * 1286 - add error handling on the form submit requests * 1286 - fix otherAmount field validation problems * 1286 - change mutation configs to now use the mutationFn options * 1286 - update authentication alert after stripe form initialization * 1286 - add minus margins on the no registration alert * 1286 - fix other field price overlap * 1286 - add comment on the amount change * 1286 - add `useDonationFlow` hook * 1286 - comment out the `JSON.stringify(error)` and add a todo comment * 1286 - add alert max-width to match the PaymentSummary alert * 1286 - add PaymentSummaryAlert on mobile * 1286 - add back button, and cancel confirmation dialog * 1286 - adjust anchored alert width * 1286 - swapped the change and confirmation buttons * 1286 - removed unused imports --------- Co-authored-by: Ani <[email protected]> Co-authored-by: quantum-grit <[email protected]> Co-authored-by: quantum-grit <[email protected]> Co-authored-by: Daniel Takev <[email protected]>

DanielTakev and others added 23 commits December 15, 2022 23:10

Created basic POM for the Playwright tests - initial commit

7f48285

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

b18b16b

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

Merge branch '1194-feature-create-playwright-page-object-model-for-th…

3bb8a19

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

Updated paths for the localization files for E2E

0467e36

Merge branch 'master' into 1194-feature-create-playwright-page-object…

26e6314

…-model-for-the-e2e-tests

Merge branch '1194-feature-create-playwright-page-object-model-for-th…

3948470

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

Updated Readme file

cfe5caa

Fixed Sonar issues and updated Playwright version

c59609d

Additional fix

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

2325be1

1194 - fix ts errors

18e9d9e

1194 - add e2e/.yarn to gitignore

dec990b

1194 - remove e2e/.yarn

1259787

1194 - remove cached .yarn folder

1809c13

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

9c4abf0

1194 - change GH Action workflow to include artifacts of the reports …

8bebecf

…and results

1194 - fix home.page.ts ts errors

166d768

1194 - remove hardcoded navigation to different environments

886fa07

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

747a562

…action

Merge remote-tracking branch 'upstream/master' into 1194-pom-e2e-test…

80bb866

…-update-fix-builds

1194 - fix translation on the homepage

f5426dd

1194 - fix e2e script in the root folder

089cf3c

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

62f2b9d

kachar added the run tests Allows running the tests workflows for forked repos label Dec 22, 2022

1194 - add data based on the STAGING env variable

734000f

1194 - resolve environment related tests

34f1f50

dimitur2204 added 4 commits January 29, 2023 16:11

Merge branch 'master' into 1194-pom-e2e-test-update-fix-builds

d6ce64a

1194 - add a clickCampaignByIndex method

31df6fa

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

ee7116a

Merge remote-tracking branch 'origin/master' into 1194-pom-e2e-test-u…

3271896

…pdate-fix-builds

dimitur2204 requested review from DanielTakev and igoychev January 29, 2023 16:06

dimitur2204 added 2 commits January 29, 2023 17:11

1194 - add the index on the campaigns page list

29fa322

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

7bea6c1

dimitur2204 mentioned this pull request Jan 29, 2023

Add POM for the E2E tests and update all tests #1259

Closed

dimitur2204 changed the title ~~1194 pom e2e test update fix builds~~ #1188, #1194 - Add POM for the E2E tests and update all tests Jan 29, 2023

1194 - add the index to the campaign card on the campaigns section on…

bbc4cec

… the home page

dimitur2204 added type: enhancement New feature or request area: e2e tests Testing of the platform labels Jan 29, 2023

This was linked to issues Jan 29, 2023

[Dev] Update Playwright to latest #1188

Closed

[Feature] Create Playwright Page Object Model for the E2E tests #1194

Closed

dimitur2204 added run tests Allows running the tests workflows for forked repos and removed run tests Allows running the tests workflows for forked repos labels Jan 29, 2023

dimitur2204 added 3 commits January 29, 2023 17:46

1194 - add playwright as a dependency for the project

d5c6418

1194 - add the changed yarn.lock

120adcb

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

0c7ea04

… beforehand

igoychev approved these changes Jan 30, 2023

View reviewed changes

dimitur2204 requested review from DanielTakev and kachar and removed request for kachar and DanielTakev January 30, 2023 12:48

kachar approved these changes Jan 31, 2023

View reviewed changes

kachar merged commit 9e4f3e5 into master Jan 31, 2023

kachar deleted the 1194-pom-e2e-test-update-fix-builds branch January 31, 2023 07:09

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

dimitur2204 commented Dec 22, 2022 •

edited

Loading

kachar commented Dec 22, 2022

dimitur2204 commented Dec 22, 2022

DanielTakev commented Dec 23, 2022 •

edited

Loading

kachar commented Dec 23, 2022

igoychev left a comment

kachar left a comment

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

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

Conversation

dimitur2204 commented Dec 22, 2022 • edited Loading

Motivation and context

New or updated dependencies:

TODO:

TODO:

Environment

New environment variables:

New or updated dependencies:

kachar commented Dec 22, 2022

dimitur2204 commented Dec 22, 2022

DanielTakev commented Dec 23, 2022 • edited Loading

kachar commented Dec 23, 2022

igoychev left a comment

Choose a reason for hiding this comment

kachar left a comment

Choose a reason for hiding this comment

dimitur2204 commented Dec 22, 2022 •

edited

Loading

DanielTakev commented Dec 23, 2022 •

edited

Loading