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

…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]>
reactplay · 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
+}