End to End Testing for Moped (Playwright)

[mateoclarke]

How could we replace our standard Moped manual Q&A pre-release smoke test with automated testing? Looking to dig into the libraries that do this well in a React front end stack. Maybe watch some Youtube videos and read some tutorials. Then pick a testing library and try it out.

Some options:

• Playwright
• Jest & Puppeteer
• Cypress

Goals:

• evaluate options
• pick a library to experiment with
• implement at least one E2E test from the Q&A script

[mateoclarke]

• LinkedIn Learning: E2E testing with Jest
• Article: React end-to-end testing using Jest and Puppeteer
• Youtube: React Testing Crash Course

Types of testing:

• Unit Testing
• Integration
• E2E

Test libraries and options in the React community:

• Jest - JS test framework and test runner (not just for React) from Facebook
• RTL (React Test Library) - now comes default with CRA. claims to replace Enzyme (made by AirB&B). Meant for testing components but works directly with DOM nodes. Works with Jest.
• Puppeteer - Google open source project. Many of the main contributors moved to Playwright
• Cypress - only supports Firefox & Edge
• Playwright - Microsoft open source project, forked from Puppeteer. Runs across Browser Engines (Chromium, Webkit, Firefox). Made specifically for E2E testing

Comparisons:

• Playwright vs Cypress: A Comparison
• Reddit: Cypress vs Playwright
• https://www.reddit.com/r/reactjs/comments/spu8cm/playwright_vs_cypress/
• https://cathalmacdonnacha.com/cypress-vs-playwright-which-is-best-for-e2e-testing

TL;DR: After more research, I'm circling back to Playwright.