メニュー
Writes end-to-end tests with Playwright Test for full user flow verification. Use when adding, modifying, or removing user flows in an application. Do not use for isolated component behavior — use component-testing instead.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Plans development tasks through codebase exploration, exhaustive user interviews, and structured file-based plans. Use when tackling a feature, bug fix, refactor, or any task that benefits from upfront planning. Generates plan files in .agents/plans/ for later execution with /execute-plan.
Executes a plan generated by /create-plan. Orchestrates team members in parallel, each working in isolated worktrees. Use when ready to execute a plan from .agents/plans/, resume an interrupted execution, or run a specific plan by ID.
Plans and executes development tasks through codebase exploration, user interviews, and coordinated teammates. Use when tackling a feature, bug fix, refactor, or any task that benefits from upfront planning and parallel execution.
Builds type-safe, accessible forms with TanStack Form, Base UI Field, and the useAppForm hook. Use when creating forms, adding validation, handling form submission, or working with form fields and form state management.
Provides instructions for the Better Auth admin plugin in Convex projects. Use when adding admin capabilities, user management, role-based access control, banning users, managing sessions, impersonation, or custom permissions.
Provides instructions for the Better Auth email OTP plugin in Convex projects. Use when adding passwordless sign-in, email OTP authentication, one-time codes, email verification, or OTP-based password reset.
| name | e2e-testing |
| description | Writes end-to-end tests with Playwright Test for full user flow verification. Use when adding, modifying, or removing user flows in an application. Do not use for isolated component behavior — use component-testing instead. |
Playwright Test against the real application — real server, real browser, real data.
e2e/ at the project root, NOT co-located with sourcee2e/flow-name.spec.ts — run with saved session automaticallye2e/flow-name.unauth.spec.ts — fresh browser, no sessionbun run e2ee2e/seeds/ as JSON filestest from ./utils (shared fixture), expect from @playwright/testimport { expect } from "@playwright/test";
import { test } from "./utils";
The shared test fixture waits for [data-hydrated] after every page.goto() — buttons and handlers are ready immediately.
| API | Use |
|---|---|
page.goto("/path") | Navigate to URL |
page.getByRole("button", { name }) | Query by ARIA role |
page.getByText("text") | Query by text content |
page.getByLabel("label") | Query by form label |
locator.click() | Click interaction |
locator.fill("value") | Type into input |
expect(page).toHaveURL(pattern) | Assert current URL |
expect(locator).toBeVisible() | Assert element visible |
page.waitForURL(pattern) | Wait for navigation |
page.context().storageState() | Save auth state |
| Scenario | Test type |
|---|---|
| Multi-step user flow across pages | E2E |
| Authentication and authorization | E2E |
| CRUD lifecycle | E2E |
| API integration across pages | E2E |
| Isolated UI component behavior | Component |
| Form validation feedback | Component |
| Component state management | Component |
Rule of thumb: involves chained steps across the real app → E2E. Tests isolated UI behavior → component test.
See examples/ for complete test examples by pattern:
| Example | When to use |
|---|---|
examples/navigation.md | Page transitions, link clicks, URL assertions |
examples/form-submission.md | Form fills, submissions, validation |
examples/crud-flow.md | Create, edit, delete lifecycle |
examples/auth-persistence.md | Login setup, session reuse, unauthenticated tests |
e2e/ directory.spec.ts (authenticated) or .unauth.spec.ts (unauthenticated)test from ./utils, expect from @playwright/teste2e/seeds/ when needed