added testcases covering all major browsers, removed cypress & added playwright 🧪

[shilCode]

First thing, PLEASE READ THIS: ReactPlay Code Review Checklist

Description

Firstof all, love the work all of you are doing! I was trying to learn react and as a QA engineer myself the testing bit caught my eye (obiously) or atleast lack of robustness of it did. So in this pr I tried to write some critcal path e2e tests to contribute atleast something to react-play community. I wanted to write on top of the already present cypress test-cases however soon realized there aren't that much of tests so wanted to give capability of mutil-browser such as firefox and safari - thus added playwright and removed all cypress dependencies. Playwright is much better than cypress, there are millions of documents which will say that but I use both in my day to day work so it doesn't matter to me much but in this case I think playwright suits better. I made sure nothings breaks with this change and all the previous tests are covered as much as possible. In a future pull request I will try to add mobile capability

To view all the changes I made checkout my commit messages, but here are some big changes I made:

1. Removed Cypress fully
2. Added Playwright
3. Wrote 18 testcases per browser for 3 browser

Fixes # (issue)

Type of change

Please delete options that are not relevant.

• [ ] Bug fix (non-breaking change which fixes an issue)
• [X] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [X] This change requires a documentation update

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce.

enhanced testing capabilities itself attaching html report

Checklist:

• [X] I have performed a self-review of my own code
• [X] I have commented my code, particularly in hard-to-understand areas
• [X] I have made corresponding changes to the documentation
• [X] My changes generate no new warnings
• [X] I have added tests that prove my fix is effective or that my feature works
• [X] New and existing unit tests pass locally with my changes
• [X] Any dependent changes have been merged and published in downstream modules

Screenshots or example output

playwright-report.zip

[netlify[bot]]

✅ Deploy Preview for reactplayio ready!

Name	Link
🔨 Latest commit	1ef19fa677fe665edd483057aed4d2bdec418e29
🔍 Latest deploy log	https://app.netlify.com/sites/reactplayio/deploys/6612140e6bed7800088ac8a5
😎 Deploy Preview	https://deploy-preview-1481--reactplayio.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[priyankarpal]

will check soon

[priyankarpal]

there are a few failed test cases & most of them have the same error.

Error: page.goto: net::ERR_CONNECTION_REFUSED at http://localhost:3000/
Call log:
  - navigating to "http://localhost:3000/", waiting until "load"


  4 |
  5 | test.beforeEach(async ({ page }) => {
> 6 |   await page.goto('/');
    |              ^
  7 |   await page.waitForLoadState('domcontentloaded');
  8 | });
  9 |

    at /workspaces/react-play/e2e/tests/homepage.spec.ts:6:14

[shilCode]

there are a few failed test cases & most of them have the same error.

Error: page.goto: net::ERR_CONNECTION_REFUSED at http://localhost:3000/
Call log:
  - navigating to "http://localhost:3000/", waiting until "load"


  4 |
  5 | test.beforeEach(async ({ page }) => {
> 6 |   await page.goto('/');
    |              ^
  7 |   await page.waitForLoadState('domcontentloaded');
  8 | });
  9 |

    at /workspaces/react-play/e2e/tests/homepage.spec.ts:6:14

Thanks @priyankarpal for reviewing the pr 🙂 The issue that you are facing could be due to pw cannot find the /ideas path, if you can kindly pass me some more info so I can review it better 🙏and fix the root-cause so that no-one else face it.

1. I suggest to try to navigate to the url in any browser <localhost>/ideas if that is reachable but while running pnpm e2e or npm run e2e it occurs then its a pw issue. Also note dev envrionment needs to be actively running to test pnpm dev or pnpm start otherwise url configuration is required in playwright.config.ts file > baseURL line
2. Consider running the ideaspage.spec.ts file in --headed mode: to achieve that use npx playwright test ideaspage.spec.ts --debug --retries=0 --reporter=list,html --worker=1 this will open the test in browser and "playwright inspector", in the inspector use step over button to go through step by step each line. when the tests will fail it will provide a report - which should be at playwright-report folder - if you can zip the folder and provide me that I can debug as well.

so basically if /ideas path is changed in dev environment than pw cannot parse through that, user need to adjust the test goto path manually.

here is a gif version of mentioned steps

you can also use official playwright official extention to repro it in visual way however it might not provide reports properly.

again thanks for looking into this 🙂

[priyankarpal]

ok ok let me try this

[priyankarpal]

working 🚀