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
+5 -4
View File
@@ -1,6 +1,6 @@
---
name: tdd-workflow
description: Use this skill when writing new features, fixing bugs, or refactoring code. Enforces test-driven development with 80%+ coverage using Vitest, Testing Library, and browser journeys.
description: Use this skill when writing new features, fixing bugs, or refactoring code. Enforces test-driven development with 80%+ coverage using Vitest, Testing Library, and Playwright E2E.
---
# Test-Driven Development Workflow
@@ -24,7 +24,7 @@ TDD for this frontend monorepo (Vitest, not NestJS/Supertest).
- **Unit** — validators, transformers, utils, stores (`*.test.ts`)
- **Component** — Testing Library in `packages/ui` / `packages/core-events`
- **Journeys** — login and FULL_PAGE index/form/detail; mock HTTP services; browser-verify layout
- **Journeys** — Playwright in `apps/web/e2e/` (login sample first); mock HTTP with `page.route`
## Workflow
@@ -77,7 +77,7 @@ vi.mock('@repo/core-api/http-client', () => ({
## File organization
Colocate `*.test.ts(x)` next to source. No `test/*.e2e-spec.ts` NestJS tree.
Colocate unit tests as `*.test.ts(x)` next to source. Playwright E2E lives in `apps/web/e2e/` (see `login.spec.ts`). Do not use a NestJS `test/*.e2e-spec.ts` tree.
## Commands
@@ -85,6 +85,7 @@ Colocate `*.test.ts(x)` next to source. No `test/*.e2e-spec.ts` NestJS tree.
pnpm test
pnpm --filter @repo/ui test
pnpm --filter web test -- --watch
pnpm test:e2e:web
pnpm lint
```
@@ -99,4 +100,4 @@ pnpm lint
- 80%+ coverage
- All tests green
- Critical FULL_PAGE flows covered or browser-verified
- Critical FULL_PAGE flows covered by Playwright or browser-verified