Ako/80792/ end to end setup using playwright #7332

ali-hosseini-deriv · 2023-01-09T07:36:18Z

Changes:

Playwright setup
Signup flow implementation
Remove Old End to end setup

When you need to add unit test

If this change disrupt current flow
If this change is adding new flow

When you need to add integration test

If components from external libraries are being used to define the flow, e.g. @deriv/components
If it relies on a very specific set of props with no default behavior for the current component.

Test coverage checklist (for reviewer)

Ensure utility / function has a test case
Ensure all the tests are passing

Type of change

…ing of the tests

… ako/80792/playwright-setup

vercel · 2023-01-09T07:36:21Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
deriv-app	❌ Failed (Inspect)			Feb 5, 2023 at 0:12AM (UTC)

github-actions · 2023-01-09T07:48:18Z

A production App ID was automatically generated for this PR. (log)

PR: Ako/80792/ end to end setup using playwright #7332
URLs:
- w/ App ID + Server: https://deriv-app-git-fork-ali-hosseini-deriv-ako-80792playwright-setup.binary.sx?qa_server=frontend.binaryws.com&app_id=32818
- Original: https://deriv-app-git-fork-ali-hosseini-deriv-ako-80792playwright-setup.binary.sx
App ID: 32818

Click here to copy & paste above information.

- **PR**: [https://github.com/binary-com/deriv-app/pull/7332](https://github.com/binary-com/deriv-app/pull/7332)
- **URLs**:
    - **w/ App ID + Server**: https://deriv-app-git-fork-ali-hosseini-deriv-ako-80792playwright-setup.binary.sx?qa_server=frontend.binaryws.com&app_id=32818
    - **Original**: https://deriv-app-git-fork-ali-hosseini-deriv-ako-80792playwright-setup.binary.sx
- **App ID**: `32818`

codecov-commenter · 2023-01-09T07:53:48Z

Codecov Report

Merging #7332 (3030c0d) into develop (b134c88) will not change coverage.
The diff coverage is n/a.

❗ Current head 3030c0d differs from pull request most recent head 5bd32e8. Consider uploading reports for the commit 5bd32e8 to get more accurate results

@@           Coverage Diff            @@
##           develop    #7332   +/-   ##
========================================
  Coverage    19.40%   19.40%           
========================================
  Files         1478     1478           
  Lines        34569    34569           
  Branches      6366     6366           
========================================
  Hits          6709     6709           
  Misses       27349    27349           
  Partials       511      511

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

end-to-end-test/package.json

end-to-end-test/.env.example

end-to-end-test/.github/workflows/playwright.yml

end-to-end-test/tests/onboarding/onboarding.ts

shayan-deriv · 2023-01-12T17:46:53Z

end-to-end-test/tests/onboarding/onboarding.ts

+        await this.page.waitForSelector(
+            '#app_contents > .dc-themed-scrollbars > form > .dc-input:nth-child(2) > .dc-input__field'
+        );
+        await this.page.click(
+            '#app_contents > .dc-themed-scrollbars > form > .dc-input:nth-child(2) > .dc-input__field'
+        );
+
+        await this.page.waitForSelector(
+            '#app_contents > .dc-themed-scrollbars > form > .dc-input:nth-child(2) > .dc-input__field'
+        );
+        await this.page.click(
+            '#app_contents > .dc-themed-scrollbars > form > .dc-input:nth-child(2) > .dc-input__field'
+        );
+
+        await this.page.waitForSelector(
+            '#app_contents > .dc-themed-scrollbars > form > .dc-input:nth-child(2) > .dc-input__field'
+        );


Do we need these lines? 🤔
because in line 40 we are getting the target element and doing actions on it and for that parts we don't need to use WaitForElement since playwright will wait for the element to be ready before performing any actions (according to the doc)

as far as i understood this happens when we use page.locator api, correct?

end-to-end-test/tests/onboarding/onboarding.ts

shayan-deriv · 2023-01-12T18:05:03Z

end-to-end-test/tests/onboarding/onboarding.ts

+            await this.page.click('.dc-themed-scrollbars > form > div:nth-child(6) > .dc-checkbox > .dc-checkbox__box');
+        }
+
+        await this.page.waitForSelector('#deriv_app > #app_contents > .dc-themed-scrollbars > form > .dc-btn--primary');


again we don't need to use waitForSelector

… ako/80792/playwright-setup

github-actions · 2023-01-17T08:38:59Z

🚨 Lighthouse report for the changes in this PR:

Category	Score
🔺 Performance	16
🟧 Accessibility	73
🟢 Best practices	92
🟧 SEO	85
🟢 PWA	90

Lighthouse ran with https://deriv-app-git-fork-ali-hosseini-deriv-ako-80792playwright-setup.binary.sx/

shayan-deriv · 2023-01-24T05:54:41Z

end-to-end-test/tests/onboarding/onboarding.ts

+        await this.signupPage.locator('input[name=email]#dm-email-input').type(this.email);
+        process.env.email = this.email;
+        await this.signupPage.waitForSelector(
+            '.signup__Form-sc-1bdbun8-1 > ._signup-new__SignupContent-sc-1f1r3le-0 > label > .checkbox__CheckboxContainer-sc-r1zf4m-0 > .checkbox__StyledCheckbox-sc-r1zf4m-3'


I'm not sure but AFAIK these generated hashed class names changes and when that happens your these tests will fail. is that correct?

yess, you are right. i need to update them.
didn't notice that since they are auto generated

done @shayan-deriv
would you please check one more time?

… ako/80792/playwright-setup

* fix: exit button issue * fix: hide currency selection modal if user has an mf mt5 account * fix: fixed an error in mobile mode and added isOnboardingVisited again * fix: remove toggleExitTradersHubModal action from traders-hub-store * fix: css styles * fix: currency selector for EU demo * fix: currency auto selecting first currency after refresh * fix: tradershub header issues on mobile * fix: multipliers_status_badge * fix: demo_low_risk flg in tradershub store * fix: add or remove modal * fix: reloading of account_switcher * chore: update currency switcher styles * chore: hide derivx for low_risk_cr_eu clients for real and demo * chore: update styles for currency switcher * fix: mt5 dashboard fix * fix: test cases * fix: test case * fix: fixed the alignment issue of password-selection-modal * fix: switching on exit traders modal * chore: show appropriate information on the account switcher in the old UI * fix: next button disabled in eu signup * fix: test case fix * fix: account switcher * fix: manage account in account switcher * fix: dxtrade error * fix: redirecting for traders_hub * fix: header traders hub cursor pointer * fix: acc switcher * fix: fixing issues of the tour guide * fix: change regulations to regulation * fix: regulations v2 * fix: icon and message * fix: cursor pointer for status badge * fix: mf real account signup width * fix: real account signup modal * fix: place of birth for eu * fix: tests * fix: fixed the scroll issue and added a new condition to tour guide * fix: removed the redundant line of trading-hub-header * fix: made a small change for the handle scroll function * fix: replaced interval with timeout * fix: hide idv for EU * fix: some capital characters * fix: signup modal title * fix: regulation compare table scroll smooth * fix: compare account modal * fix: responsive alignment * fix: fix popup content * fix: malta description fix and styles * fix: regulation responsive scroll * fix: compare account modal * fix: update jurisdiction content * fix: jurisdiction content * fix: get_more_btn * fix: regulators * fix: css for account type dropdown * fix: add options account for eu * fix: onboarding content desc * fix: onboarding content at stage 5 * fix: onboarding platform names * chore: hide region for new accounts * fix: add options account * fix: design-difference-in-transfer-popup * fix: regulator table scroll * fix: success modal meesage * fix: responsive scroll dashboard * fix: regulation switcher appearing for high risk * fix: 86699_stock_to_stocks * fix: fix add new account * fix: traders hub header dark theme icon * fix: tooltip description for non-eu * fix: dropdown icon for onboarding currency switcher * fix: add short code text for derived and financial accounts * fix: eu currency switcher showing in non-eu * fix: change dmt5 to deriv mt5 in total assets * fix: cfd learn more link * test: fix tests * fix: dark_mode_status_badge * fix: add icon for deriv and financial accounts in receipt * refactor: code refactoring * fix: transfer now to top-up now * fix: total assets to be shown based on selected region * fix: total assets to be shown based on selected region * fix: loginid error on logout * fix: show popover in mobile * fix: disable click on tourguide overlay and remove setting accountType on tour guide * fix: onboarding footer * fix: test failure * fix: fixed the background color issue of onboarding in dark theme * fix: region seitcher in mobile view * fix: fixed the glitch issue with onboarding * fix: fixed the issue of tour guide * fix: dont show loader if user has no account when switching * fix: deposit now style in cashier transfer modal * fix: dashboard title size * fix: decreased the delays * fix: redirect to static pages * fix: fixed the localization issue of tour guide * fix: remove balance when account has mt5 status * fix: regulation switcher glitch in high risk * fix: onboarding labels * fix: pointer display * fix: status badge icon overflow and total assets currency in dark theme * fix: success_message * fix: minor issues in contents * fix: account from field should be tha same as trading account * trigger codecov * fix: top-up to transfer * fix: switch account to real for demo_low_risk * fix: can create deriv x account if user has no cr account and status badge icon css * fix: status badge color inconsistency and size * fix: deriv x trade modal huawei css * fix: jurisdiction modal content * Account fix selected to (#27) * fix: default selected to account * fix: account transfer switch to default client acc * fix: onboarding footer text padding * fix: real account needed modal for mt5 if user has no cr account * fix: eu onboarding footer * fix: redirect_to_traders_hub_on_entering_mt5_url * fix: redirect derivx url * fix: icon design mismatch (#26) * fix: simplified the conditions * test: fix test * fix: fixed all conflicts * refactor: code refactoring * fix: salutation * fix: short code visibility * fix: fix short code visibility * refactor: code refactoring * fix: remove icon for derivx trade modal * fix: fixed the issue where is_pre_appstore was retrived from another place * fix: add Assets alias to webpack/tsconfig, refactor imports * test: fix jest config * fix: default page should be demo in onboarding * fix: freeze_mg_acc_on_cooling_perios * fix: onboarding buttons * fix: transfer_form_from_account_style * fix: mt5 trade modal css alignment * chore: hide disclaimer for low-risk clients * fix: notification console error * chore: add volatility in regulator modal * fix: account_transfer_title * chore: add disclamer to low risk eu * fix: asterik_on_required_fields * fix: adding loader to total asset balance on switching * fix: loader * fix: loader console error * fix: regulation switcher glitch when switching * fix: add back react content loader * fix: safari styling shiii * fix: close button on on boarding * fix: Trader's hub title * fix: disclaimer text change * fix: all dem loaders * fix: up/dpwn icon * fix: dmt5 paswrd * fix: low_risk flag in dbot * fix: fix layout shift on safari * fix: servererror component fix * fix: circleci and typo * fix: header loader * fix: investor password * fix: merge conflicts --------- Co-authored-by: amina-deriv <amina@deriv.com> Co-authored-by: mahdiyeh-deriv <82078941+mahdiyeh-deriv@users.noreply.github.com> Co-authored-by: Thisyahlen <thisyahlen@regentmarkets.com> Co-authored-by: Hirad <hirad@re-work.dev> Co-authored-by: mahdiyeh-fs <mahdiyeh@firstsource.tech> Co-authored-by: Jim Daniels Wasswa <jim@deriv.com> Co-authored-by: Thisyahlen Nair <thisyahlennair@Thisyahlens-MacBook-Pro.local> Co-authored-by: Bahar <bahar@regentmarkets.com> Co-authored-by: george-usynin-binary <heorhi@binary.com> Co-authored-by: GeorgeUsynin <70709786+GeorgeUsynin@users.noreply.github.com>

Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com>

* fix: exit modal fix * chore: empty commit to trigger vercel deployment --------- Co-authored-by: Matin shafiei <matin@deriv.com>

Co-authored-by: Yashim Wong <yashim@deriv.com>

* fix: cfd listing * chore: empty commit to trigger vercel deployment --------- Co-authored-by: Matin shafiei <matin@deriv.com>

… ako/80792/playwright-setup

github-actions · 2023-02-01T14:09:52Z

⏳ Generating Lighthouse report...

…o ako/80792/playwright-setup

sonarcloud · 2023-02-05T12:13:45Z

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
No Duplication information

ali-hosseini-deriv · 2023-02-05T13:41:22Z

closing this and opening a new PR because of lots of unneeded changes included in this one.
New PR Link
#7524

Ali(Ako) Hosseini and others added 17 commits December 12, 2022 17:57

feat: end-to-end test setup

8fe606f

docs: add env example file

778a824

test: endpoint change setup

f1f296d

test: signup flow e2e

66dbd54

test: deriv.com signup finalization

dce6e06

test: register client and sign in thorugh email

7e1f55c

test(e2e): done with signup flow

fb26562

docs: update env example file

d2981f0

feat: add global setup file to run the onboarding flow and the beginn…

31a6675

…ing of the tests

test: check endpoint checkbox base on env variables

e83bba8

build: update playwright to 1.29

412cb5b

test: add dummy test to check the signup flow

b0df028

Merge branch 'master' of https://github.com/binary-com/deriv-app into…

307234b

… ako/80792/playwright-setup

build: move playwright to dependencies

ad1020c

docs: add readme

2023111

build: remove useless credentials from config file

1fa757a

test: remove pre-appstore checkbox test case

90fdfdf

boring-cyborg bot added the Docs label Jan 9, 2023

vercel bot deployed to Preview January 9, 2023 07:47 View deployment

Ako added 2 commits January 9, 2023 13:03

test: get county of residence from environment variable

3030c0d

test: remove old e2e setup

5bd32e8

ali-hosseini-deriv changed the base branch from master to develop January 9, 2023 09:47

vercel bot deployed to Preview January 9, 2023 09:57 View deployment

shayan-deriv reviewed Jan 11, 2023

View reviewed changes

shayan-deriv reviewed Jan 12, 2023

View reviewed changes

Ako added 2 commits January 15, 2023 15:38

docs: update .env.example file

f6b65db

build: remove useless entry point

ca8cb08

Ako added 3 commits January 17, 2023 11:48

test: revert back e2e_tests dir to fix conflict

2a32b4a

Merge branch 'master' of https://github.com/binary-com/deriv-app into…

d0e4330

… ako/80792/playwright-setup

test: remove old e2e directory since its useless

ad73186

vercel bot deployed to Preview January 17, 2023 08:38 View deployment

shayan-deriv reviewed Jan 24, 2023

View reviewed changes

Ako and others added 11 commits January 25, 2023 20:37

Merge branch 'master' of https://github.com/binary-com/deriv-app into…

9295f0e

… ako/80792/playwright-setup

translations: 📚 sync translations with crowdin (binary-com#7458)

7bee728

Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com>

translations: 📚 sync translations with crowdin (binary-com#7460)

f2ab45e

Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com>

translations: 📚 sync translations with crowdin (binary-com#7461)

b6d9d79

Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com>

chore: remove boom description for eu regulation (binary-com#7467)

85816b1

Amina/87406/fix: exit modal fix (binary-com#7464)

785bf3b

* fix: exit modal fix * chore: empty commit to trigger vercel deployment --------- Co-authored-by: Matin shafiei <matin@deriv.com>

fix: empty notification dropdown (binary-com#7468)

5745911

Co-authored-by: Yashim Wong <yashim@deriv.com>

fix: close_button_on_responsive (binary-com#7465)

97ee690

Amina/fix: cfd listing fix (binary-com#7463)

0dde792

* fix: cfd listing * chore: empty commit to trigger vercel deployment --------- Co-authored-by: Matin shafiei <matin@deriv.com>

Merge branch 'master' of https://github.com/binary-com/deriv-app into…

1a7312a

… ako/80792/playwright-setup

vercel bot deployed to Preview February 1, 2023 12:58 View deployment

feat: update terms and conditions selector

6058e8f

vercel bot had a problem deploying to Preview February 1, 2023 14:09 Failure

vercel bot had a problem deploying to Preview February 5, 2023 11:43 Failure

ali-hosseini-deriv force-pushed the ako/80792/playwright-setup branch from 855c237 to 6058e8f Compare February 5, 2023 11:50

Merge branch 'develop' of https://github.com/binary-com/deriv-app int…

c310974

…o ako/80792/playwright-setup

vercel bot had a problem deploying to Preview February 5, 2023 12:00 Failure

chore: revert everything except end-to-end test to develop

6b0f17c

vercel bot had a problem deploying to Preview February 5, 2023 12:12 Failure

ali-hosseini-deriv closed this Feb 5, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Ako/80792/ end to end setup using playwright #7332

Ako/80792/ end to end setup using playwright #7332

ali-hosseini-deriv commented Jan 9, 2023 •

edited

Loading

vercel bot commented Jan 9, 2023 •

edited

Loading

github-actions bot commented Jan 9, 2023 •

edited

Loading

codecov-commenter commented Jan 9, 2023 •

edited

Loading

shayan-deriv Jan 12, 2023

ali-hosseini-deriv Jan 15, 2023

shayan-deriv Jan 12, 2023

github-actions bot commented Jan 17, 2023 •

edited

Loading

shayan-deriv Jan 24, 2023

ali-hosseini-deriv Jan 24, 2023

ali-hosseini-deriv Feb 1, 2023

github-actions bot commented Feb 1, 2023 •

edited

Loading

sonarcloud bot commented Feb 5, 2023

ali-hosseini-deriv commented Feb 5, 2023

Ako/80792/ end to end setup using playwright #7332

Ako/80792/ end to end setup using playwright #7332

Conversation

ali-hosseini-deriv commented Jan 9, 2023 • edited Loading

Changes:

When you need to add unit test

When you need to add integration test

Test coverage checklist (for reviewer)

Type of change

vercel bot commented Jan 9, 2023 • edited Loading

github-actions bot commented Jan 9, 2023 • edited Loading

codecov-commenter commented Jan 9, 2023 • edited Loading

Codecov Report

shayan-deriv Jan 12, 2023

Choose a reason for hiding this comment

ali-hosseini-deriv Jan 15, 2023

Choose a reason for hiding this comment

shayan-deriv Jan 12, 2023

Choose a reason for hiding this comment

github-actions bot commented Jan 17, 2023 • edited Loading

shayan-deriv Jan 24, 2023

Choose a reason for hiding this comment

ali-hosseini-deriv Jan 24, 2023

Choose a reason for hiding this comment

ali-hosseini-deriv Feb 1, 2023

Choose a reason for hiding this comment

github-actions bot commented Feb 1, 2023 • edited Loading

sonarcloud bot commented Feb 5, 2023

ali-hosseini-deriv commented Feb 5, 2023

ali-hosseini-deriv commented Jan 9, 2023 •

edited

Loading

vercel bot commented Jan 9, 2023 •

edited

Loading

github-actions bot commented Jan 9, 2023 •

edited

Loading

codecov-commenter commented Jan 9, 2023 •

edited

Loading

github-actions bot commented Jan 17, 2023 •

edited

Loading

github-actions bot commented Feb 1, 2023 •

edited

Loading