Playwright MCP¶
Playwright MCP gives agents browser automation through the accessibility tree. The agent reads page structure as text, identifies elements by reference IDs, and issues commands to click, type, or scroll. No vision model required.
Accessibility Tree¶
Each tool call returns an accessibility snapshot, a text representation of visible elements with reference IDs for targeting.
Page loaded: https://example.com
[ref=M1] navigation "Main"
[ref=L2] link "Home"
[ref=L3] link "Products"
[ref=L4] link "Contact"
[ref=R5] region "Main content"
[ref=H6] heading "Welcome"
[ref=P7] paragraph "Example Domain..."
[ref=B8] button "Learn more"
The agent sees button "Learn more" ref=B8 and calls browser_click with ref=B8. The next snapshot shows the resulting page state. This loop (snapshot, act, snapshot) drives all browser interaction.
The snapshot approach differs from traditional browser automation that relies on CSS selectors or XPath. Element references are stable within a page session and directly map to what the accessibility tree exposes. Agents don't need to guess at selectors or parse HTML to find elements.
Automation vs Debugging¶
Playwright automates user actions. Click a button, fill a form, scrape a table. Chrome DevTools MCP watches what happens underneath: which requests fired, what errors logged, where time went. Use DevTools when you need to understand why something happened rather than make something happen.
Both servers can run simultaneously if a workflow needs both capabilities.
Limitations¶
JavaScript-heavy SPAs may need explicit waits. The snapshot captures current state; if React is mid-render, the snapshot shows incomplete content.
iframes require separate handling (the main page snapshot doesn't include iframe content).
Shadow DOM support varies. A <custom-button> component might hide its internal <button> from the accessibility tree entirely.
If your workflow needs persistent login, configure the browser session to preserve cookies. Otherwise each run starts fresh.