e2e-playwright-testing
End-to-end testing with Playwright for web applications. Use when writing E2E tests, browser automation, form submission testing, or user flow testing. Triggers on "playwright", "e2e test", "browser test", "end-to-end", "form flow testing", or test files in tests/e2e/.
By asyrafhussin · 554 installs
npx skills add asyrafhussin/agent-skills --skill e2e-playwright-testing
Source repository · Upstream listing
E2E Playwright Testing
Patterns and conventions for reliable end to end browser testing with Playwright.
Comprehensive E2E testing guide for web applications. Contains 8 rules across 6 categories covering locator strategies, authentication reuse, form testing (including React/SPA specific gotchas), assertions, test organization, reliability, and CI/CD configuration.
Stack Detection
Before writing or reviewing E2E tests, detect the project stack:
Step 1 — Check for Playwright
If @playwright/test is present → use Playwright patterns from this skill
If cypress is present → this skill does not apply
Step 2 — Detect Frontend Framework
Why this matters:
React + Inertia.js : Use waitForURL not waitForLoadState('networkidle') — Inertia uses history.pushState
React controlled inputs : fill() works for text but keyboard.type() needed for date/time
SPA navigation : Page doesn't do full reload — assertions must wait for content, not network idle
Step 3 — Detect Auth Pattern
Step 4 — Detect Rate Limiting
Metadata
Version: 1.0.0
Rule Count: 8 rules across 6 categories
License: MIT
When to Apply
Writing or reviewing Playwright E2E tests
Setting up E2E testing for a new project
Debugging flaky browser tests
Testing form submissions, authentication flows, or user interactions
Choosing locator strategies for elements
Configuring Playwright for CI/CD
Rule Categories by Priority
Priority Category Impact Prefix
1 Locators CRITICAL loc
2 Authentication CRITICAL auth
3 Assertions HIGH assert
4 Forms & Inputs HIGH form
5 Test Organization MEDIUM org
6 Reliability MEDIUM rel
Quick Reference
1. Locators (CRITICAL)
loc prefer role locators Use getByRole/getByLabel over CSS selectors
loc strict mode Handle strict mode violations with exact/first/scoped
2. Authentication (CRITICAL)
auth storage state Reuse login state via setup project pattern
3. Assertions (HIGH)
assert web first Use auto retrying expect(locator) assertions
4. Forms & Inputs (HIGH)
form react date inputs Use keyboard.type() for date/time in React apps
form custom checkboxes Handle sr only checkbox components
5. Test Organization (MEDIUM)
org mirror routes Directory structure mirrors route groups
6. Reliability (MEDIUM)
rel no wait for timeout Never use arbitrary waitForTimeout
Essential Patterns
Locator Priority
Auth Setup Pattern
React Date Input Gotcha
Strict Mode Fix
Parallelism Decision
Configuration Template
References
[Playwright Documentation](https://playwright.dev)
[Best Practices](https://playwright.dev/docs/best practices)
[Locators Guide](https://playwright.dev/docs/locators)
[Authentication Guide](https://playwright.dev/docs/auth)
[Test Assertions](https://playwright.dev/docs/test assertions)
[Auto waiting](https://playwright.dev/docs/actionability)
Full Compiled Document
For the complete guide with all rules expanded: AGENTS.md