Code-aware browser testing agent β 13 Playwright tools for AI code editors via MCP
Copy the AI prompt to install this server into Claude Code, Cursor, or another agent β or use 1-click editor setup below.
π‘ Paste into ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows)
Code-aware browser testing agent for AI-powered editors.
Reads your codebase, understands every route and form, opens a real Playwright browser, explores every element, and reports what works and what breaks β with screenshots.
Works as an MCP server that gives your AI editor (Claude Code, Cursor, Windsurf, VS Code Copilot) 13 browser testing tools β or as a standalone CLI.
This command:
~/.claude/settings.json, ~/.cursor/mcp.json, etc.) so the tools are available in every project, every session.env, vite.config, framework defaults)VIBE.md (edit with your test credentials) and vibe.config.jsonThen open your editor and say:
"Scan this codebase and test it against http://localhost:3000"
Your AI will pick up the tools automatically and start testing.
No test cases to write. The AI reads your source code to understand real field names and routes, opens a browser, tests everything, and shows you what's broken.
Detects and configures all installed editors. Done.
Add to ~/.claude/settings.json (global β works in every project):
Or add to .mcp.json in your project root (project-level only):
Add to ~/.cursor/mcp.json (global) or .cursor/mcp.json (project):
Add to ~/.codeium/windsurf/mcp_config.json:
Add to .vscode/mcp.json in your project:
Add to .roo/mcp.json:
13 tools available to your AI editor after setup:
| Tool | When to call | Returns |
|---|---|---|
scan_codebase | Always first. Reads source code, finds routes/forms/tests/gaps | Routes, forms, coverage map, generated scenarios, route_changes since last scan |
get_context | Before writing test steps. Returns source files for a feature | Actual source code with real field names and selectors |
login | When app requires authentication | Post-login screenshot, token state, API calls observed |
scan_page_elements | To see all interactive elements on a page | Element list with selectors + page screenshot |
explore_page | Broad "does everything work?" testing | Interaction results, API calls, errors, screenshot |
execute_scenario | Run specific test steps | Step-by-step logs + screenshots |
get_coverage | View coverage map and untested routes | Coverage entries, gaps, available scenarios |
suggest_tests | Find coverage gaps after exploration | Prioritized, ready-to-run scenarios with steps |
take_screenshot | Quick visual verification | Screenshot of any URL |
generate_report | Build HTML report (auto-opens) | Report path + summary |
run_full_test | One-shot: scan β execute β explore β report | Full results + snapshot_diff vs last run |
run_converge | Iterative testing until thresholds | Summary across all rounds + snapshot_diff vs last run |
cleanup | Close browsers, free resources | β |
scan_codebase
get_context
login
scan_page_elements / explore_page
execute_scenario
Step actions: navigate, fill, click, select, wait, assert, upload
take_screenshot
run_full_test
run_converge
Tell your AI editor:
The AI will:
scan_codebase β understand routes, forms, existing testsget_context("login") β read actual login form source codelogin β authenticate in a real browserexplore_page("/dashboard") β click everything, observe what breaksexplore_page("/settings") β samesuggest_tests β find coverage gapsexecute_scenario Γ N β run targeted test flowsgenerate_report β HTML report opens automaticallycleanup β close browsersThe AI will:
scan_codebase (if not already done)get_context("checkout") β read CheckoutForm.tsx, api/orders/route.ts etc.login β authenticateexecute_scenario β fill the real form fields from source codegenerate_reportThe AI will:
login β test the login flowtake_screenshot β visual confirmation of the post-login stateThe AI will run explore_page on every route, collecting API errors, broken elements, and failed interactions, then suggest_tests with the broken items marked as high priority.
What it creates:
| File | Where | Purpose |
|---|---|---|
.mcp.json | Project root | Claude Code MCP config (project-level) |
~/.claude/settings.json | Global | Claude Code MCP config (all projects) |
.cursor/mcp.json | Project root | Cursor MCP config |
~/.cursor/mcp.json | Global | Cursor MCP config (all projects) |
.cursor/rules/vibe-test.mdc | Project | Cursor rules β alwaysApply: true |
.windsurfrules | Project | Windsurf instructions |
~/.codeium/windsurf/mcp_config.json | Global | Windsurf MCP config (all projects) |
.vscode/mcp.json | Project | VS Code Copilot MCP config |
.github/copilot-instructions.md | Project | GitHub Copilot instructions |
.roo/mcp.json | Project | Roo Code MCP config |
CLAUDE.md | Project | Claude Code session instructions |
AGENTS.md | Project | Universal agent instructions (Codex, Devin, Zed) |
VIBE.md | Project | Test guidance β edit with your credentials |
vibe.config.json | Project | Config β URL auto-detected from your project |
Options:
After init, edit VIBE.md with your login URL and test credentials.
run options| Option | Default | Description |
|---|---|---|
--mode fast|deep | deep | fast: quick scan. deep: full feature extraction + exploration |
--no-headed | β | Run browser headless (default: visible) |
--codebase <path> | cwd | Path to project root |
--scope <routes...> | all | Test only specific routes |
-c <path> | vibe.config.json | Config file path |
converge options| Option | Default | Description |
|---|---|---|
--max-rounds <n> | 4 | Max follow-up rounds after baseline |
--target-pass-rate <r> | 0.92 | Stop when pass rate β₯ this (0β1) |
--max-gaps <n> | 2 | Stop when critical+important gaps β€ this |
Create VIBE.md in your project root. Vibe Test reads it automatically on every run.
See VIBE.example.md for the full template.
Created automatically by init with auto-detected URL. Edit as needed:
| Key | Description |
|---|---|
url | App URL β localhost or staging. Auto-detected by init. |
mode | fast (heuristic scan) or deep (full extraction + exploration) |
auth.strategy | credentials (form login), basic (HTTP Basic Auth), or skip |
auth.credentials | Login credentials β persisted across runs once used |
never_interact | Text patterns or CSS selectors to skip during exploration |
scope.exclude | Route patterns to exclude from testing |
scope.max_routes | Cap how many routes are tested per run |
scope.seed_routes | Concrete URLs for dynamic-segment routes the parser can't enumerate (e.g. /live/[slug] β /live/dev-mode-a-now). Each seeded route inherits requires_auth and the source file from its dynamic parent. |
browser.headed | true = visible browser. CLI default true, MCP server default false (headless) so editor sessions aren't disrupted by pop-up windows. |
browser.slowMo | Milliseconds between actions (useful for debugging) |
routes | auto (default) discovers routes from the codebase. config uses only routes explicitly listed in config. |
| Framework | Routes | API endpoints | Forms |
|---|---|---|---|
| Next.js App Router | β | β | β |
| Next.js Pages Router | β | β | β |
| Next.js (src/ variant) | β | β | β |
| React SPA (react-router) | β | β | β |
| Vue + Vite (vue-router) | β | β | β |
| Nuxt | β | β | β |
| SvelteKit | β | β | β |
| Express / Fastify | β | β | β |
| Monorepos (Turborepo, pnpm, Lerna) | β | β | β |
Existing test files are also read to build a coverage map:
| Test runner | Supported |
|---|---|
| Jest / Vitest | β |
| Playwright | β |
| Cypress | β |
Vibe Test learns across runs and stores intelligence in .vibe/:
[name='email'] worked on /login, uses it next run.vibe/route-manifest.json) β every scan diffs against the previous one; new and removed routes are surfaced as route_changes on scan_codebase results so the AI can immediately cover them.vibe/run-snapshot.json) β every run captures per-route pass/fail status and diffs against the prior run; snapshot_diff flags newly_passing (fixes), newly_failing (regressions), still_failing, plus added/removed routesReset with npx vibe-testing@latest reset to start fresh.
After a second run, the console and VibeRunResult include a snapshot diff:
run_converge returns the same shape, so iterative runs in your editor highlight what you just broke.
When you ask your editor to "test the login flow", here is exactly what it does:
Does vibe-test use an AI/LLM internally? No. It uses heuristic verification (URL changes, toast detection, API errors). Your editor's AI (Claude, GPT-4, etc.) is the brain β it sees screenshots and decides what to test next.
What's the difference between explore_page and execute_scenario?
explore_page is broad β it clicks every button and input it finds and reports the results. execute_scenario is precise β you give it specific steps and it follows them exactly. Use explore_page to find what's on a page, then execute_scenario to test specific flows.
What's get_context for?
It returns the actual source code for a feature β so the AI knows [name='email'] instead of guessing #email-input. Always call it before writing test steps for a specific feature.
Does it handle SPAs with client-side routing? Yes. Playwright navigates the real browser, so client-side routing (React Router, Vue Router, etc.) works naturally.
Does it handle login / authentication?
Yes. The login tool fills credentials in a real browser, captures auth tokens from localStorage/cookies, and keeps that session alive for authenticated tests. Credentials are persisted in .vibe/memory/ and reused automatically.
Will it click "Delete Account" or other destructive buttons?
No. Set never_interact in vibe.config.json or VIBE.md to blocklist dangerous actions. Any button whose text or selector matches is skipped during exploration.
Can I use it without an AI editor?
Yes β vibe-test run https://your-app.com runs standalone. It scans, generates scenarios, executes them, and produces an HTML report without needing an editor.
How do I test a staging environment?
Set url in vibe.config.json to your staging URL, or pass it as a CLI argument: npx vibe-testing@latest run https://staging.myapp.com.
Does it work with monorepos?
Yes. init detects Turborepo/pnpm/yarn workspaces and finds the frontend app automatically.
A Node 20 + Chromium image is included for environments that prefer container-based MCP servers (and for Glama.ai quality scoring):
See CHANGELOG.md for version history.
MIT β Aishwary Shrivastav
Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.
[](https://allmcps.com/mcp/vibe-test-browser-testing-agent)<a href="https://allmcps.com/mcp/vibe-test-browser-testing-agent"><img src="https://allmcps.com/api/badge/vibe-test-browser-testing-agent?style=directory" alt="Vibe Test β Browser Testing Agent on AllMCPs" /></a>