To create a browser snapshot with MCP, run the Playwright MCP server, navigate to a page, and call browser_snapshot. The result is a structured accessibility tree—not an image—with references such as e5 that you can pass to interaction tools. Use a screenshot separately when you need visual layout, charts, or canvas content.
What an MCP browser snapshot contains
Playwright MCP exposes the current page as text organized by accessibility roles. A typical result looks like this:
- heading "todos" [level=1] [ref=e3]
- textbox "What needs to be done?" [ref=e5]
- list [ref=e8]
- listitem [ref=e9]
- checkbox "Toggle Todo" [ref=e10]
Each exposed node can have a reference. The reference is valid only for the current snapshot of the current page. It is not a CSS selector, DOM id, or permanent identifier.
This representation is useful to an AI agent because controls are named and addressable. It also avoids sending an entire pixel image when the task is to find a form field, button, heading, or table row.
Free tools Windows power users keep installed
One-click scans. No signup required.
#1 Best Overall
Prerequisites and MCP client setup
- Node.js 20 or newer.
- An MCP client such as VS Code, Cursor, Windsurf, Claude Desktop, or another compatible host.
- Network access to the site you want to inspect and permission to automate it.
Add the Playwright server to your MCP client’s configuration:
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"]
}
}
}
Restart or reconnect the MCP client after saving the configuration. The client should show the Playwright tools, including navigation, browser_snapshot, browser_find, clicking, typing, and screenshot capture.
Create a snapshot step by step
- Start the server. Launch the MCP configuration above through your client.
- Navigate. Use the browser navigation tool to open the target URL and wait for the page to load.
- Capture the current state. Call
browser_snapshot. - Read the tree. Identify the role, accessible name, and
reffor the control you need. - Act on the ref. For example:
browser_type { target: "e5", text: "headphones" } browser_click { target: "e10" } - Capture again after change. Navigate, submit a form, open a menu, or otherwise change the page, then call
browser_snapshotagain before using another ref.
The final step is essential. A new page state can change the accessibility tree and assign different references.
Controlling snapshot size and output
browser_snapshot supports options for focused inspection:
target: request a particular subtree instead of the whole page.depth: limit how many levels of descendants are returned.boxes: true: include viewport-relative CSS coordinates for exposed nodes.filename: save the snapshot to a file rather than returning all text in the MCP response.
Use a shallow or targeted snapshot for a large application, then increase depth only around the component you need. Coordinates can help an agent reason about geometry, but interaction should still use the current accessibility reference whenever possible.
Finding content on a large page
When the full tree is too large, call browser_find with plain text or a regular expression. It returns matching nodes and a small amount of surrounding context, reducing the amount of accessibility data sent to the model. Search for a visible label, button name, heading, or distinctive text, then take a focused snapshot or act on the returned current reference.
Search results are state-dependent too. If a click expands content or navigation changes the URL, run the search again against the new snapshot.
Snapshot versus screenshot
| Need | Use | Reason |
|---|---|---|
| Click a named button or fill a form | Accessibility snapshot | Roles, names, and refs provide precise targets. |
| Read page structure or text | Accessibility snapshot | Text is searchable and deterministic. |
| Check spacing, colors, or responsive layout | Screenshot | Pixels show visual relationships that a tree cannot. |
| Inspect charts, canvas, or image composition | Screenshot, often with a snapshot | Those visuals may not be represented in accessible text. |
Playwright MCP documents browser_snapshot as the action-oriented accessibility view and browser_take_screenshot as a separate visual capture. A practical workflow is to use the snapshot to locate and operate controls, then take a screenshot when visual confirmation matters.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minuteKeeping refs reliable
Refs become stale after navigation and can also change after state-changing actions that rebuild the page. A stale reference produces an error such as Ref <ref> not found in the current page snapshot. Recover by:
- Take a fresh
browser_snapshot. - Locate the control by its new role and accessible name (or use
browser_find). - Use the newly returned ref.
Do not cache refs in application code or assume that e5 will identify the same element in a later turn.
Run Playwright MCP over standalone HTTP
For a headed browser on a machine without a display, or for an IDE worker that connects separately, start the server with:
npx @playwright/mcp@latest --port 8931
Point the MCP client at http://localhost:8931/mcp. HTTP sessions use a five-second heartbeat timeout by default. Set PLAYWRIGHT_MCP_PING_TIMEOUT_MS to a larger value when a slow environment needs more time, or set it to 0 to disable the heartbeat.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallOutdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchOptional capabilities and safety
Playwright MCP has optional capability groups, including vision, pdf, devtools, network, storage, and testing. Enable groups with the server’s --caps argument, and configure snapshot mode and snapshot-box behavior when your client or workflow requires it.
The JavaScript evaluation tool executes arbitrary JavaScript in the Playwright server process. Treat that capability as remote-code-execution equivalent: enable it only for MCP clients and users you trust, and isolate the browser process when handling untrusted pages.
Troubleshooting
The Playwright tool does not appear
Check that Node.js is version 20 or newer, that the JSON is valid, and that the client was restarted after editing its MCP configuration. Run npx @playwright/mcp@latest manually to expose installation or network errors.
The snapshot is empty or missing a control
Wait for navigation and client-side rendering to finish, then snapshot again. The control may be inside a dialog that has not opened, outside the requested target, or deeper than the selected depth. Remove those limits temporarily to inspect the full tree.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →A ref is not found
The ref is stale. Capture a new snapshot and use the replacement ref; never retry the old value indefinitely.
The page is too large
Use browser_find, a narrower target, a smaller depth, or filename output. Search for the exact label you need instead of returning the entire tree on every turn.
HTTP sessions disconnect
Confirm that the client URL ends in /mcp, port 8931 is reachable, and the heartbeat is not expiring during a long operation. Increase PLAYWRIGHT_MCP_PING_TIMEOUT_MS when appropriate.
A visual detail is absent
That is expected for a structure-first snapshot. Use browser_take_screenshot for layout, charts, canvas, or other pixel-level information, while retaining the snapshot for actions.
Recommended Free Tools
Or skip the browser setup: ScreenshotNeo
If your goal is a rendered image or PDF rather than an interactive accessibility tree, ScreenshotNeo provides a single HTTP request for a clean website capture. Before capture it accepts cookie or consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each cleanup step can be disabled. Bot checks, CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the result with X-Page-Verdict and X-Billed headers. Its MCP server exposes take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients.
Use the documented API examples at ScreenshotNeo docs:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
ScreenshotNeo supports PNG, JPEG, WebP, and PDF output; full-page and selector captures; dark mode, device presets, custom viewport and retina scale; PDF paper, margin, orientation, and page-range controls; custom CSS and JavaScript; clicks, waits, ad and tracker blocking; headers, cookies, user agents, authorization, timezone, geolocation, transparent backgrounds, resizing, chosen cache TTLs, signed image links, asynchronous webhooks, bulk capture of up to 100 URLs per call, usage data, and an OpenAPI specification. Parameter names used by other screenshot APIs also work for easier migration.
The Free plan includes 1,000 shots per month with no card. Paid plans start at $5 for 3,000 shots; every feature is available on every plan, and yearly billing gives two months free. Create a free ScreenshotNeo account to get started.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →FAQ
Is a Playwright MCP snapshot a screenshot?
No. It is a structured accessibility tree. Use a screenshot tool when you need pixels.
Can I reuse a ref tomorrow?
No. Refs describe nodes in the current snapshot and must be rediscovered after page changes.
Do I need the vision capability for ordinary snapshots?
No. Standard accessibility snapshots work without the optional vision group; enable capabilities only for tasks that need them.
Frequently Asked Questions
Can browser_snapshot save results instead of returning them?
Yes. Supply the snapshot’s filename option to write the result to a file.
What should I use when only one section of a page matters?
Combine browser_find with the target or depth options so the client receives only the matching node and nearby subtree.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
