webapp-testing
Comprehensive web application testing patterns with Playwright selectors, wait strategies, and best practices
By bobmatnyc · 353 installs
npx skills add bobmatnyc/claude-mpm-skills --skill webapp-testing
Source repository · Upstream listing
Playwright Patterns Reference
Complete guide to Playwright automation patterns, selectors, and best practices.
Table of Contents
[Selectors]( selectors)
[Wait Strategies]( wait strategies)
[Element Interactions]( element interactions)
[Assertions]( assertions)
[Test Organization]( test organization)
[Network Interception]( network interception)
[Screenshots and Videos]( screenshots and videos)
[Debugging]( debugging)
[Parallel Execution]( parallel execution)
Selectors
Text Selectors
Most readable and maintainable approach when text is unique:
Role Based Selectors
Semantic selectors based on ARIA roles:
CSS Selectors
Traditional CSS selectors for precise targeting:
XPath Selectors
For complex DOM navigation:
Data Attributes
Best practice for test specific selectors:
Chaining Selectors
Combine selectors for precision:
Selector Best Practices
Priority order (most stable to least stable):
1. data testid attributes (most stable)
2. role= selectors (semantic, accessible)
3. text= selectors (readable, but text may change)
4. id attributes (stable if not dynamic)
5. CSS classes (less stable, may change with styling)
6. XPath (fragile, avoid if possible)
Wait Strategies
Load State Waits
Essential for dynamic applications:
Element Waits
Wait for specific elements before interacting:
Timeout Waits
Fixed time delays (use sparingly):
Custom Wait Conditions
Wait for JavaScript conditions:
Auto Waiting
Playwright automatically waits for elements to be actionable:
Element Interactions
Clicking
Filling Forms
Dropdowns and Selects
Checkboxes and Radio Buttons
File Uploads
Hover and Focus
Assertions
Element Visibility
Text Content
Element State
Attributes and Values
Count and Collections
Test Organization
Basic Test Structure
Using Pytest (Recommended)
Test Grouping with Describe Blocks
Setup and Teardown
Network Interception
Mock API Responses
Block Resources
Wait for Network Responses
Screenshots and Videos
Screenshots
Video Recording
Debugging
Pause Execution
Console Logs
Slow Motion
Verbose Logging
Parallel Execution
Pytest Parallel
Browser Context Isolation