Open
Conversation
- Install @playwright/test in demo package - playwright.config.ts: loads .env, starts Vite via webServer, wires globalSetup/globalTeardown - e2e/global-setup.ts: starts Postgres (docker compose -d), waits for readiness, seeds deterministic test data, clears the zero-cache replica, then spawns zero-cache-dev and waits for port 4848 - e2e/global-teardown.ts: kills the zero-cache process on exit - e2e/seed-test.ts: 10 fixed items (Alpha–Kappa) with inverted created/modified timestamps so all four sort orderings are distinct - e2e/tests/app.spec.ts: heading, item count, row rendering, default sort - e2e/tests/sort.spec.ts: sort field and direction toggle assertions - e2e/tests/item-detail.spec.ts: panel open/close, URL hash permalink, aria-selected, description and ID display Run with: cd demo && pnpm test:e2e https://claude.ai/code/session_01H3p3JUgo2y2389e3qKBo7N
- Use node: protocol prefix for all Node.js built-in module imports
- Expand seed data from 10 to 200 items so the virtualizer exercises
paging (min page size is 100); extra items have inverted created/
modified so all four sort orderings still produce distinct first rows:
modified DESC → Alpha Item, modified ASC → Test Item 200,
created DESC → Kappa Item, created ASC → Test Item 011
- Remove manual loadDotEnv() helper from playwright.config.ts; env vars
are now loaded exclusively via `node --env-file=.env` in test:e2e
- Update sort.spec.ts assertions to match the new 200-item dataset
- Add scroll.spec.ts: scrolls the virtualizer to the bottom and verifies
the last row (index 199) becomes visible (tests paging)
- Add .github/workflows/e2e.yml CI workflow that installs Playwright,
runs `pnpm test:e2e` (globalSetup handles postgres + zero-cache), and
uploads the playwright-report artifact on failure
https://claude.ai/code/session_01H3p3JUgo2y2389e3qKBo7N
`node --env-file=.env ./node_modules/.bin/playwright` fails because pnpm generates a bash wrapper in .bin/, not a JS file. Node.js can't execute bash and throws a SyntaxError before playwright even starts. The package.json bin field for @playwright/test points to cli.js, so use that path directly: node --env-file=.env ./node_modules/@playwright/test/cli.js test https://claude.ai/code/session_01H3p3JUgo2y2389e3qKBo7N
tsconfig.app.json's "./*.ts" glob picked up playwright.config.ts and tsgo failed with TS2614 because @playwright/test is a CJS package whose named exports conflict with the project's verbatimModuleSyntax + NodeNext settings. Fix: - Exclude ./playwright.config.ts from demo/tsconfig.app.json - Add demo/e2e/tsconfig.json that extends tsconfig-shared.json and explicitly adds "types": ["@playwright/test"], covering both playwright.config.ts and all e2e/**/*.ts files - Add demo/e2e/tsconfig.json to the root check-types script so the playwright files are still type-checked https://claude.ai/code/session_01H3p3JUgo2y2389e3qKBo7N
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
globalSetup/globalTeardown
readiness, seeds deterministic test data, clears the zero-cache
replica, then spawns zero-cache-dev and waits for port 4848
created/modified timestamps so all four sort orderings are distinct
aria-selected, description and ID display
Run with: cd demo && pnpm test:e2e
https://claude.ai/code/session_01H3p3JUgo2y2389e3qKBo7N