| name | write-e2e-test |
| description | Create, maintain, and verify end-to-end (E2E) tests using Playwright MCP. Use when a new feature or flow needs E2E coverage, when updating flows, or verifying UI and functional correctness. |
Write E2E Test Skill
Browser tooling — works for both toolsets. Use whichever is configured:
Playwright MCP (mcp_playwright_browser_*) for Claude, or the Copilot browser
tools (open_browser_page, read_page, screenshot_page, click_element,
type_in_page) for VS Code Copilot. Where this skill says "Playwright", use the
equivalent tool from whichever set is available. Authoring persistent .spec.ts
E2E files needs a Playwright test runner — if none is configured, verify
interactively with the browser tools and cover flows with Vitest story tests instead.
Purpose
Guide the creation, maintenance, and verification of end-to-end (E2E) tests using the available browser tools.
When to Use
- A new feature or flow is implemented and needs E2E coverage
- Updating or refactoring existing flows
- Verifying UI and functional correctness across user journeys
Workflow
-
Identify Test Scenarios
- Review the feature spec, user story, or acceptance criteria
- List critical user journeys, edge cases, and error paths
-
Set Up Playwright MCP
- Ensure Playwright MCP is configured
- Start the dev server if not already running
-
Write E2E Test
- Create a new Playwright test file in the appropriate directory (e.g.,
e2e/)
- Use Playwright MCP to record or script the test, covering:
- Main user flows
- Edge cases and error handling
- Visual verification (screenshots, assertions)
- Use sample data generators for realistic test data where available
-
Run and Verify
- Execute the E2E test(s) against the running app
- Use Playwright MCP to:
- Validate UI state and visual correctness
- Assert expected outcomes and error messages
- Fix any issues or update tests as needed
-
Maintain and Document
- Update tests when features or flows change
- Document test coverage and known gaps
Checklist
