Claude-code-blueprint e2e-check

Run E2E tests or interactive browser verification. Triggers on: 'run e2e', 'e2e test', 'browser test', 'check in browser', 'verify UI', 'interactive test'.

install

source · Clone the upstream repo

git clone https://github.com/faizkhairi/claude-code-blueprint

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/faizkhairi/claude-code-blueprint "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/e2e-check" ~/.claude/skills/faizkhairi-claude-code-blueprint-e2e-check && rm -rf "$T"

manifest: skills/e2e-check/SKILL.md

source content

Run E2E tests or perform interactive browser-based verification using Playwright.

Mode Detection

Parse

$ARGUMENTS

to determine mode:

Runner mode (default): Run the Playwright test suite via CLI
Interactive mode: If
```
--interactive
```
or
```
interactive
```
appears in args, use Playwright MCP tools for manual browser walkthrough

Runner Mode

1. Detect project

From

$ARGUMENTS

or current working directory:

Match project name from cwd (e.g.,
```
my-app
```
if cwd contains
```
my-app
```
)
Check
```
CLAUDE.md
```
in the project root for the configured dev port and test command
No match: ask which project to target

2. Pre-flight check

Check if the dev server is running on the expected port (read from

CLAUDE.md

package.json

Use:

bash -c "curl -s -o /dev/null -w '%{http_code}' http://localhost:{port}/ 2>/dev/null"

or equivalent.

If the server is NOT running:

Report: "Dev server not running on port {port}. Start it with
```
yarn dev
```
/
```
npm run dev
```
, then re-run /e2e-check."
Do NOT auto-start the dev server. Stop here.

3. Run tests

Run the E2E test command from

CLAUDE.md

package.json

(e.g.,

yarn test:e2e

npm run test:e2e

If a test filter was provided (e.g.,

auth

), resolve it to the spec file path:

```
auth
```
→
```
tests/e2e/auth.spec.ts
```
Full path → use as-is

4. Parse output

Extract from Playwright output:

Total, passed, failed, skipped counts
Duration
On failure: spec file name, test name, error message

5. Report

E2E Test Results -- {project}
================================
Total: X | Passed: X | Failed: X | Skipped: X
Duration: Xs
Baseline: {expected from CLAUDE.md} tests

[If failures:]
FAILURES:
- {spec-file} > {test-name}: {error summary}

[If screenshots saved:]
Screenshots: test-results/{spec-file}/

6. On failure

Check
```
test-results/
```
directory for saved screenshots
Analyze failure type: timeout? Element not found? Assertion mismatch? Network error?
Suggest fix based on the failure pattern

Interactive Mode

Use Playwright MCP tools to manually verify a user journey in the browser.

1. Navigate

Use

mcp__playwright__browser_navigate

to open

http://localhost:{port}

(port from

CLAUDE.md

ALWAYS use

localhost

, NEVER
127.0.0.1
(cookie domain mismatch issues).

2. Default journey (if no specific flow in args)

Navigate to login page
Fill credentials using
```
mcp__playwright__browser_fill_form
```
(use dev test credentials from
```
.env
```
or
```
.env.test
```
)
Submit login form via
```
mcp__playwright__browser_click
```
Wait for dashboard to load via
```
mcp__playwright__browser_wait_for
```
Take snapshot via
```
mcp__playwright__browser_snapshot
```
-- verify dashboard renders data (not empty state)
Navigate to a key page (e.g., main feature list, report list)
Verify data is present (not loading spinner, not error)

Take screenshot via

mcp__playwright__browser_take_screenshot

as evidence

3. Custom journey

If args specify a flow (e.g.,

--interactive reports

), walk through that specific flow step by step using:

```
mcp__playwright__browser_navigate
```
for page navigation
```
mcp__playwright__browser_snapshot
```
to read current page state (DOM)
```
mcp__playwright__browser_fill_form
```
for form inputs
```
mcp__playwright__browser_click
```
for button/link clicks
```
mcp__playwright__browser_select_option
```
for dropdowns
```
mcp__playwright__browser_wait_for
```
for loading/transition states

mcp__playwright__browser_take_screenshot

for visual evidence

4. Report

Summarize:

What pages were visited
What was verified (data rendered, forms worked, navigation succeeded)
Any issues found (errors, empty states, broken elements)
Screenshot paths for evidence

Rules

Always
localhost
, never
127.0.0.1
-- cookie domain issues
Dev port: read from
```
CLAUDE.md
```
or
```
package.json
```
for the active project
Package manager: check
```
CLAUDE.md
```
or detect from lockfile (
```
yarn.lock
```
→ yarn,
```
package-lock.json
```
→ npm)
Never auto-start dev servers -- report and stop if not running
E2E baselines: compare against baseline documented in
```
CLAUDE.md
```