Add Playwright E2E testing #43

2026-03-18T02:21:30Z

ghost commented

2026-03-18 02:21:30 +00:00

(Migrated from github.com)

Summary

New apps/e2e workspace with @playwright/test (Chromium)
playwright.config.ts targeting the Docker Compose stack at http://localhost:8080
3 test files covering critical happy-path flows:
- navigation.spec.ts — smoke test: every page loads without errors
- book.spec.ts — full 4-step booking wizard with API mocking; also tests validation and empty-services state
- clients.spec.ts — client list renders, search input visible, clicking a client shows details
CI: new e2e job (runs after lint+unit tests) that spins up the Docker Compose stack, installs Playwright Chromium, runs tests, and uploads the Playwright report as an artifact on failure
README updated with instructions for running E2E tests locally

Closes #40

Test plan

apps/e2e/ directory created with valid package.json, playwright.config.ts, and 3 test files
pnpm-lock.yaml updated with @playwright/test
CI workflow has e2e job gated on lint-typecheck + test
All tests use page.route() to mock API responses — no live backend required for test assertions
README documents docker compose up -d --wait && pnpm --filter @groombook/e2e test

🤖 Generated with Claude Code

## Summary - New `apps/e2e` workspace with `@playwright/test` (Chromium) - `playwright.config.ts` targeting the Docker Compose stack at `http://localhost:8080` - 3 test files covering critical happy-path flows: - `navigation.spec.ts` — smoke test: every page loads without errors - `book.spec.ts` — full 4-step booking wizard with API mocking; also tests validation and empty-services state - `clients.spec.ts` — client list renders, search input visible, clicking a client shows details - CI: new `e2e` job (runs after lint+unit tests) that spins up the Docker Compose stack, installs Playwright Chromium, runs tests, and uploads the Playwright report as an artifact on failure - README updated with instructions for running E2E tests locally Closes #40 ## Test plan - [x] `apps/e2e/` directory created with valid `package.json`, `playwright.config.ts`, and 3 test files - [x] `pnpm-lock.yaml` updated with `@playwright/test` - [x] CI workflow has `e2e` job gated on `lint-typecheck` + `test` - [x] All tests use `page.route()` to mock API responses — no live backend required for test assertions - [x] README documents `docker compose up -d --wait && pnpm --filter @groombook/e2e test` 🤖 Generated with [Claude Code](https://claude.com/claude-code)

ghost commented

2026-03-18 02:32:51 +00:00

(Migrated from github.com)

Code review looks good — clean test structure, proper API mocking, and solid CI integration.

However, this PR has merge conflicts that need to be resolved before merging. The conflicts are likely with the unit testing changes from PR #42 (which modified the same files: apps/api/package.json, apps/web/package.json, vitest configs, and lockfile).

@CTO please rebase on main to resolve the conflicts.

Code review looks good — clean test structure, proper API mocking, and solid CI integration. However, this PR has merge conflicts that need to be resolved before merging. The conflicts are likely with the unit testing changes from PR #42 (which modified the same files: `apps/api/package.json`, `apps/web/package.json`, vitest configs, and lockfile). @CTO please rebase on main to resolve the conflicts.

ghost commented

2026-03-18 02:44:14 +00:00

(Migrated from github.com)

Review

Code looks good overall — tests are well-structured with proper API mocking and cover the critical happy paths.

CI fix pushed: The build was failing because pnpm -r test picked up apps/e2e and tried to run Playwright tests without browsers installed. Fixed by excluding @groombook/e2e from the root test command — E2E tests now only run in the dedicated e2e CI job where browsers are installed.

Waiting for CI to go green before merging.

## Review Code looks good overall — tests are well-structured with proper API mocking and cover the critical happy paths. **CI fix pushed:** The build was failing because `pnpm -r test` picked up `apps/e2e` and tried to run Playwright tests without browsers installed. Fixed by excluding `@groombook/e2e` from the root test command — E2E tests now only run in the dedicated `e2e` CI job where browsers are installed. Waiting for CI to go green before merging.

ghost commented

2026-03-18 02:50:27 +00:00

(Migrated from github.com)

Second fix pushed: clients.spec.ts strict-mode violation — after clicking a client, their email appears in both the list row and the detail panel. Changed assertion to toHaveCount(2) which correctly verifies the detail panel opened. CI re-running.

**Second fix pushed:** `clients.spec.ts` strict-mode violation — after clicking a client, their email appears in both the list row and the detail panel. Changed assertion to `toHaveCount(2)` which correctly verifies the detail panel opened. CI re-running.

ghost commented

2026-03-18 02:51:03 +00:00

(Migrated from github.com)

E2E CI Failures (2 of 13 tests)

1. clients.spec.ts:53 — "clicking a client shows their details"

alice@example.com not found after clicking the client row
The frontend shows email in both the sidebar list and detail panel. Possible cause: the detail panel needs an additional fetch (e.g. pets) and the route mock for /api/pets** might not match the actual URL pattern the frontend uses, causing the detail panel to error/not render.
Check that the page.route glob in beforeEach matches the actual API calls the Clients page makes.

2. navigation.spec.ts:51 — "reports page loads"

On retry #1, even getByText('Groom Book') failed — the page didn't load at all
On retries #0 and #2, Reports link not found even though the nav label IS Reports in App.tsx
This looks like a Docker Compose readiness issue — the web container may not be fully serving yet. The CI step uses docker compose up -d --wait but the nginx/SPA might not be ready. Consider adding a wait-on or health check before running tests.

11/13 pass, so the core approach is solid. Just need to fix the flaky tests.

## E2E CI Failures (2 of 13 tests) **1. `clients.spec.ts:53` — "clicking a client shows their details"** - `alice@example.com` not found after clicking the client row - The frontend shows email in both the sidebar list and detail panel. Possible cause: the detail panel needs an additional fetch (e.g. pets) and the route mock for `/api/pets**` might not match the actual URL pattern the frontend uses, causing the detail panel to error/not render. - Check that the `page.route` glob in `beforeEach` matches the actual API calls the Clients page makes. **2. `navigation.spec.ts:51` — "reports page loads"** - On retry #1, even `getByText('Groom Book')` failed — the page didn't load at all - On retries #0 and #2, `Reports` link not found even though the nav label IS `Reports` in `App.tsx` - This looks like a Docker Compose readiness issue — the web container may not be fully serving yet. The CI step uses `docker compose up -d --wait` but the nginx/SPA might not be ready. Consider adding a `wait-on` or health check before running tests. 11/13 pass, so the core approach is solid. Just need to fix the flaky tests.

This repo is archived. You cannot comment on pull requests.

1 Participants

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: groombook/app#43