Skip to content

Commit

Permalink
added testcases covering all major browsers, removed cypress & added …
Browse files Browse the repository at this point in the history
…playwright 🧪 (#1481)

* removed cypress & installed playwright

- removed cypress (still need to remove folders and update readme.md)
- installed playwright
- wrote first few tests (homepage)

* added more devices to test & completed homepage

- firefox and chrome added
- completed homepage fully (need to convert to po still)
- create npm/yarn e2e script

* rm'ed cy dir, added more tests & fixed README

- removed cypress directory since all the tests are covered
- converted homepage to pageobject
- added ideaspage and also added po for it
- fixed main readme file to adjust to playwright
- added plays.spec to write more tests later

* complete set e2e tests added

- removed cypress.yml and added pw yml
- using list reporter instaed of line reporter
- added full sets of tests

* comment resolve - typo broweBtn

---------

Signed-off-by: Mohat Shil <[email protected]>
Co-authored-by: Mohat Shil <[email protected]>
Co-authored-by: Priyankar Pal <[email protected]>
  • Loading branch information
3 people authored Apr 8, 2024
1 parent 80144b3 commit c95c260
Show file tree
Hide file tree
Showing 23 changed files with 753 additions and 1,127 deletions.
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
name: Cypress Tests
name: Playwright e2e Tests

on:
push:
Expand All @@ -10,7 +10,7 @@ concurrency:
group: environment-${{ github.ref }}
cancel-in-progress: true
jobs:
cypress-run:
playwright-run:
runs-on: ubuntu-latest
if: github.repository == 'reactplay/react-play'
steps:
Expand All @@ -21,9 +21,9 @@ jobs:
npm install --legacy-peer-deps
# Install NPM dependencies, cache them correctly
# and run all Cypress tests
- name: Cypress run
uses: cypress-io/github-action@v4
# and run all Playwright tests
- name: Playwright run
uses: actions/checkout@v4
with:
install-command: |
npm install --legacy-peer-deps
Expand All @@ -33,3 +33,15 @@ jobs:
env:
# pass GitHub token to detect new build vs re-run build
GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
- name: Install dependencies
run: npm ci
- name: Install Playwright Browsers
run: npx playwright install --with-deps
- name: Run Playwright tests
run: yarn e2e
- uses: actions/upload-artifact@v4
if: always()
with:
name: playwright-report
path: playwright-report/
retention-days: 30
4 changes: 4 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -44,3 +44,7 @@ cypress/e2e/play.cy.ts

# vscode setting
.vscode
/test-results/
/playwright-report/
/blob-report/
/playwright/.cache/
27 changes: 20 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -196,21 +196,34 @@ npm build

It builds the app for production to the `build` folder. It correctly bundles React in production mode and optimizes the build for the best performance. The build is minified and the filenames include the hashes.

### 🧪 Test App Locally (E2E with Cypress)
--------------------------------------------------------------

Use the following command to run cypress locally:
### 🧪 Test App Locally (E2E with Playwright)

Use the following command to install browser(s) binaries to test locally:
```bash
yarn cypress:open
yarn install playwright
```
OR
```
npm run cypress:open
npm install playwright
```

It will open the cypress dashboard, through which you need to select `E2E Testing`.
Once you are done with the selection you will get options to choose your preferred browser in which you want to run the test.!
Once you select the browser you need to click on `Start E2E Testing in <SELECTED_BROWSER_NAME>.` The chosen browser will pop up you can see a list of cypress tests, click on the test to start testing.!
Use the following command to run Playwright tests:

```bash
yarn e2e
```
OR
```
npm run e2e
```
👀 Read more about testing in [react-play](../react-play/e2e/README.md)

👀 Read more about playwright: https://playwright.dev/

--------------------------------------------------------------


### 🚀 Deploy

Expand Down
11 changes: 0 additions & 11 deletions cypress.config.ts

This file was deleted.

33 changes: 0 additions & 33 deletions cypress/e2e/homePage.cy.ts

This file was deleted.

11 changes: 0 additions & 11 deletions cypress/e2e/ideasPage.cy.ts

This file was deleted.

11 changes: 0 additions & 11 deletions cypress/e2e/leaderboardPage.cy.ts

This file was deleted.

54 changes: 0 additions & 54 deletions cypress/support/commands.ts

This file was deleted.

2 changes: 0 additions & 2 deletions cypress/support/constant.ts

This file was deleted.

20 changes: 0 additions & 20 deletions cypress/support/e2e.ts

This file was deleted.

30 changes: 30 additions & 0 deletions e2e/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
## Purpose

To test and provide good quality to react-play users. Making sure all of the basic path are functional and does not break user flow.

test-case written for

- home
- /plays
- /ideas

Tests written followed simple page object rules, to keep the locaters segreggated and all the relevant reusable methods in the page files described at playwright docs, read more at: https://playwright.dev/docs/pom


### To run the test-cases use

```
yarn e2e
```

OR

```
npm run e2e
```

to debug test-cases use

```
yarn playwright test <test-file.spec.ts> --debug
```
4 changes: 4 additions & 0 deletions e2e/pageobjects/enums/constant.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
export enum Constant {
TRENDING_PLAYS_CARD_COUNT = 5,
PARTNERS_SPONSERS_LINKS_COUNT = 10
}
Loading

0 comments on commit c95c260

Please sign in to comment.