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