feat: integrate Playwright for E2E testing and enhance testing framework
- Added Playwright for end-to-end testing in the `apps/web` module, including a new `login.spec.ts` for testing login functionality. - Updated package.json to include Playwright dependencies and new test commands for E2E testing. - Enhanced .gitignore to exclude Playwright test results and reports. - Modified existing documentation to reflect the integration of Playwright and updated testing guidelines. - Refactored test commands to streamline the testing process, including a dedicated command for E2E tests. These changes improve the testing framework by providing robust E2E testing capabilities, enhancing the reliability and quality of the application.
This commit is contained in:
shancheas
@@ -1,43 +1,46 @@
|
||||
---
|
||||
name: e2e-runner
|
||||
description: Frontend journey specialist using Vitest, Testing Library, and browser verification for apps/web module flows. Use PROACTIVELY for critical UI journeys (login, index, form, detail).
|
||||
description: Frontend journey specialist using Playwright for apps/web E2E, plus Vitest and Testing Library for package journeys. Use PROACTIVELY for critical UI journeys (login, index, form, detail).
|
||||
tools: Read, Write, Edit, Bash, Grep, Glob
|
||||
model: opus
|
||||
---
|
||||
|
||||
# E2E / Journey Runner
|
||||
|
||||
You are a frontend journey specialist for this pnpm + Turborepo React monorepo. There is no NestJS, Supertest, or Playwright suite. Cover critical user journeys with Vitest (+ Testing Library where the package already uses it) and browser verification for `apps/web`.
|
||||
You are a frontend journey specialist for this pnpm + Turborepo React monorepo. Cover critical user journeys with Playwright in `apps/web/e2e/` and with Vitest (+ Testing Library where the package already uses it) for packages.
|
||||
|
||||
## Core Responsibilities
|
||||
|
||||
1. **Package / component journeys** — Vitest + Testing Library in `packages/ui` and `packages/core-events`
|
||||
2. **App journeys** — browser-verify `apps/web` flows (login, FULL_PAGE index / form / detail)
|
||||
3. **Isolation** — mock `@repo/core-api` HTTP services; never hit a real backend unless the user asks
|
||||
1. **App E2E** — Playwright specs in `apps/web/e2e/` (first sample: `e2e/login.spec.ts`)
|
||||
2. **Package / component journeys** — Vitest + Testing Library in `packages/ui` and `packages/core-events`
|
||||
3. **Isolation** — mock the backend with Playwright `page.route` (see `e2e/fixtures/mock-api.ts`); never hit a real API unless the user asks
|
||||
4. **Flaky management** — no arbitrary sleeps; wait for UI or network conditions
|
||||
5. **Reporting** — Vitest output and a short pass/fail summary
|
||||
5. **Reporting** — Playwright/Vitest output and a short pass/fail summary
|
||||
|
||||
## Commands
|
||||
|
||||
```bash
|
||||
pnpm test:e2e:web
|
||||
pnpm --filter web test:e2e
|
||||
pnpm --filter web test:e2e:ui
|
||||
pnpm test
|
||||
pnpm --filter @repo/ui test
|
||||
pnpm --filter @repo/core-events test
|
||||
pnpm --filter web test
|
||||
pnpm check:all
|
||||
```
|
||||
|
||||
First-time browsers: `pnpm --filter web exec playwright install chromium`
|
||||
|
||||
## What to test
|
||||
|
||||
### Critical `apps/web` journeys
|
||||
### Critical `apps/web` journeys (Playwright)
|
||||
|
||||
1. Login (`src/apps/auth/login`)
|
||||
1. Login (`e2e/login.spec.ts`) — copy this sample for new journeys
|
||||
2. FULL_PAGE index — table + filters
|
||||
3. FULL_PAGE form — create / edit / duplicate
|
||||
4. FULL_PAGE detail
|
||||
5. Auth session teardown (`terminateAuthSession`)
|
||||
|
||||
Canonical sample: `apps/web/src/apps/main/modules/example/full-page/`. Copy that pattern; do not invent a third page style.
|
||||
Canonical UI sample: `apps/web/src/apps/main/modules/example/full-page/`. Copy that page pattern; do not invent a third page style.
|
||||
|
||||
### Package component tests (Testing Library)
|
||||
|
||||
@@ -52,36 +55,18 @@ it('renders the field label', () => {
|
||||
});
|
||||
```
|
||||
|
||||
### Mock remote data services (not a database)
|
||||
### Mock the HTTP backend (Playwright)
|
||||
|
||||
```ts
|
||||
vi.mock('../../domain/factories', () => ({
|
||||
fullPageDataService: {
|
||||
list: vi.fn(),
|
||||
get: vi.fn(),
|
||||
create: vi.fn(),
|
||||
update: vi.fn(),
|
||||
delete: vi.fn(),
|
||||
},
|
||||
}));
|
||||
```
|
||||
Reuse `mockBackend(page)` from `apps/web/e2e/fixtures/mock-api.ts`. Extend that helper for new endpoints instead of calling a live server.
|
||||
|
||||
## Browser verification (`apps/web`)
|
||||
|
||||
When the change is routing, layout, or a flow Vitest cannot see:
|
||||
|
||||
1. Use `pnpm dev:web`
|
||||
2. Drive login → index → form → detail the way a user would
|
||||
3. Check empty, error, and success states
|
||||
4. Confirm related routes that share module state stay consistent
|
||||
|
||||
Do not add Playwright unless the user explicitly asks.
|
||||
Unit tests still mock `@repo/core-api` services — not a database.
|
||||
|
||||
## Flaky-test rules
|
||||
|
||||
- Prefer `getByRole` / `getByLabelText` over CSS classes
|
||||
- Prefer `getByRole` / `getByLabel` over CSS classes
|
||||
- Wait for elements or responses, never fixed sleeps
|
||||
- Each test sets up its own data
|
||||
- Keep Playwright specs in `apps/web/e2e/`; do not colocate them next to source (Vitest would pick them up)
|
||||
|
||||
## Report format
|
||||
|
||||
@@ -89,7 +74,7 @@ Do not add Playwright unless the user explicitly asks.
|
||||
# Journey Report
|
||||
|
||||
**Status:** PASSING / FAILING
|
||||
**Command:** pnpm test
|
||||
**Command:** pnpm test:e2e:web
|
||||
|
||||
## Summary
|
||||
|
||||
|
||||
@@ -56,7 +56,7 @@ export const createFullPageSchema = (t: (key: string) => string) =>
|
||||
|
||||
1. **Unit** — validators, transformers, utils, stores (`*.test.ts`)
|
||||
2. **Component** — Testing Library in packages that already have it
|
||||
3. **Journeys** — login and FULL_PAGE index / form / detail; mock `fullPageDataService`. Browser-verify layout/routing. See **e2e-runner**.
|
||||
3. **Journeys** — Playwright in `apps/web/e2e/` (copy `login.spec.ts`). Mock HTTP with `mockBackend`. See **e2e-runner**.
|
||||
|
||||
## Mocking
|
||||
|
||||
|
||||
+10
-12
@@ -1,18 +1,17 @@
|
||||
---
|
||||
description: Generate and run frontend journey tests with Vitest/Testing Library, plus browser verification for apps/web. Covers login and FULL_PAGE index/form/detail.
|
||||
description: Generate and run frontend journey tests with Playwright for apps/web, plus Vitest/Testing Library for packages. Covers login and FULL_PAGE index/form/detail.
|
||||
---
|
||||
|
||||
# E2E / Journey Command
|
||||
|
||||
This command invokes the **e2e-runner** agent to cover critical UI journeys. There is no NestJS or Playwright suite.
|
||||
This command invokes the **e2e-runner** agent to cover critical UI journeys.
|
||||
|
||||
## What This Command Does
|
||||
|
||||
1. **Identify journeys** — login, FULL_PAGE index / form / detail
|
||||
2. **Write or update Vitest tests** — mock `@repo/core-api` services
|
||||
3. **Run** `pnpm test` (or `pnpm --filter web test`)
|
||||
4. **Browser-verify** `apps/web` when the change is routing or layout
|
||||
5. **Report** pass/fail
|
||||
2. **Write or update Playwright specs** in `apps/web/e2e/` (copy `e2e/login.spec.ts`)
|
||||
3. **Run** `pnpm test:e2e:web` (or `pnpm --filter web test:e2e`)
|
||||
4. **Report** pass/fail
|
||||
|
||||
## When to Use
|
||||
|
||||
@@ -27,11 +26,10 @@ Use `/e2e` when:
|
||||
|
||||
The e2e-runner agent will:
|
||||
|
||||
1. Copy patterns from `apps/web/src/apps/main/modules/example/full-page/`
|
||||
2. Mock `fullPageDataService` (or the module's factory) — not a database
|
||||
3. Run `pnpm test`
|
||||
4. Drive the browser for layout/routing if needed (`pnpm dev:web`)
|
||||
5. Summarize failures
|
||||
1. Copy the login sample in `apps/web/e2e/login.spec.ts` and UI patterns from `example/full-page`
|
||||
2. Mock the backend with `mockBackend` (`e2e/fixtures/mock-api.ts`) — not a live API
|
||||
3. Run `pnpm test:e2e:web`
|
||||
4. Summarize failures
|
||||
|
||||
## Example
|
||||
|
||||
@@ -39,7 +37,7 @@ The e2e-runner agent will:
|
||||
User: /e2e Test the example full-page index and detail flow
|
||||
```
|
||||
|
||||
Canonical sample: `example/full-page`. Do not invent a third page style. Do not add Playwright unless asked.
|
||||
Canonical UI sample: `example/full-page`. Canonical E2E sample: `apps/web/e2e/login.spec.ts`.
|
||||
|
||||
## Related
|
||||
|
||||
|
||||
@@ -22,7 +22,7 @@ alwaysApply: true
|
||||
| code-reviewer | Code review | After writing code |
|
||||
| security-reviewer | Security analysis | Before commits |
|
||||
| build-error-resolver | Fix build errors | When build fails |
|
||||
| e2e-runner | Frontend journeys | Vitest + RTL, browser flows |
|
||||
| e2e-runner | Frontend journeys | Playwright in `apps/web/e2e/` |
|
||||
| refactor-cleaner | Dead code cleanup | Code maintenance |
|
||||
| doc-updater | Documentation | Updating docs |
|
||||
|
||||
|
||||
@@ -31,7 +31,7 @@ pnpm + Turborepo monorepo. Work from the repository root. Package manager: `pnpm
|
||||
- Before inventing UI or package usage, match `apps/showcase` demos and `apps/docs-dev` docs.
|
||||
- Prefer `@repo/ui`, `@repo/core-*`, `@repo/utils` over app-local duplicates or raw Mantine/axios.
|
||||
- Env files live **inside the app** (`apps/web/.env*`), never at monorepo root. Read env via `src/core/environment` (`ENV`), not `import.meta.env` in components.
|
||||
- Run scripts from root: `pnpm dev:web`, `pnpm dev:showcase`, `pnpm lint`, `pnpm typecheck:web`, `pnpm test`, `pnpm check:all`.
|
||||
- Run scripts from root: `pnpm dev:web`, `pnpm dev:showcase`, `pnpm lint`, `pnpm typecheck:web`, `pnpm test`, `pnpm test:e2e:web`, `pnpm check:all`.
|
||||
|
||||
## Import map (preferred)
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
description: TDD workflow, 80% coverage minimum, Vitest unit tests, and browser journey verification
|
||||
description: TDD workflow, 80% coverage minimum, Vitest unit tests, and Playwright E2E for apps/web
|
||||
alwaysApply: true
|
||||
---
|
||||
|
||||
@@ -11,9 +11,9 @@ Test types:
|
||||
|
||||
1. **Unit tests** — pure functions, transformers, validators, stores, utilities (`*.test.ts` / `*.test.tsx`, colocated or `__tests__/`)
|
||||
2. **Component tests** — Testing Library in packages that already have it (`packages/ui`, `packages/core-events`)
|
||||
3. **App journeys** — browser verification of `apps/web` flows (login, index / form / detail). There is no Playwright or NestJS E2E suite in this repo.
|
||||
3. **App journeys** — Playwright E2E in `apps/web/e2e/` (login is the first sample). Mock the backend with `page.route`; do not hit a live API unless the user asks. There is no NestJS/Supertest suite in this frontend repo.
|
||||
|
||||
Runner: **Vitest**. Root command: `pnpm test`. Per-package: `pnpm --filter <pkg> test`. Also `pnpm typecheck` and `pnpm check:all`.
|
||||
Runner: **Vitest** for unit tests (`pnpm test`). Playwright for web E2E (`pnpm test:e2e:web` or `pnpm --filter web test:e2e`). Also `pnpm typecheck` and `pnpm check:all` (unit/lint/typecheck only).
|
||||
|
||||
## Test-Driven Development
|
||||
|
||||
@@ -30,11 +30,11 @@ MANDATORY workflow:
|
||||
|
||||
1. Use **tdd-guide** agent
|
||||
2. Check test isolation
|
||||
3. Verify mocks are correct (`@repo/core-api` services, HTTP client — not a database)
|
||||
3. Verify mocks are correct (`@repo/core-api` / HTTP client for unit tests; `mockBackend` in `apps/web/e2e/fixtures/mock-api.ts` for Playwright)
|
||||
4. Fix implementation, not tests (unless tests are wrong)
|
||||
|
||||
## Agent Support
|
||||
|
||||
- **tdd-guide** — Use PROACTIVELY for new features, enforces write-tests-first
|
||||
- **e2e-runner** — Frontend journeys: Vitest + Testing Library, plus browser verification for `apps/web`
|
||||
- **e2e-runner** — Playwright E2E in `apps/web/e2e/`, plus Vitest + Testing Library for package journeys
|
||||
- Skill: `.agents/skills/tdd-workflow/`
|
||||
|
||||
Reference in New Issue
Block a user