Back to list
tech-with-seth

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

EmailPasswordRole
admin@iridium.comAdmin123!ADMIN
editor@iridium.comEditor123!EDITOR
user@iridium.comUser123!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

  1. Create *.spec.ts in tests/ directory
  2. Use semantic selectors (role, label, text)
  3. Set up authentication if testing protected routes
  4. 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