Playwright Component Testing

Status: Experimental (since 2022)

Overview

• Cross-framework support (React, Vue, Svelte)
• Real browser testing environment
• Unified tooling with E2E tests (Playwright becomes a E2E standard nowadays)

Known Issues & Tradeoffs

• Unstable API: It's still experimental, things are expected to be breaking
• Lack of the clear MVP plan: All the information is scattered in many Github Issues
• Lack of a clear roadmap: Playwright does not share any public roadmaps
• Rely on prod build: Currently doesn't support HMR and watch mode, not really friendly for gigantic apps with slow build times
• Code coverage: No support yet like in the Jest/Vitest

Adoption Considerations

• New Projects: Consider waiting for stable release
• Existing Projects: Consider waiting for stable release

There are also great alternatives, that allow testing components in real browser:

• Cypress Component Testing
• Storybook Component Testing

Resources

• Official docs
• Community call about making it stable
• Discussion regarding Playwright and Cypress in Vue land
• CLI watch mode discussion
• Code Coverage status