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 <120472338+shilCode@users.noreply.github.com>
Co-authored-by: Mohat Shil <146836180+mohatShilABB@users.noreply.github.com>
Co-authored-by: Priyankar Pal <88102392+priyankarpal@users.noreply.github.com>

Author: 3 people

.github/workflows/cypress.yml .github/workflows/playwright-e2e.yml.github/workflows/cypress.yml renamed to .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

.gitignore

@@ -44,3 +44,7 @@ cypress/e2e/play.cy.ts
 
 # vscode setting
 .vscode
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

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