E2E Validation for Frontend Modifications
Prerequisites
Requires Playwright MCP server. If the browser_navigate tool is unavailable, instruct the user to add it:
claude mcp add playwright -- npx @playwright/mcp@latest
Validation Steps
After completing frontend changes:
- Build the CLI
pnpm build:cli
- Start the dev server
cd examples/agent && node ../../packages/cli/dist/index.js dev
Verify server is running
- URL: http://localhost:4111
- Wait for the server to be ready before proceeding
Identify impacted routes
- Routes are defined in
packages/playground/src/App.tsx - Browse them ALL to verify behavior
- Routes are defined in
Test with Playwright MCP
- Use
browser_navigateto visit each impacted route - Visually verify the changes render correctly
- Test any interactive elements modified
- Use
browser_screenshotto capture results for the user
- Use
Quick Reference
| Step | Command/Action |
|---|---|
| Build | pnpm build:cli |
| Start | cd examples/agent && node ../../packages/cli/dist/index.js dev |
| App URL | http://localhost:4111 |
| Routes | @packages/playground/src/App.tsx |