Menu
Create, maintain, and verify end-to-end (E2E) tests using Playwright MCP. Ensures new features and flows are robustly tested and visually verified.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | write-e2e-test |
| description | Create, maintain, and verify end-to-end (E2E) tests using Playwright MCP. Ensures new features and flows are robustly tested and visually verified. |
Guide the creation, maintenance, and verification of end-to-end (E2E) tests for the test-app using Playwright MCP.
Identify Test Scenarios
Set Up Playwright MCP
Write E2E Test
/test-app/e2e/Run and Verify
Maintain and Document
/test-app/e2e/Always start a fresh browser session after any file change, walk through the full user flow, and monitor for errors before proceeding with further work.
Set up and run different development service arrangements for testing specific features. Use when starting dev servers, testing Storybook addon (SB8 or SB10), testing Tailwind v3 vs v4, testing Astro, or when asked which services to run. Covers compound tasks, port assignments, and which services need each other.
Defines the interaction behavior of global mode buttons (Select, Insert) and component row buttons (Place, Replace). Use when modifying button states, colors, labels, tab visibility, or page interaction behavior. Must review and update these tables before making changes.
Canonical naming for all Convey UI parts, features, and concepts. Reference when discussing, documenting, or writing code for any part of the app. Ensures consistent terminology across humans and AI agents.
Build panel UI components that live-preview Tailwind className changes in the user's app via WebSocket. Use when creating any control (dropdown, scrubber, color picker, toggle, etc.) that lets users hover/scrub values before committing. Covers the preview/revert/stage lifecycle, the onHover/onLeave prop contract, and the focus-trap pattern that prevents preview leaks.
Debug and fix failing Playwright E2E tests. Use when tests fail, when asked to fix failing tests, or when investigating test failures. Analyzes test output, screenshots, error context, and uses Playwright MCP to identify root causes.