Agent skill
create-e2e-test
Create Playwright E2E tests for user flows. Use when testing complete user journeys, protected routes, form submissions, or cross-page navigation.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/testing/create-e2e-test
SKILL.md
Create E2E Test
When to Use
- Testing complete user flows
- Testing protected routes and middleware
- Verifying form submissions
- User asks to "add E2E test" or "test user flow"
Test Location
tests/
├── authentication.spec.ts
├── dashboard.spec.ts
└── profile.spec.ts
Basic Test
import { test, expect } from '@playwright/test';
test.describe('Feature Name', () => {
test('should do something', async ({ page }) => {
await page.goto('/');
await expect(page.getByRole('heading', { name: 'Title' })).toBeVisible();
});
});
Authentication Flow
test('signs in and accesses dashboard', async ({ page }) => {
await page.goto('/sign-in');
await page.getByLabel(/email/i).fill('admin@iridium.com');
await page.getByLabel(/password/i).fill('Admin123!');
await page.getByRole('button', { name: /sign in/i }).click();
await expect(page).toHaveURL(/dashboard/);
});
Form Testing
test('shows validation errors', async ({ page }) => {
await page.goto('/sign-in');
await page.getByRole('button', { name: /sign in/i }).click();
await expect(page.getByText(/email is required/i)).toBeVisible();
});
Selectors - Use Semantic
// GOOD
page.getByRole('button', { name: /submit/i })
page.getByLabel(/email/i)
page.getByText(/success/i)
// BAD
page.locator('.btn-primary')
page.locator('#submit-button')
Test Credentials
| Password | Role | |
|---|---|---|
admin@iridium.com |
Admin123! |
ADMIN |
editor@iridium.com |
Editor123! |
EDITOR |
user@iridium.com |
User123! |
USER |
Running Tests
npm run e2e # Headless
npm run e2e:ui # Visual UI (recommended)
npm run e2e:headed # Browser visible
npm run e2e:debug # Debug mode
Common Assertions
await expect(page).toHaveURL(/dashboard/);
await expect(page).toHaveTitle('Page Title');
await expect(page.getByText('Hello')).toBeVisible();
await expect(page.getByRole('button')).toBeDisabled();
Checklist
- Create
*.spec.tsintests/directory - Use semantic selectors (role, label, text)
- Set up authentication if testing protected routes
- Avoid hardcoded waits (
waitForTimeout)
Full Reference
See .github/instructions/playwright.instructions.md for:
- API response testing
- Role-based access testing
- CI/CD integration
- Debugging strategies
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?