Playwright MCP

Playwright MCP is an MCP server that gives an AI agent browser automation through Playwright. The agent mostly works from structured accessibility snapshots rather than screenshots.

For checking rendered CSS it has browser_resize to change the window size and browser_emulate_media for prefers-color-scheme, prefers-reduced-motion, forced-colors, prefers-contrast and the CSS media type. browser_take_screenshot can capture the viewport, the full page or one element. Snapshots can include each element's bounding box in CSS pixels.

The standard setup is npx @playwright/mcp@latest in your MCP client. In Claude Code, run claude mcp add playwright npx @playwright/mcp@latest. It needs Node.js 18 or newer. For coding agents, Microsoft also suggests the Playwright CLI with skills, which uses fewer tokens.