Post

I figured out how to add the official Playwright browser automation MCP to Claude Code. Run this before you start "claude": claude mcp add playwright npx '@playwright/mcp@latest' Now Claude Code can use a Chrome browser directly! Here's my TIL: til.simonwillison.net/claude-code/...

til.simonwillison.netUsing Playwright MCP with Claude CodeInspired by Armin , I decided to figure out how to use the official microsoft/playwright-mcp Playwright MCP server with Claude Code.

10 reposts100 likes

The MCP is so helpful! One thing I've found is it eats up a ton of context on products with large-ish DOMs. So if you're planning on running a flow several times (say for testing), ask the MCP to write an actual Playwright .py that you can run over and over.

Decentralized tools can leverage browser automation, enhancing Claude's capabilities in tasks like web scraping and automated testing.

The context cost is the part that bites after the demo: snapshot-heavy pages make repeated runs expensive and harder to diff. I usually generate a small deterministic Playwright harness for the stable path, then keep MCP for exploration and the odd weird edge case.

Did you already have Playwright configured on your system otherwise? Last time I set this up I found that the npx command wasn’t working until I configured Playwright and missing dependencies on my system. Maybe it got better? I have a new machine I need to do this on again.

You can use it also with cursor, and there is something really unnerving in seeing the model navigating on it's own. (it's better at following instructions that most people but it will get confused and fail to some some tasks anyway...)