added testcases covering all major browsers, removed cypress & added …

…playwright 🧪 (reactplay#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]>
VijayBhaDev · Apr 8, 2024 · c95c260 · c95c260
1 parent 80144b3
commit c95c260
Show file tree

Hide file tree

Showing 23 changed files with 753 additions and 1,127 deletions.
diff --git a/.github/workflows/cypress.yml → .github/workflows/playwright-e2e.yml b/.github/workflows/cypress.yml → .github/workflows/playwright-e2e.yml
@@ -1,4 +1,4 @@
-name: Cypress Tests
+name: Playwright e2e Tests
 
 on:
  push:
@@ -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:
@@ -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
@@ -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
diff --git a/.gitignore b/.gitignore
@@ -44,3 +44,7 @@ cypress/e2e/play.cy.ts
 
 # vscode setting
 .vscode
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
diff --git a/README.md b/README.md
@@ -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
 

diff --git a/cypress.config.ts b/cypress.config.ts
diff --git a/cypress/e2e/homePage.cy.ts b/cypress/e2e/homePage.cy.ts
diff --git a/cypress/e2e/ideasPage.cy.ts b/cypress/e2e/ideasPage.cy.ts
diff --git a/cypress/e2e/leaderboardPage.cy.ts b/cypress/e2e/leaderboardPage.cy.ts
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
diff --git a/cypress/support/constant.ts b/cypress/support/constant.ts
diff --git a/cypress/support/e2e.ts b/cypress/support/e2e.ts
diff --git a/e2e/README.md b/e2e/README.md
@@ -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
+```
diff --git a/e2e/pageobjects/enums/constant.ts b/e2e/pageobjects/enums/constant.ts
@@ -0,0 +1,4 @@
+export enum Constant {
+ TRENDING_PLAYS_CARD_COUNT = 5,
+ PARTNERS_SPONSERS_LINKS_COUNT = 10
+}