Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
A Playwright MCP snapshot is a structured, text-based view of the page’s accessibility tree—not an image of the page. Ask the connected MCP client to run browser_snapshot, or use the fresh snapshot returned by most page-interaction tools. Read the current node refs, use one to target an action, and capture a new snapshot after the page changes. For a large tree, use browser_find; for layout or other visual details, add a screenshot.
What a Playwright MCP snapshot shows
A snapshot represents page content through exposed accessibility structure. It can show roles such as heading, textbox, checkbox, listitem, and link, along with accessible names and text. Nodes may have refs such as e5, which interaction tools can use as targets.
For example, a simplified tree might identify a heading named “TodoMVC,” a textbox named “What needs to be done?” and a checkbox named “Mark all as complete.” The exact content and refs depend on the current page and state. The snapshot is a structured text representation for understanding and targeting exposed nodes; it is not a screenshot or a complete visual description.
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 matchThat distinction matters: a snapshot can make it easy to find a labeled control, but it does not show the control’s color, precise visual alignment, or whether a chart is legible. Nor should you assume every visible element is represented by an accessible node.
#1 Best Overall
Set up Playwright MCP
The official Playwright getting-started guide currently lists Node.js 20 or newer and an MCP-capable client as prerequisites. Client configuration instructions differ, so follow the current instructions for the client you use rather than copying a configuration path meant for another client: Playwright MCP getting started.
- Check your prerequisites. Confirm that Node.js 20 or newer is installed and that your chosen client supports MCP.
- Register the server in your client. The official example uses
npxwith@playwright/mcp@latest. Use the client-specific configuration format in the getting-started guide. Because@latestand client setup can change, check the current guide when configuring or troubleshooting. - Connect and open a page. Ask your assistant to navigate to the page you want to inspect. The assistant can use Playwright MCP’s browser tools through the connected client.
- Use the returned snapshot or request one explicitly. Most page-interaction tools return an updated snapshot. Call
browser_snapshotwhen you want a deliberate inspection point, or when you need to narrow what is returned.
If you want to run a standalone HTTP server instead of registering the server in the client’s usual way, the official guide shows npx @playwright/mcp@latest --port 8931, with the client connecting to its /mcp endpoint. Confirm the current setup details in the guide before relying on this version-sensitive command.
Capture and narrow a snapshot
Use browser_snapshot to capture the current page’s accessibility snapshot. An explicit capture is helpful when you need to inspect a page at a particular point, check the current refs, or limit the output instead of relying on the snapshot attached to an earlier interaction.
Recommended Free Tools
The documented snapshot options let you adjust what is returned:
targetreturns a subtree rather than the whole page.depthlimits how far the tree is traversed.boxesadds bounding rectangles in viewport-relative CSS pixels.filenamesaves the snapshot to a file.
These options are useful for different problems. Use target if you already know which section you need, or depth when the tree is too detailed. boxes adds positional information, but those rectangles do not turn a snapshot into a visual rendering. Use filename when you need a saved copy for inspection or another workflow.
Playwright MCP also documents global snapshot settings. --snapshot-mode=none prevents tools from attaching snapshots to responses, while --snapshot-boxes adds bounding boxes. The project repository lists corresponding environment variables and supported snapshot modes, including full and none. Check the current Playwright MCP repository and snapshot reference before changing server-wide settings, since configuration details can evolve.
Use refs to target the next action
Choose a ref from the latest snapshot and pass it to the relevant interaction tool. For instance, if the current snapshot shows a textbox with ref e5, use that current ref as the target when typing. The official examples also show refs such as e10 for clicking. Refs apply to exposed nodes, not only to interactive controls.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsA ref is unique within a snapshot, not a permanent identifier for an element across page states. Navigation or another state change can invalidate it. If an action reports that a ref is missing, do not keep retrying the old target. Recover in this order:
- Capture a fresh snapshot of the current page.
- Find the element in that output and note its current ref.
- Use that ref for the next action.
The snapshot documentation recommends refs as the usual targeting choice because they identify the node represented in the current snapshot. A Playwright selector or locator string can also be used as a target when appropriate, but whichever targeting method you choose, make sure it still matches the current page.
Find a node in a large snapshot
When you need a particular label or text and the full tree is cumbersome, use browser_find. It searches the current page’s snapshot and returns matching nodes with a few surrounding lines under their tree path, so you can inspect the relevant context without reading the entire output.
Provide either a plain-text substring or a regular expression—not both. Plain-text matching is case-insensitive. Regular-expression matching is case-sensitive by default; use flags when you need different behavior. If a search returns several matches, use the surrounding tree context to identify the correct node, then use its current ref for an action.
If you do not know what to search for, or need to understand the relationships among several parts of the page, narrow the snapshot with target or depth instead. The documented search behavior and configuration are covered in the Playwright snapshots reference.
Walkthrough: inspect and update a TodoMVC page
Playwright’s introduction demonstrates a TodoMVC-style interaction. The same general flow works for other pages with accessible controls:
- Open the page. Ask the connected assistant to navigate to the TodoMVC example. The navigation interaction will commonly return a snapshot.
- Inspect the current state. Find the textbox in the snapshot by its accessible name, such as “What needs to be done?”, and note the ref shown in that output.
- Enter a task. Ask the assistant to use the appropriate typing action on that textbox’s current ref, with the task text you want to add.
- Read the updated state. Use the snapshot returned by the action, or request
browser_snapshot. Check that the new task appears and use the new output to identify any target for the next action. - Continue with current refs. If you want to mark a task complete, locate its current checkbox or associated control in the latest snapshot, then target the ref shown there.
This walkthrough describes how to select a target from the tree; it does not assume a fixed ref. Refs vary with the page and current state, so do not copy one from an example or an earlier interaction and assume it will still point to the same element.
For the official introduction’s interaction flow, see Playwright MCP: Introduction.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Snapshot or screenshot: which should you use?
Playwright’s documentation characterizes snapshots as text-only and low-token, with precise ref targeting and quick parsing; it says they can be deterministic when the structure is the same. The same documentation contrasts screenshots as more token-intensive, approximate for coordinate targeting, slower to interpret, and dependent on vision. This is qualitative guidance from Playwright, not a numerical benchmark.
| Need | Start with | Why |
|---|---|---|
| Find a button, field, link, heading, or page text by its role or accessible name | Snapshot | The tree exposes semantic roles and names, and a current ref can target a represented node. |
| Inspect the visual layout, spacing, styling, or apparent alignment | Screenshot | A text tree is not a rendering of the page. |
| Read a chart, canvas, or image-heavy region | Screenshot alongside the snapshot | Visual or canvas content may not be adequately represented in the accessibility tree. |
| Act on an element exposed in the current tree | Snapshot, then action using its current ref | The ref points to a node in that snapshot; capture again after a state change. |
| Investigate something visible but missing from the tree | Screenshot and an appropriate additional Playwright method | A missing node may simply not be exposed in the accessibility structure. |
A screenshot complements a snapshot when appearance carries information the tree cannot provide. Playwright’s snapshot documentation presents the two as complementary ways to inspect a page, not as interchangeable outputs: Snapshots.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Troubleshooting snapshots
A ref is not found
The page may have changed since the ref was captured. Run browser_snapshot again, find the element in the new output, and use its current ref. Avoid treating refs as durable IDs across navigation or state changes.
The snapshot is too large
Use browser_find to search for a label or text and review the returned context. If you need a portion of the tree rather than a text match, narrow the output with target or depth.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →An element you can see is missing
A snapshot represents exposed accessibility-tree structure, not every pixel or every visual element. Inspect the page with a screenshot, then use another suitable Playwright method if you need to interact with content that the tree does not expose. Do not assume that a visual position has a snapshot ref.
The tree does not explain a visual problem
Take a screenshot alongside the snapshot. The snapshot can still help identify semantic content and controls, while the screenshot supplies visual context for layout, charts, canvas content, or image-heavy regions.
Snapshots no longer appear in tool responses
Check the server’s snapshot settings. In particular, the documented --snapshot-mode=none option disables snapshots attached to tool responses. Verify current options and environment-variable equivalents in the project repository before changing configuration.
Or skip the browser setup
If your task is to save a visual capture rather than inspect and interact with a page’s accessibility tree, ScreenshotNeo offers a website screenshot API and MCP server. It does not replace Playwright MCP snapshots: a screenshot gives you page pixels, while a snapshot gives you structured accessibility information and refs.
Free tools Windows power users keep installed
One-click scans. No signup required.
For a direct screenshot request, add your API key and target URL to this cURL call. See the ScreenshotNeo documentation for the API and available options.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo accepts cookie or consent banners as a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and the response indicates the page verdict and billing status in headers. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, or another MCP client. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots.
Sign up for 1,000 free screenshots a month—no card required.
Frequently Asked Questions
Do Playwright MCP snapshots return screenshots?
No. They return structured text representing the page’s exposed accessibility tree; use a screenshot when you need visual appearance.
Can I keep using the same ref after navigating to another page?
No. Refs are tied to a snapshot and can become stale after page changes; capture a fresh snapshot and use the ref it provides.
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.
