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