webapp-testing
Comprehensive web application testing patterns with Playwright selectors, wait strategies, and best practices
- Installs
- 442
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/bobmatnyc/claude-mpm-skills --skill webapp-testing- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads webapp-testing automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Playwright Patterns Reference
Complete guide to Playwright automation patterns, selectors, and best practices.
Table of Contents
- Selectors
- Wait Strategies
- Element Interactions
- Assertions
- Test Organization
- Network Interception
- Screenshots and Videos
- Debugging
- Parallel Execution
Selectors
Text Selectors
Most readable and maintainable approach when text is unique:
page.click('text=Login')
page.click('text="Sign Up"') # Exact match
page.click('text=/log.*in/i') # Regex, case-insensitive
Role-Based Selectors
Semantic selectors based on ARIA roles:
page.click('role=button[name="Submit"]')
page.fill('role=textbox[name="Email"]', 'user@example.com')
page.click('role=link[name="Learn more"]')
page.check('role=checkbox[name="Accept terms"]')
CSS Selectors
Traditional CSS selectors for precise targeting:
page.click('#submit-button')
page.fill('.email-input', 'user@example.com')
page.click('button.primary')
page.click('nav > ul > li:first-child')
XPath Selectors
For complex DOM navigation:
page.click('xpath=//button[contains(text(), "Submit")]')
page.click('xpath=//div[@class="modal"]//button[@type="submit"]')
Data Attributes
Best practice for test-specific selectors:
page.click('[data-testid="submit-btn"]')
page.fill('[data-test="email-input"]', 'test@example.com')
Chaining Selectors
Combine selectors for precision:
page.locator('div.modal').locator('button.submit').click()
page.locator('role=dialog').locator('text=Confirm').click()
Selector Best Practices
Priority order (most stable to least stable):
data-testidattributes (most stable)role=selectors (semantic, accessible)text=selectors (readable, but text may change)idattributes (stable if not dynamic)- CSS classes (less stable, may change with styling)
- XPath (fragile, avoid if possible)
Wait Strategies
Load State Waits
Essential for dynamic applications:
# Wait for network to be idle (most common)
page.goto('http://localhost:3000')
page.wait_for_load_state('networkidle')
# Wait for DOM to be ready
page.wait_for_load_state('domcontentloaded')
# Wait for full load including images
page.wait_for_load_state('load')
Element Waits
Wait for specific elements before interacting:
# Wait for element to be visible
page.wait_for_selector('button.submit', state='visible')
# Wait for element to be hidden
page.wait_for_selector('.loading-spinner', state='hidden')
# Wait for element to exist in DOM (may not be visible)
page.wait_for_selector('.modal', state='attached')
# Wait for element to be removed from DOM
page.wait_for_selector('.error-message', state='detached')
Timeout Waits
Fixed time delays (use sparingly):
# Wait for animations to complete
page.wait_for_timeout(500)
# Wait for delayed content (better to use wait_for_selector)
page.wait_for_timeout(2000)
Custom Wait Conditions
Wait for JavaScript conditions:
# Wait for custom JavaScript condition
page.wait_for_function('() => document.querySelector(".data").innerText !== "Loading..."')
# Wait for variable to be set
page.wait_for_function('() => window.appReady === true')
Auto-Waiting
Playwright automatically waits for elements to be actionable:
# These automatically wait for element to be:
# - Visible
# - Stable (not animating)
# - Enabled (not disabled)
# - Not obscured by other elements
page.click('button.submit') # Auto-waits
page.fill('input.email', 'test@example.com') # Auto-waits
Element Interactions
Clicking
# Basic click
page.click('button.submit')
# Click with options
page.click('button.submit', button='right') # Right-click
page.click('button.submit', click_count=2) # Double-click
page.click('button.submit', modifiers=['Control']) # Ctrl+click
# Force click (bypass actionability checks)
page.click('button.submit', force=True)
Filling Forms
# Text inputs
page.fill('input[name="email"]', 'user@example.com')
page.type('input[name="search"]', 'query', delay=100) # Type with delay
# Clear then fill
page.fill('input[name="email"]', '')
page.fill('input[name="email"]', 'new@example.com')
# Press keys
page.press('input[name="search"]', 'Enter')
page.press('input[name="text"]', 'Control+A')
Dropdowns and Selects
# Select by label
page.select_option('select[name="country"]', label='United States')
# Select by value
page.select_option('select[name="country"]', value='us')
# Select by index
page.select_option('select[name="country"]', index=2)
# Select multiple options
page.select_option('select[multiple]', ['option1', 'option2'])
Checkboxes and Radio Buttons
# Check a checkbox
page.check('input[type="checkbox"]')
# Uncheck a checkbox
page.uncheck('input[type="checkbox"]')
# Check a radio button
page.check('input[value="option1"]')
# Toggle checkbox
if page.is_checked('input[type="checkbox"]'):
page.uncheck('input[type="checkbox"]')
else:
page.check('input[type="checkbox"]')
File Uploads
# Upload single file
page.set_input_files('input[type="file"]', '/path/to/file.pdf')
# Upload multiple files
page.set_input_files('input[type="file"]', ['/path/to/file1.pdf', '/path/to/file2.pdf'])
# Clear file input
page.set_input_files('input[type="file"]', [])
Hover and Focus
# Hover over element
page.hover('button.tooltip-trigger')
# Focus element
page.focus('input[name="email"]')
# Blur element
page.evaluate('document.activeElement.blur()')
Assertions
Element Visibility
from playwright.sync_api import expect
# Expect element to be visible
expect(page.locator('button.submit')).to_be_visible()
# Expect element to be hidden
expect(page.locator('.error-message')).to_be_hidden()
Text Content
# Expect exact text
expect(page.locator('.title')).to_have_text('Welcome')
# Expect partial text
expect(page.locator('.message')).to_contain_text('success')
# Expect text matching pattern
expect(page.locator('.code')).to_have_text(re.compile(r'\d{6}'))
Element State
# Expect element to be enabled/disabled
expect(page.locator('button.submit')).to_be_enabled()
expect(page.locator('button.submit')).to_be_disabled()
# Expect checkbox to be checked
expect(page.locator('input[type="checkbox"]')).to_be_checked()
# Expect element to be editable
expect(page.locator('input[name="email"]')).to_be_editable()
Attributes and Values
# Expect attribute value
expect(page.locator('img')).to_have_attribute('src', '/logo.png')
# Expect CSS class
expect(page.locator('button')).to_have_class('btn-primary')
# Expect input value
expect(page.locator('input[name="email"]')).to_have_value('user@example.com')
Count and Collections
# Expect specific count
expect(page.locator('li')).to_have_count(5)
# Get all elements and assert
items = page.locator('li').all()
assert len(items) == 5
Test Organization
Basic Test Structure
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
browser = p.chromium.launch(headless=True)
page = browser.new_page()
# Test logic here
page.goto('http://localhost:3000')
page.wait_for_load_state('networkidle')
browser.close()
Using Pytest (Recommended)
import pytest
from playwright.sync_api import sync_playwright
@pytest.fixture(scope="session")
def browser():
with sync_playwright() as p:
browser = p.chromium.launch(headless=True)
yield browser
browser.close()
@pytest.fixture
def page(browser):
page = browser.new_page()
yield page
page.close()
def test_login(page):
page.goto('http://localhost:3000')
page.fill('input[name="email"]', 'user@example.com')
page.fill('input[name="password"]', 'password123')
page.click('button[type="submit"]')
expect(page.locator('.welcome-message')).to_be_visible()
Test Grouping with Describe Blocks
class TestAuthentication:
def test_successful_login(self, page):
# Test successful login
pass
def test_failed_login(self, page):
# Test failed login
pass
def test_logout(self, page):
# Test logout
pass
Setup and Teardown
@pytest.fixture(autouse=True)
def setup_and_teardown(page):
# Setup - runs before each test
page.goto('http://localhost:3000')
page.wait_for_load_state('networkidle')
yield # Test runs here
# Teardown - runs after each test
page.evaluate('localStorage.clear()')
Network Interception
Mock API Responses
# Intercept and mock API response
def handle_route(route):
route.fulfill(
status=200,
body='{"success": true, "data": "mocked"}',
headers={'Content-Type': 'application/json'}
)
page.route('**/api/data', handle_route)
page.goto('http://localhost:3000')
Block Resources
# Block images and stylesheets for faster tests
page.route('**/*.{png,jpg,jpeg,gif,svg,css}', lambda route: route.abort())
Wait for Network Responses
# Wait for specific API call
with page.expect_response('**/api/users') as response_info:
page.click('button.load-users')
response = response_info.value
assert response.status == 200
Screenshots and Videos
Screenshots
# Full page screenshot
page.screenshot(path='/tmp/screenshot.png', full_page=True)
# Element screenshot
page.locator('.modal').screenshot(path='/tmp/modal.png')
# Screenshot with custom dimensions
page.set_viewport_size({'width': 1920, 'height': 1080})
page.screenshot(path='/tmp/desktop.png')
Video Recording
browser = p.chromium.launch(headless=True)
context = browser.new_context(record_video_dir='/tmp/videos/')
page = context.new_page()
# Perform actions...
context.close() # Video saved on close
Debugging
Pause Execution
page.pause() # Opens Playwright Inspector
Console Logs
def handle_console(msg):
print(f"[{msg.type}] {msg.text}")
page.on("console", handle_console)
Slow Motion
browser = p.chromium.launch(headless=False, slow_mo=1000) # 1 second delay
Verbose Logging
# Set DEBUG environment variable
# DEBUG=pw:api python test.py
Parallel Execution
Pytest Parallel
# Install pytest-xdist
pip install pytest-xdist
# Run tests in parallel
pytest -n auto # Auto-detect CPU cores
pytest -n 4 # Run with 4 workers
Browser Context Isolation
# Each test gets isolated context (cookies, localStorage, etc.)
@pytest.fixture
def context(browser):
context = browser.new_context()
yield context
context.close()
@pytest.fixture
def page(context):
return context.new_page()
FAQ
What does the webapp-testing skill do?
Comprehensive web application testing patterns with Playwright selectors, wait strategies, and best practices
How do I install webapp-testing?
Run npx skills add https://github.com/bobmatnyc/claude-mpm-skills --skill webapp-testing in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/webapp-testing/ (personal) or .claude/skills/webapp-testing/ (project).
Which AI agents can use webapp-testing?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is webapp-testing safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains webapp-testing?
It is published by bobmatnyc in bobmatnyc/claude-mpm-skills. It has 442 recorded installs.
More from bobmatnyc/claude-mpm-skills
drizzle-orm
bobmatnyc/claude-mpm-skills
Type-safe SQL ORM for TypeScript with zero runtime overhead
playwright-e2e-testing
bobmatnyc/claude-mpm-skills
Playwright modern end-to-end testing framework with cross-browser automation, auto-wait, and built-in test runner
drizzle
bobmatnyc/claude-mpm-skills
Type-safe SQL ORM for TypeScript with zero runtime overhead
pytest
bobmatnyc/claude-mpm-skills
pytest - Python's most powerful testing framework with fixtures, parametrization, plugins, and framework integration for FastAPI, Django, Flask
drizzle-migrations
bobmatnyc/claude-mpm-skills
Migration-first database development workflow using Drizzle ORM for TypeScript/J...
tailwind-css
bobmatnyc/claude-mpm-skills
Tailwind CSS utility-first framework for rapid UI development with responsive design and dark mode
Popular testing & qa skills
tdd
mattpocock/skills
Test-driven development. Use when the user wants to build features or fix bugs test-first, mentions "red-green-refactor", or wants integration tests.
grilling
mattpocock/skills
Grill the user relentlessly about a plan, decision, or idea. Use when the user wants to stress-test their thinking, or uses any 'grill' trigger phrases.
migrate-to-shoehorn
mattpocock/skills
Migrate test files from as type assertions to @total-typescript/shoehorn. Use when user mentions shoehorn, wants to replace as in tests, or needs partial test data.
run-train
lllllllama/rigorpilot-skills
Rigor Train skill for deep learning research repositories. Use when a documented or selected training command should be run conservatively for startup verification, short-run verification, full kickoff, or resume, with command, config, seed, log, checkpoint, status, and metric evidence written to standardized trainoutputs/. Do not use for environment setup, exploratory sweeps, speculative idea implementation, or end-to-end orchestration.
test-driven-development
obra/superpowers
Use when implementing any feature or bugfix, before writing implementation code
finishing-a-development-branch
obra/superpowers
Use when implementation is complete, all tests pass, and you need to decide how to integrate the work