Component Testing with Playwright

on YouTube ↗20m

" summary

Installs via the VS Code extension or CLI, optionally adds GitHub Actions, and runs tests in parallel across Chromium, Firefox and WebKit; code gen records user actions into runnable tests that are then hardened with web‑first assertions and locator best practices (strict mode catches ambiguous selectors). Component testing uses Playwright CT with Vite to mount components in real browsers, supports global CSS imports, captures full traces and a Trace Viewer for stepwise debugging, and produces reports that CI can archive and replay.

AI-written summary · about

" chapters (8)

1. 0:00Introduction to Playwright
2. 0:48Installation and setup
3. 2:26Debugging and locators
4. 4:13Web-first assertions
5. 6:15Code generation for tests
6. 10:03Component testing
7. 15:45Tracing and reporting
8. 17:56CI integration and conclusion

" related talks

• 28mTesting Web Applications with PlaywrightDebbie O'Brien · vuejs.de Conf 2022
• 13mComponent Testing with Playwright for VueDebbie O'Brien · Vueconf.US 2022
• 51mTesting Web Applications with PlaywrightDebbie O'Brien · NDC Oslo 2022
• 30mTesting Web Applications with PlaywrightDebbie O'Brien · Nordic.js 2022
• 20mTesting Web Applications with PlaywrightDebbie O'Brien · TestJS Summit 2022
• 17mTesting with Playwright in an AI-Assisted Development WorldDebbie O'Brien · Frontend Nation 2024
• 39mTesting Web Applications with PlaywrightDebbie O'Brien · Craft Conference 2022
• 16me2e testing with PlaywrightDebbie O'Brien · Microsoft Build 2023