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
2026-08-31 11:52:27 +07:00
parent 166e0d40ac
commit 67e1e0a74f
23 changed files with 318 additions and 108 deletions
+10 -12
View File
@@ -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