chore: refactor e2e tests to playwright

[mahdikhashan]

Final Report GSoC 2024

• Student Name: Mahdi Khashan
• Organization: Webpack
• Mentors: @snitin315 @alexander-akait @evenstensberg
• Project: webpack-dev-server end to end tests refactor

---

Project

The project has been to substitute Puppeteer framework with MS Playwright in webpack-dev-server project and refactor tests afterward.

I have set up Playwright and configured it in a way to be similar to the existing code, I have extended the default test object and added a custom matcher for snapshot comparison of objects and arrays. Since previously Jest was used as Puppeteer's test runner and Playwright has its own runner, I have added Sinon.js as a mock / stubbing library.

Tests are ran over Linux, Mac and Windows using node 18, 20 and 22. The code coverage is calculated using nyc and instanbul and it's babel plugin and pushed to CodeCov.

Constraints and Future Improvement

Since by using the Playwright we could benefit from its flaky test marking mechanism, some tests are labeled as flaky which we may want to refactor them later.

Additionally, some tests were failing which I decided to do a root-cause analysis and figured out that by replacing default-gateway npm package, it could pass them successfully. (link to pr)

Thank you

I want to sincerely thank Webpack team member @evenstensberg for taking the time to review my proposal for the project in advance. Special thanks to my mentors @snitin315 and @alexander-akait which helped me when I ran into any issues or had questions.

---

WIP: will refactors tests one by one and rename the e2e-playwright folder to e2e after its done

• This is a bugfix
• This is a feature
• This is a code refactor
• This is a test update
• This is a docs update
• This is a metadata update

For Bugs and Features; did you add new tests?

Motivation / Use-Case

It will introduce playwright in the project to replace the existing puppeteer end to end framework.

Breaking Changes

Additional Info