Playwright Codegen Advanced: Device Emulation, Auth State, and VS Code Integration
Basic Codegen records clicks. Advanced Codegen records with auth state, specific devices, custom viewports, and integrates with VS Code for inline recording.
🎠Want to master this with real projects? Join the Playwright Automation Mastery course at The Testing Academy.
Contents
Record with Device Emulation
npx playwright codegen --device="iPhone 13" https://your-app.com
npx playwright codegen --device="Pixel 5" https://your-app.com
npx playwright codegen --viewport-size=1280,720 https://your-app.comRecord with Auth State
# Save auth state first
npx playwright codegen --save-storage=auth.json https://your-app.com
# Then record with auth loaded
npx playwright codegen --load-storage=auth.json https://your-app.com/dashboard🚀 Level Up Your Playwright
From locators to CI pipelines — build a production-grade Playwright + TypeScript framework step by step.
VS Code Extension Recording
- Install “Playwright Test for VS Code” extension
- Click “Record new” in Testing sidebar
- Browser opens — interact normally
- Code generates inline in your test file
- Pick locators by hovering elements
Refactoring Workflow
- Record with Codegen (raw output)
- Replace CSS selectors with getByRole
- Add meaningful assertions
- Extract to Page Object
- Add test data setup via API
🎓 Master Playwright End to End
Join hundreds of SDETs building real automation frameworks. Lifetime access, hands-on projects, and a job-ready portfolio.
