← Back to list

create-e2e-test
by tech-with-seth
React Router 7 starter with Polar.sh, BetterAuth, Prisma, and Tailwind
⭐ 1🍴 0📅 Jan 24, 2026
SKILL.md
name: create-e2e-test description: Create Playwright E2E tests for user flows. Use when testing complete user journeys, protected routes, form submissions, or cross-page navigation.
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
Score
Total Score
65/100
Based on repository quality metrics
✓SKILL.md
SKILL.mdファイルが含まれている
+20
✓LICENSE
ライセンスが設定されている
+10
○説明文
100文字以上の説明がある
0/10
○人気
GitHub Stars 100以上
0/15
✓最近の活動
1ヶ月以内に更新
+10
○フォーク
10回以上フォークされている
0/5
✓Issue管理
オープンIssueが50未満
+5
✓言語
プログラミング言語が設定されている
+5
✓タグ
1つ以上のタグが設定されている
+5
Reviews
💬
Reviews coming soon

