Playwright MCP connects an AI agent to a real browser. The agent browses your site, understands the elements, writes Playwright tests, runs them, and fixes failures until they pass. Setup takes two VS Code installs: the Playwright extension and the Playwright MCP server.
What Is Playwright MCP?
Playwright MCP is an official MCP server from the Playwright project that exposes browser automation tools to AI coding agents. It lets an agent open pages, click elements, type into forms, drag and drop, take screenshots, and close tabs, the same actions a human tester performs.
MCP, the Model Context Protocol, is an open standard for connecting AI assistants to external tools. In VS Code, Cursor, or Windsurf, installing an MCP server gives the editor's agent new capabilities it can call during a task. The Playwright MCP server ships a documented tool list, so you can inspect exactly what the agent can do before letting it run.
The result is a two-phase workflow. First the agent explores the site to learn its structure. Then it writes Playwright tests against what it saw and executes them through the Playwright test runner.
Where Did Playwright MCP Come From?
The server gained attention after Debbie O'Brien, a Developer Advocate at Microsoft who works specifically on Playwright, demonstrated it publicly. Her sessions made the point that the Playwright test suite now ships ready-to-copy AI prompts in its logs, alongside the MCP server she helped build. Playwright itself has become the dominant JavaScript testing engine in recent years, and its VS Code extension alone shows roughly 1.8 million installs, a figure visible in the extension marketplace install count during the demo. Erick Wendel picked up the workflow from O'Brien's tutorials and reproduced it end to end, which is the basis for everything below.
How Do You Set Up Playwright MCP in VS Code?
The demo used a completely empty repository and two installs: the Playwright extension for VS Code and the Playwright MCP server. Setup takes minutes and requires no manual code editing at any point.
The numbered steps from the demo:
- Install the Playwright extension for VS Code from the Extensions view. If it does not appear, press Command Shift P and run Install Extensions to reach the same place.
- Install the Playwright MCP server the same way.
- Verify the server is running: click the gear icon on the MCP entry to open its config, check the running status, and inspect the log and tool list.
- Review the tool list. The agent can perform clicks, open and close pages, drag and drop, and anything else a regular user could do.
- Paste the project scaffold prompt. The agent runs npm install (it asks for permission first) and generates the initial structure, configured for Chromium only, plus a GitHub Actions workflow for continuous integration.
- Run the first test. It passed on the first attempt in the demo.
In the demo, VS Code's @-mention of MCP servers made the tools discoverable directly from chat. The default test scaffold targeted Chromium rather than Firefox or Safari, which keeps the first run simple; you can add browsers later for cross-platform coverage.
What Did the Agent Actually Generate?
Working from short prompts alone, the agent produced a complete test project. Erick Wendel reported his best results with the GPT-5 model in VS Code, noting that other models needed more context to follow the same prompts. That is speaker first-hand experience, not a benchmark.
The generated output included:
- The full Playwright project scaffold, with a correct baseURL in the config and one smoke test.
- A GitHub Actions workflow, written in the same scaffold prompt, so tests ran in CI from the first push.
- A
FormSpecfile with tests that type a URL, attach an image, submit the form, verify the list updated, and check form validation, all without the developer naming a single selector. - A working test suite run through the Playwright extension, where each test shows a play button so you can run it individually.
One workflow detail worth copying: the presenter created a GenerateTestPrompt file, right-clicked it, and used Add File To Chat to attach it as context before pasting the generation instructions. Context files like this keep each prompt small and re-runnable.
Which AI Model Works Best With Playwright MCP?
There is no published comparison. In the demo, GPT-5, released in 2025, followed the staged prompts cleanly, while other models tested by the presenter needed extra context to stay on task. The practical advice is to try the same prompts with two or three models and compare how many clarification rounds each one needs. Smaller, staged prompts reduce the gap between models because each round gives the agent fresh feedback against the real page.
How Does the Agent Fix Failing Tests on Its Own?
The most useful part of the demo was the repair loop. When a test failed, the agent read Playwright's failure output, adjusted the test, and ran it again until it passed, with no manual code changes from the developer.
One concrete example showed why this loop matters. The scaffolded test used a generic assertion, and the agent had put the page path in the baseURL of the config instead of the test. When prompted to go back to the site and verify the real page title, the agent opened a visible Chrome window instead of running headless, re-inspected the elements, corrected the configuration, and rewrote the test with the actual title and visible field checks. The test went green after the refinement.
This is why shorter, staged prompts worked better than one giant instruction file. Each round of feedback gave the agent a chance to reconcile its assumptions against the real page through the MCP browser tools.
What Are the Limits and Caveats?
AI-generated tests still need human review. The demo itself proved the point: the first scaffolded test was too generic and carried a config mistake that only surfaced when the developer questioned it. The agent fixed things when asked, but it did not flag its own error unprompted.
Practical cautions drawn from the demo:
- The first scaffold put a page path inside baseURL, which only correct testing of the config would catch.
- Early tests checked a title without confirming it was the right one. The assertion passed while testing nothing meaningful.
- The agent never questioned its own output. Every fix came after a human prompt.
- Generated tests make sense only if the selectors and assertions match real user behavior, and only a person who knows the product can confirm that.
VS Code, Cursor, or Windsurf: Which Editor Should You Use?
The demo ran entirely in VS Code, but MCP is an open protocol, so any MCP-compatible agent editor can use the same server. The tools, not the editor, do the browser work.
| Editor | MCP support | Notes from the demo |
|---|---|---|
| VS Code | Yes | Used for the full walkthrough, including the @-mention of MCP servers |
| Cursor | Yes | Same Playwright MCP server works via the protocol |
| Windsurf | Yes | Agentic IDE, formerly Codeium, compatible with the same setup |
If your team already standardizes on one of these editors, the Playwright MCP setup carries over unchanged. The presenter's own advice was that anyone using VS Code, Cursor, Windsurf a similar agent editor should start using Playwright now, and he is personally pushing to make it the default tool across the teams at the company where he works.
Should You Add Playwright MCP to Your Team's Workflow?
If your team writes JavaScript and has postponed end-to-end coverage, Playwright MCP lowers the starting cost enough that the usual excuse loses force. The full loop of scaffold, explore, generate, run, and fix took minutes in the demo, and the same pattern carries into CI through GitHub Actions.
The reasonable adoption path is to treat the agent as a first-draft author. Let it scaffold the project, explore the site, and produce a baseline suite, then review selectors, assertions, and coverage the way you would review a junior developer's pull request. The speed advantage survives the review step, and the tests you ship are ones a human approved.
FAQ
What is Playwright MCP?
It is an official MCP server from the Playwright project that exposes browser automation tools, such as navigating, clicking, and typing, to AI coding agents. Agents use those tools to explore a site and then write and run Playwright end-to-end tests.
Does Playwright MCP work only in VS Code?
No. MCP is an open protocol, so any MCP-compatible agent editor can use it. The demo used VS Code, and editors like Cursor and Windsurf support the same pattern.
Do I still need to know Playwright if the AI writes the tests?
Yes, at least at review level. The demo showed the agent producing a wrong baseURL and a generic assertion that a human caught. Understanding Playwright config and expect() assertions is how you verify the generated suite.
Which AI model should I use with Playwright MCP?
There is no published benchmark. In the demo, Erick Wendel reported his best results with GPT-5 in VS Code and suggested testing other models yourself, since weaker models may need more context per prompt.
Can Playwright MCP also set up CI?
Yes. In the demo the scaffold prompt asked for a GitHub Actions workflow alongside the Playwright project, so tests ran in CI from the first push.
How long does the full setup take?
Minutes. Two installs, one scaffold prompt, and the first passing test appeared in the demo without a single line of hand-written code.
Does the agent run the browser visibly?
Both ways. Early runs were headless, and when the presenter asked the agent to re-inspect the site, it opened a visible Chrome window so he could watch each interaction.
What happens when a generated test fails?
The agent reads Playwright's failure report, adjusts the test or the config, and reruns until it passes. In the demo this loop fixed the baseURL mistake and replaced generic assertions with real title and field checks.
Is the generated test suite safe to merge directly?
No. Treat it as a first draft. The demo produced one too-generic test and one config error that a human caught, so review selectors, assertions, and coverage before merging.
From Demos to Written Knowledge
The core lesson of this demo is that a working process, once captured, can be handed to a machine: the prompts, the staged refinement, the review step. The same holds for knowledge. If you explain these workflows on video, that sixteen-minute walkthrough holds value most viewers will only skim.
Skala Blog turns a YouTube video into a structured, publishable article: paste the URL, get the transcription, and generate a written version your readers can search and cite. If this piece started as a video, your next one can too.
Communities like Bootcamp do Dev Doido and the Crazystack Typescript program (crazystack.com.br) run on exactly this kind of recorded teaching from Gustavo Dev Doido, and much of that knowledge sits in video form waiting to become searchable text. Source video
Fork this article
Start a new branch from the same video, shaped your way. You keep the credit; the original keeps the attribution.
A fork in another language is filed as a translation of this article, so the two pages point at each other. You can unlink it later from the editor.
0/240
You are creating
- Format
- For
- Language
- Source
- Your angle
You will be asked to sign in before it is generated.
Buy credits