Playwright Component Tests: Are they the Testing-Library killer?
summary
Compares Playwright Component Tests and Testing Library by building a Pokedex app and measuring concrete outcomes: Playwright mounts components in a real browser via Vit bundles components, provides automatic screenshots and devtools, supports Testing Library–style queries and CSS selectors, but has no native function mocking and adds fragile cross-process “magic”. Performance example: a 7,000-node test runs about 1.6s vs 10s (Playwright vs Testing Library), visual snapshots and locator auto-retry work, but browser-driven bundling and serialization limits cause surprising gotchas.
AI-written summary · about
chapters (12)
- 0:00Introduction
- 5:02Speaker intro
- 6:52Testing Library limits
- 7:54Playwright component tests
- 9:18Developer experience comparison
- 14:43Debugging failures
- 17:38Mocking differences
- 20:07Visual testing modes
- 23:02Performance and testing environments
- 26:12Component test magic
- 29:04Benchmark results
- 31:34Summary
related talks
26mWe May Not Need Component Testing
13mComponent Testing with Playwright for Vue
20mComponent Testing with Playwright
30mTesting Web Applications with Playwright
30mPlaywright: The Tool That Will Revolutionize End-to-End Testing
28mTesting Web Applications with Playwright
41mWe may not need component (unit) testing
35mState of end-to-end testing for modern web applications