This guide explains how to install and configure Playwright MCP on Visual Studio Code and connect it with GitHub Copilot. Learn how AI agents can access live browser context to generate, debug, and optimize Playwright tests faster with real DOM and runtime insights.
Pratik Patel
Dec 24, 2025
Writing and maintaining automated tests often means dealing with repetitive code and unreliable failures.
Playwright MCP enables AI agents in your IDE to work with your application’s live DOM, network activity, and runtime state. This allows you to generate tests for specific UI elements directly from context instead of manual scripting.
This guide walks through setting up the integration with GitHub Copilot and explains how to use it to improve test creation and execution workflows.
Install Node.js 18 or the latest version to support Playwright MCP.
Open Visual Studio Code and ensure GitHub Copilot and Copilot Chat are enabled for your account.
Run this command in VS Code’s integrated terminal
code --add-mcp
'{"name":"playwright","command":"npx","args":["@microsoft/mcp-server-playwright"]}'
Restart VS Code to load the global MCP configuration.
Verify the setup by asking Copilot to run a real browser task, such as opening a page or automating a login flow, to confirm live browser access. (e.g., Open VS Code, ask Copilot to launch a browser, navigate to testdino.com, and capture a screenshot of the blog page.)
If you want to see the full setup in action, watch this video.
Before you begin, it’s useful to understand the core tools involved.
Playwright is a modern browser automation framework developed by Microsoft for automation and testing real user interactions across Chromium, Firefox, and WebKit from a single codebase.
It improves reliability through features like auto-waiting and stable selectors, while engineers remain fully responsible for writing, structuring, and maintaining the test logic.
This is exactly where Playwright MCP becomes useful.
Playwright MCP is a Model Context Protocol server that exposes real Playwright execution to AI tools. Instead of working only with source code, the AI can observe, run, and interact with an actual browser session.
This allows AI agents to generate, debug, and refine tests using real DOM state, network activity, and runtime behavior rather than guesses.
With the fundamentals clear, let’s move on to installing Playwright MCP and wiring it into your development environment.
Visual Studio Code is a free, open-source code editor developed by Microsoft to provide developers with essential development tools without the overhead of a full integrated development environment.
It was designed to balance speed and capability, offering built-in debugging, Git integration, and language support while remaining lightweight, fast to start, and highly customizable through extensions.
Let's verify you have what you need. Make sure you have these requirements in place.
Choose the method that fits your needs. The Quick Install method lets you one-click MCP setup, while Manual Setup gives you more control over configuration.
For the fastest setup, follow this approach.
Just open up your VS Code terminal and paste this line in it.
If you want to skip the command and configure everything yourself, you can set up Playwright MCP manually instead.
If you prefer more control over your setup or need to configure MCP for a specific project, manual configuration is the way to go.
It only takes a minute and gives you flexibility in how Playwright MCP runs in your workspace.
Open VS Code to start the setup process.
For project-specific setup, you'll need to create a configuration file in your project's .vscode folder.
If the folder doesn't exist yet, go ahead and create it.
Then add a file named mcp.json with the following configuration:
Once you've saved the file, your project structure should look something like this,
With this setup in place, Playwright MCP will be available whenever you open this specific project in VS Code. This approach is instrumental when different projects need different MCP configurations or versions.
For global setup, follow the step-by-step process below to configure Playwright MCP once and make it available across all Visual Studio Code projects.
1. Open the Command Palette in Visual Studio Code, search for “MCP: Add Server”, and press Enter.
2. Select the NPM Package when prompted.
3. Search for @playwright/mcp and confirm.
4. Click Allow if VS Code asks for permission.
5. Accept or rename the server ID, then press Enter.
6. Choose Global to enable Playwright MCP across all projects.
Let’s connect Playwright MCP with GitHub Copilot
First, understand GitHub Copilot and why it matters.
GitHub Copilot is an AI coding assistant that suggests code as you type based on context and comments. It helps speed up development by reducing boilerplate and offering intelligent completions inside your editor.
Now let’s see what changes when Copilot gains real browser context through Playwright MCP.
| Feature | Copilot | Copilot + Playwright MCP |
|---|---|---|
| Selector suggestions | Generic code suggestions | Accurate, targets existing elements |
| Sample code | Boilerplate needing edits | Working code for actual page elements |
| Debugging advice | Generic advice with zero context | Context-aware, accurate advice |
| Test writing | Feels like teaching from scratch | Understands app structure, suggests working tests immediately |
1. Open Copilot chat by clicking the Copilot icon in your VS Code sidebar.
2. Go to settings in the chat, find MCP servers, and switch Playwright on.
3. Ask Copilot questions like, “Write a test for the login form”.
That’s all it takes. Now you’ve got Copilot offering smart, context-aware testing help right where you need it.
Now, let’s verify that Playwright MCP is correctly integrated with Claude Code.
Let's make sure everything's working properly or not step by step.
1. Open your AI client connected via MCP, such as Claude Desktop or Copilot Chat.
2. Enter a prompt that requires live browser control, for example:
3. Observe the behavior.
Simple, but effective for our verification purposes.
If the browser does not launch or the response is not based on live page data, review the common issues and fixes below.
If MCP is not behaving as expected, the table below lists the most common issues you may encounter and how to fix them quickly.
| Issue | Meaning | Quick Fix |
|---|---|---|
| "MCP not detected" error | VS Code cannot find or communicate with the MCP server | Restart VS Code, ensure MCP is installed and running |
| Extension conflicts | Another extension blocks the MCP or uses the same port | Disable other test extensions and restart VS Code |
| Node.js version mismatch | Node.js is too old for Playwright MCP | Run: node --version and upgrade to Node 18 |
| Port/permission issues | MCP cannot bind to the default port | Check port usage and stop the conflicting process |
Now that Playwright MCP is installed and connected to Copilot, writing tests becomes much faster and more accurate.
Copilot can inspect your live application in real time, providing precise, ready-to-run code suggestions instead of generic boilerplate.
With this setup, creating and debugging Playwright tests is more efficient and less error-prone.
For managing results, reporting, and analytics at scale, tools like TestDino can help you track and visualize your test outcomes seamlessly.
Writing tests is only half the workflow
Tests may pass or fail, but reporting explains what happened across runs and environments.
No. It accelerates generation and debugging but does not replace judgment. You still decide assertions, test scope, and what should or should not be automated. Treat MCP as a fast junior engineer, not an architect.
Table of content
Step-by-step guides, real-world examples, and proven strategies to maximize your test reporting success
