AI agent browser testing means letting a coding agent open your web app in a real browser, click through it and read the console, so it checks its own change instead of guessing. The usual way to give an agent a browser is Playwright MCP, an MCP server that turns browser actions into tools. You can add it to Claude Code or Codex yourself, or use AgentVera, which starts an isolated Chrome for your agents and lets you watch every tab live.
This guide covers what an agent can do in a browser, the manual setup, the AgentVera browser, and a workflow for testing a change end to end.
Why give the agent a browser
Without a browser, an agent that changes your UI can only read code and hope. It does not see that the button is hidden behind the header, that the form throws on submit, or that a console error appears on load. You end up as the agent’s eyes: open the page, describe the problem, paste the error.
With a browser the loop closes:
- The agent changes the code.
- It opens the page, clicks through the flow and takes a screenshot.
- It reads the console messages.
- It fixes what it found and checks again.
You still review the result, but the obvious breakage is caught before you look.
What the agent can do with Playwright MCP
Playwright MCP exposes the browser as tools. Common ones:
| Tool | What the agent does with it |
|---|---|
browser_navigate | Opens a URL, such as your dev server |
browser_snapshot | Reads the page structure (the accessibility tree) to find elements |
browser_click | Clicks a button, link or field |
browser_type | Types into an input |
browser_take_screenshot | Captures what the page looks like |
browser_console_messages | Reads console logs and errors |
The snapshot is the key part. Instead of guessing at pixel positions, the agent reads a structured view of the page and clicks elements by reference, which is far more reliable.
Set up Playwright MCP by hand
For Claude Code, add the server from your project:
claude mcp add playwright npx @playwright/mcp@latestFor Codex, add it to ~/.codex/config.toml:
[mcp_servers.playwright]
command = "npx"
args = ["@playwright/mcp@latest"]Then start your dev server and ask the agent something concrete:
Open http://localhost:3000/signup, fill the form with a test email,
submit it, and tell me what happens. Check the console for errors.This works, but you do not see what the agent sees unless you ask for screenshots, and depending on how you start the server the browser can share state with the one you use every day. For the basics of MCP itself, see what an MCP server is.
The AgentVera browser
AgentVera is a desktop app for macOS, Windows and Linux that runs coding agent CLIs side by side. It has its own agent browser built on the same Playwright MCP.
Turn it on for an agent
In the agent dialog, the Browser field has three choices:
| Option | What it does |
|---|---|
| Off | The agent does not use a browser |
| AgentVera browser | Through Playwright MCP; you watch the tabs live on the app’s Browser page |
| Claude in Chrome | Claude Code only: your own Chrome with the Claude extension (--chrome) |
Pick AgentVera browser and start the agent. AgentVera runs a separate headless Chrome with its own profile and connects the agent’s Playwright MCP to it. It uses a Chrome, Edge, Brave or Chromium already installed on your machine. Your personal Chrome profile, cookies and passwords never reach this browser.
The option is there for agents that take MCP servers: Claude Code, Codex, Gemini CLI, Copilot and most of the other supported CLIs. Remote agents over SSH do not get it.
Watch the tabs live, and take over
The app’s Browser page shows the tabs the agent opens as it works. It is a normal browser view, not a recording: you can click and type to take over at any moment, for example to log in or close a cookie banner, and then hand back to the agent.
The toolbar has what you would expect: an address bar, back, forward and reload, find in page, zoom, bookmarks and history, and Screenshot, which saves to your Downloads folder. The right-click menu has Inspect for DevTools, and you can open the browser in a separate window. The page also shows the endpoint agents connect to.
Send console errors back to an agent
The Browser page has a console panel for each tab. Two shortcuts close the loop without copy and paste:
- Fix errors sends the latest console errors to an agent with the instruction to fix them.
- Each line has Fix and Send to agent, so you can pick one error.
That is the same send-to-agent flow the rest of the app uses; see send to agent.
Open your dev server in it
When an agent starts a dev server, the port shows up in the Ports tab of the right panel with Open in the AgentVera browser and Open in the system browser. Links that agents print also open in the in-app browser; hold ⌥ while clicking to use your system browser instead.
The AgentVera browser is part of the free plan.
A workflow for testing a change end to end
Here is a setup that works well for a UI change:
- Create the agent with AgentVera browser turned on, ideally in its own git worktree.
- Ask for the change and the check together, for example: “Add a password strength hint to the signup form. Then open the signup page, try a weak and a strong password, take a screenshot of each, and check the console.”
- Watch the Browser page while it works. If it gets stuck on a login, take over, log in, and tell the agent to continue.
- If the console shows errors, press Fix errors.
- When the flow works, ask the agent to write it down as a Playwright test file, so the check runs in CI from now on.
- Review the diff and the screenshots before you merge.
Step 5 matters. Browsing through MCP is great for finding and verifying problems, but it is not a test suite. A regular test file is what keeps the flow working next month.
Prompts that work well
- “Open the page, take a snapshot, and list every button that does nothing when clicked.”
- “Resize to a phone width, take a screenshot, and fix anything that overflows.”
- “Go through checkout with the test card, then report every console error and failed request you saw.”
Be specific about the URL and what success looks like. “Test the app” gives the agent too much room; “sign up, then confirm the dashboard shows the new user’s name” gives it a goal it can check.
Things to keep in mind
- The agent can click anything. Point it at a local or staging environment, not production with real data.
- Logins. The AgentVera browser has its own profile, so you log in there once. Use test accounts.
- Screenshots cost context. Ask for them when they help, not on every step.
- Pick the right browser option. Claude in Chrome uses your real Chrome and its sessions; the AgentVera browser keeps them apart.
If you are building a site with an agent from scratch, building a website with AI shows the whole flow, and how to vibe code covers the habits that keep it on track.
Download AgentVera to give your agents a browser you can watch, or read more on the agent browser page.