Use an independent AI browser report to verify a coding fix
At a glance
A developer feeds Passmark's failed UI assertion into Claude Code and reruns focused tests to check the repair. This workflow is listed under AI-Assisted Development, Browser Testing, Regression Testing.
- Agents / tools
- Claude Code, Passmark, Playwright, OpenRouter
SourceBuilding a tool for these workflows? See weekly rates.
What they did
1) For the author's sample, use Node.js 18+, Claude Code, and an OpenRouter API key. Clone https://github.com/ssnmahesh/breaking-apps-hackathon, run npm install and npx playwright install chromium, and configure OPENROUTER_API_KEY in the local project environment. 2) Keep npm run serve running in one terminal. The supplied Playwright configuration uses one worker, screenshots, and a beforeEach hook that seeds localStorage with entries matching the app's JSON structure. 3) In another terminal, run npx playwright test tests/devlog.spec.ts --project chromium. Inspect failed assertions and screenshots; for a real UI failure, give the AI Summary to Claude Code as the repair request. 4) Rerun the affected behavior with the same command plus -g "edit", and use npx playwright show-report to inspect the evidence. Check edit-state labels separately from saving an edit so the save does not reset the state before the label assertion.
How it went
The author reports that both focused edit tests passed after the fix. The final full run passed 9 of 11 tests: the streak defect was intentionally retained, and another failure was attributed to a provider rate limit.
Worth knowing
The published sample already contains the edit fix and intentionally retains the streak bug. It is a prototype example, not an all-green production suite. Provider errors need separate investigation from assertions that describe incorrect UI state.
