Add deterministic Playwright screenshot flows - #39
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
@copilot how should I test this PR to make sure its working? |
There was a problem hiding this comment.
Pull request overview
Adds a Playwright-based E2E harness to generate deterministic screenshot checkpoints for core GoodWallet journeys (onboarding/login entry, authenticated home, and GoodDollar claim) across desktop and mobile Chromium, gated behind a new Playwright test mode flag.
Changes:
- Introduces Playwright config + Chromium desktop/mobile projects, plus Yarn scripts to run E2E flows.
- Adds a
playwrightTestModeconfig flag and uses it to force deterministic UI in Home (balance) and Claim (verification-required state). - Adds an initial E2E spec that blocks external browser traffic, seeds storage state, and writes named PNG checkpoints.
Reviewed changes
Copilot reviewed 6 out of 8 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| yarn.lock | Adds @playwright/test/playwright dependencies to the lockfile. |
| tests-playwright/wallet-flows.e2e.ts | New Playwright E2E flows that prepare deterministic state, block non-local requests, and capture screenshots. |
| src/sections/Home/components/WalletSection.tsx | Forces a deterministic displayed USD value in Playwright mode and adds a test hook on the action container. |
| src/sections/GoodDollar/components/Claim/ClaimView.tsx | Adds Playwright-mode short-circuit to render whitelist-required state. |
| playwright.config.ts | New Playwright configuration, projects, artifact output, and Next dev server boot with test-mode env. |
| package.json | Adds test:e2e scripts and Playwright dev dependency. |
| config.ts | Adds playwrightTestMode flag to shared config. |
| .gitignore | Ignores generated screenshots and Playwright artifacts directory. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| if (config.playwrightTestMode) { | ||
| return <RequireWhitelist onWhitelist={() => undefined} /> | ||
| } |
| await page.context().route("**/*", (route) => { | ||
| const { hostname, pathname } = new URL(route.request().url()) | ||
| if (pathname === "/api/tokens") { | ||
| return route.fulfill({ | ||
| contentType: "application/json", | ||
| body: JSON.stringify({ tokens: {} }), | ||
| }) | ||
| } | ||
| return hostname === "localhost" ? route.continue() : route.abort() | ||
| }) |
There was a problem hiding this comment.
Aborting all non-localhost requests also blocks Google Fonts
The tests require no credentials — the config auto-generates a fresh throwaway wallet seed each run. Prerequisites: Node.js, Yarn, and the Playwright browser: yarn install
yarn playwright install chromiumRun the screenshot tests (both desktop and mobile): yarn test:e2eThis spins up the Next.js dev server automatically with test-mode flags, then runs Expected output — 6 screenshots written to
All tests pass when the 6 screenshots are written and there are no assertion failures. Artifacts (traces/videos) for any failing test are retained in If you want to refresh the stored screenshots as the new baseline, use: yarn test:e2e:screenshots |
blueogin
left a comment
blueogin
left a comment
There was a problem hiding this comment.
Screenshots are write-only + gitignored : no baseline comparison, and CI doesn’t run Playwright.
| await page.context().route("**/*", (route) => { | ||
| const { hostname, pathname } = new URL(route.request().url()) | ||
| if (pathname === "/api/tokens") { | ||
| return route.fulfill({ | ||
| contentType: "application/json", | ||
| body: JSON.stringify({ tokens: {} }), | ||
| }) | ||
| } | ||
| return hostname === "localhost" ? route.continue() : route.abort() | ||
| }) |
There was a problem hiding this comment.
Aborting all non-localhost requests also blocks Google Fonts
| if (config.playwrightTestMode) { | ||
| return <RequireWhitelist onWhitelist={() => undefined} /> | ||
| } |
|
@copilot Whats the cause of the error and why can you not fetch generated screenshots? shouldn't they just be local in the sessions container? |
The screenshots were generated locally and are present in this checkout; they are committed in |
…copilot/automated-playwright-screenshot-flow
…nd configure pixel-ratio boundaries
…duce commitable screenshots
Introduces a credential-free, deterministic browser-test mode for initial GoodWallet journeys. Chromium coverage now captures desktop and mobile checkpoints for localized onboarding, authenticated home actions, and claim verification.
Test harness
Deterministic state
Checkpoint coverage
login-onboarding-da-{desktop,mobile}.pnghome-balances-overflow-en-{desktop,mobile}.pngclaim-requires-verification-en-{desktop,mobile}.png