E2E testing with Playwright for browser automation, test generation, and UI testing. Use when discussing E2E tests, Playwright, browser testing, UI automation, visual testing, or accessibility testing. Supports TypeScript tests and Go/HTMX web applications.
From testing-e2enpx claudepluginhub alexei-led/cc-thingz --plugin testing-e2eThis skill is limited to using the following tools:
SKILL.codex.mdBenchmarks web page Core Web Vitals/bundle sizes, API latency under load, build times; detects regressions via before/after PR comparisons.
Generates step-by-step plans for multi-session engineering projects with self-contained step contexts, dependency graphs, parallel detection, and adversarial review. Use for complex multi-PR tasks.
Provides patterns for continuous autonomous agent loops with loop selection, quality gates, evals, recovery controls, and failure mitigation. Useful for production AI agent workflows.
Execute E2E testing workflows using Playwright scripts (via playwright-skill).
Use TodoWrite to track these 4 phases:
$ARGUMENTS:
run → Run existing E2E testsrecord → Record browser session for test generationgenerate → Generate test from URL or page descriptionverify <feature> → Verify specific feature works in browserIf no argument provided, use AskUserQuestion:
| Header | Question | Options |
|---|---|---|
| Action | What E2E testing task to run? | 1. Run tests - Execute existing Playwright tests 2. Record - Record browser session 3. Generate - Create test from URL/description 4. Verify - Check feature |
npx playwright test
For specific test:
npx playwright test login.spec.ts
For headed mode (visible browser):
npx playwright test --headed
Write a Playwright script to /tmp/playwright-record-*.js that:
headless: false and slowMo: 100cd ~/.claude/skills/playwright-skill && node run.js /tmp/playwright-record-*.jsSpawn playwright-tester agent:
Task(
subagent_type="playwright-tester",
description="Generate E2E test",
prompt="Generate E2E test for:
URL: {target URL}
Flow: {user flow description}
Requirements:
- Use Page Object pattern
- Use semantic locators (getByRole, getByLabel, getByText)
- Include assertions for expected outcomes
- No hardcoded waits (use waitFor patterns)
- Include accessibility checks where appropriate"
)
Spawn playwright-tester agent for feature verification:
Task(
subagent_type="playwright-tester",
description="Verify feature",
prompt="Verify this feature works correctly in the browser:
Feature: {feature description}
Steps:
1. Navigate to appropriate page
2. Execute user flow
3. Assert expected outcomes
4. Report PASS/FAIL with evidence (screenshots if needed)"
)
npx playwright test --headed
If tests fail, review output and fix issues.
E2E TESTING
===========
Action: {run|record|generate|verify}
Result: {outcome}
Tests: {pass/fail count}
Details:
- [test results or generation summary]
Write Playwright scripts to /tmp/ and run via the playwright-skill executor:
cd ~/.claude/skills/playwright-skill && node run.js /tmp/playwright-test-*.js
The executor handles module resolution, auto-installs Chromium if needed, and provides helper utilities. See playwright-skill/SKILL.md for full patterns.
browser_snapshot to verify DOM updates after HTMX swapshx-trigger, hx-swap, hx-target behaviorsHX-* response headers in network requests// BAD: Immediate failure
await page.click("#submit-btn");
// GOOD: Wait with timeout + fallback
const btn = page.locator("#submit-btn");
if ((await btn.count()) === 0) {
// Try alternative selector
await page.click('button[type="submit"]');
} else {
await btn.click();
}
Recovery strategies:
browser_snapshot to inspect current DOM state| Error | Cause | Solution |
|---|---|---|
| Navigation timeout | Slow page load | Increase timeout, check network |
| Action timeout | Element not interactable | Wait for visibility/enabled state |
| Expect timeout | Assertion failed | Verify DOM state with snapshot |
// Configure timeouts
test.setTimeout(60000); // Test timeout
page.setDefaultTimeout(30000); // Action timeout
// Or per-action
await page.click("#btn", { timeout: 10000 });
// Wait for network idle
await page.waitForLoadState("networkidle");
// Mock failing endpoints
await page.route("**/api/**", (route) => {
route.fulfill({ status: 500, body: "Server Error" });
});
Avoid:
page.waitForTimeout(1000) delays.btn-23Prefer:
waitForSelector, waitForLoadStategetByRole('button', { name: 'Submit' })browser_snapshot shows accessibility tree# Run with trace
npx playwright test --trace on
# View trace
npx playwright show-trace trace.zip
Execute E2E testing workflow now.