personamanagmentlayer Playwright Expert
Core Concepts
Playwright Framework
- Cross-Browser - Chromium, Firefox, WebKit support
- Auto-Waiting - Smart waits for elements and network
- Browser Contexts - Isolated browser sessions
- Page Objects - Organize test code
- Fixtures - Reusable test setup
- Trace Viewer - Visual debugging
Test Organization
- Test Suites - Grouping related tests
- Hooks - beforeEach, afterEach, beforeAll, afterAll
- Annotations - @skip, @only, @slow, @fail
- Tags - Filter and organize tests
- Parallelization - Concurrent test execution
- Retries - Automatic retry on failure
Advanced Features
- Network Interception - Mock API responses
- Video Recording - Capture test execution
- Screenshots - Visual verification
- Code Generation - Record and generate tests
- Accessibility Testing - Built-in a11y checks
- Mobile Emulation - Test responsive designs
Best Practices
Test Organization
- Use descriptive test names
- Group related tests in describe blocks
- Use page object model for maintainability
- Create reusable fixtures
- Keep tests independent
- Avoid test interdependencies
Selectors
- Prefer user-facing attributes (text, role, label)
- Use data-testid for complex elements
- Avoid CSS selectors tied to styling
- Use getByRole for accessibility
- Chain locators for specificity
- Use nth() judiciously
Assertions
- Use specific expect matchers
- Wait for conditions before asserting
- Use soft assertions for multiple checks
- Provide meaningful error messages
- Test both positive and negative cases
- Verify visual changes with screenshots
Performance
- Run tests in parallel
- Use browser context for isolation
- Reuse authentication state
- Mock external dependencies
- Minimize navigation between pages
- Use API calls for setup/teardown
Anti-Patterns
Common Mistakes
- Using arbitrary waits (page.waitForTimeout)
- Not handling network conditions
- Coupling tests to implementation details
- Missing cleanup in afterEach
- Too many assertions in one test
- Hard-coded test data
Selector Issues
- Using XPath excessively
- Relying on CSS class names
- Not using accessible selectors
- Fragile selectors that break easily
- Over-specific selectors
- Missing data-testid attributes
Test Design Problems
- Tests depending on execution order
- Shared state between tests
- Testing too much in one test
- Not testing edge cases
- Missing error scenarios
- No retry strategy
Reference Documentation
Detailed material lives alongside this skill and is read on demand:
- Implementation Examples — Basic Test Structure, Page Object Model, Custom Fixtures, API Testing and Mocking, Visual Testing and Debugging, Configuration (playwright.config.ts)
Resources
Official Documentation
- Playwright Documentation - Complete guide
- API Reference - API docs
- Best Practices - Guidelines
- Trace Viewer - Debugging tool
Learning Resources
- Playwright YouTube Channel - Video tutorials
- Playwright Examples - Code samples
- Playwright Discord - Community chat
- Awesome Playwright - Curated resources
Tools & Extensions
- VS Code Extension - IDE integration
- Test Generator - Record tests
- Playwright Inspector - Debug tool
- Trace Viewer - Visual debugger
Community Resources
- GitHub Discussions - Q&A
- Stack Overflow - Community help
- Playwright Blog - Updates and articles
- Twitter @playwrightweb - News and tips