browser-e2e
Skill2 starsChanged 5 months agoMITView on GitHub
Browser-driven E2E discipline. Thin pointer — defers to anthropics:webapp-testing plugin for Python Playwright scripts and to playwright MCP / chrome-devtools MCP / Claude in Chrome based on the situation. Use when verifying any web change.
In this repository60 other files it gives its agents.
- .claude/CLAUDE.mdCLAUDE.md
- CLAUDE.mdCLAUDE.md
- analyzeSkill
- animation-disciplineSkill
- api-versioningSkill
- autopilotSkill
- characterizeSkill
- clarifySkill
- codemodSkill
- constitution-compactSkill
- constitutionSkill
- context-budgetSkill
- creative-webSkill
- db-migrationSkill
- debugSkill
- detect-stackSkill
- dispatch-criteriaSkill
- dreamSkill
- experimentSkill
- fastapiSkill
- flag-cleanupSkill
- flag-rolloutSkill
- flask-realtimeSkill
- framework-detectorSkill
- front-end-designSkill
- grill-meSkill
- handoffSkill
- image-generationSkill
- implementSkill
- initiativeSkill
- instinctSkill
- loopSkill
- nextjsSkill
- observabilitySkill
- okr-alignSkill
- parallel-swarmSkill
- pivotSkill
- planSkill
- pr-bodySkill
- prime-disciplineSkill
- prod-observabilitySkill
- react-nodeSkill
- react-viteSkill
- release-trainSkill
- researchSkill
- reviewSkill
- security-guardSkill
- self-healSkill
- shipSkill
- skill-creatorSkill
- specifySkill
- tailwind-disciplineSkill
- tasksSkill
- tdd-loopSkill
- token-budgetSkill
- typographySkill
- verify-loopSkill
- verifySkill
- wip-checkpointSkill
- <kebab-case-skill-name>Skill
The file
We split this skill into the rules it gives an agent
1 rule. About 0 are common, 0 are distinctive, and 1 is very specific to this project.
≈0
Common · estimate
Many files like this have a rule of this kind.
≈0
Distinctive · estimate
This author's own choices. Worth a look.
1
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Very specific: line 67
If a project has no coverage tooling yet, the autopilot verifier must skip the gate and flag ESCALATION in OVERNIGHT_REPORT.md.
≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
Browser-Driven E2E
Decide which tool before writing code:
| Goal | Tool | Why |
| Authenticated user journey (Gmail, your admin panel, Notion) | Claude in Chrome (claude --chrome) | Uses your real cookies |
| Deterministic CI test, no auth | anthropic:webapp-testing plugin | Python Playwright + with_server.py lifecycle helper |
| Exploratory drive (clicks, fills, snapshots) | playwright-mcp | Snapshot-based deterministic refs |
| Perf, network, Lighthouse | chrome-devtools-mcp | Full DevTools, traces |
| Visual regression | Chromatic / Percy / Argos (out of band, CI) | Pixel diff at PR time |
The user-journey pattern (playwright-mcp)
1. browser_navigate(url)
2. browser_snapshot() # capture a11y tree
3. browser_click(ref: "<from snapshot>")
4. browser_fill(ref: "...", value: "...")
5. browser_wait_for(text: "Welcome")
6. browser_take_screenshot(filename: "verify/<date>/step-<n>.png")
7. browser_console_messages() # assert: no errors
8. browser_network_requests() # assert: 200 on critical endpointsThe codegen-then-expand pattern
npx playwright codegen http://localhost:3000
# perform the journey by hand
# save as tests/e2e/<feature>.spec.ts
# feed to researcher agent: "expand with edge cases per the spec acceptance criteria"Hard rules
- Real-ish data. Fresh seeded DB or test tenant. No internal mocks.
- Capture at every step. Screenshot before and after the critical action.
- Assert on the journey, not implementation. "User sees dashboard" > "div.welcome present".
- Negative paths. Bad password, missing field, expired session. Each gets a step.
- Save artifacts.
verify/<date>-<feature>/is the home.
Coverage gate ("100% coverage" enforcement)
Per CLAUDE.md §VII, the verifier captures coverage alongside screenshots. .claude/scripts/verify.sh enforces:
| Tier | Threshold | Source |
| Line coverage | ≥ 80% on changed files | c8 (Node), coverage.py (Python), go test -cover |
| Branch coverage | ≥ 70% on changed files | c8, coverage.py |
| E2E user journey | 100% of spec acceptance criteria | one Playwright step per criterion |
Configure your test runner to emit coverage/coverage-summary.json (c8 / @vitest/coverage-v8 / coverage report --format=json). The gate reads that file and fails on threshold breach.
For UI-specific coverage:
- Playwright + c8:
c8 --reporter=json-summary playwright testproduces the summaryverify.shreads. - @playwright/test built-in: enable trace in
playwright.config.ts, post-process for code coverage.
If a project has no coverage tooling yet, the autopilot verifier must skip the gate and flag ESCALATION in OVERNIGHT_REPORT.md. Never fake-pass without the report. Set SKIP_COVERAGE=1 for explicit short-term skips.
References
- chrome-devtools-mcp: https://github.com/ChromeDevTools/chrome-devtools-mcp
- playwright-mcp: https://github.com/microsoft/playwright-mcp
- anthropic:webapp-testing: https://github.com/anthropics/skills/blob/main/skills/webapp-testing/SKILL.md
- Claude in Chrome: https://code.claude.com/docs/en/chrome
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.