Playwright and MCP server – What and How

AI is rapidly evolving and we would like to ensure Model remains interpretable, context-aware and adaptable. To deal with these growing challenges, MCP designed and emerged as a structured framework. Our traditional testing approach also been evolved. Tools and frameworks are coming up with AI first approach for test automation. Playwright MCP is one of those evaluations. In this article I’ll be discussing followings:

• What is MCP?
• Playwright and Playwright MCP
• Configure it in VSCode
• Creating custom agent to run a simple scenarios

Model Context Protocol (MCP)

One of the concepts related to AI is MCP or Model Context Protocol. What is MCP? From the official site I quote the definition:

The Model Context Protocol (MCP) is an open protocol that enables seamless integration between LLM applications and external data sources and tools. Whether you’re building an AI-powered IDE, enhancing a chat interface, or creating custom AI workflows, MCP provides a standardized way to connect LLMs with the context they need.

I recommend to go through their official documentation site to learn more about it. A better understaing can be captured from the diagram below:

So in a plain English, Data tool or IDE or piece of code works as an agent will send out certain instructions to the MCP server which will be processed as per the LLM defined and output will be sent back to the agent. Output can be anything, text response, anything execution or whatever we are expecting from the server to return us.

Playwright and Playwright MCP

Playwrigth

Playwright is an open-source, cross-browser automation framework developed by Microsoft, designed to enable reliable end-to-end testing and web scraping across Chromium, Firefox, and WebKit. Because of its speed and flexibility, it is quickly gaining popularity among the developer and tester communities. 

Playwright MCP

To define Playwright MCP, I am quoting directly from the official gihub:

A Model Context Protocol (MCP) server that provides browser automation capabilities using Playwright. This server enables LLMs to interact with web pages through structured accessibility snapshots, bypassing the need for screenshots or visually-tuned models.

Setup Playwright MCP

Before diving into test scenarios with Playwright Server, let’s get everything set up. While I’ve come across articles demonstrating its use with Cursor AI, I’m a longtime VS Code enthusiast, so that’s what I’ll be using here.

Prerequisites

Ensure you have GitHub Copilot (or another AI coding assistant) installed, activated, and working in VS Code.

Now let’s install the Playwright MCP server. As per the official documentation from the Github, to install Playwright MCP Server in VS Code, run following command into the terminal (in case, if you encounter any issue running code CLI from the terminal (like I did), this stakeoverflow link might be helpful to resolve).

# For VS Code
code --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'Code language: PHP (php)

if everything goes correctly you should see something like as below in the settings.json:

Now let’s create a config for the MCP server. You can use the config mentioned below and save it as <anyname>.json. For this example, let’s save it as mcp-server-config.json.

{
  "browser": {
    "browserName": "chromium",
    "launchOptions": {
      "channel": "chrome",
      "headless": false
    },
    "contextOptions": {
      "viewport": {
        "width": 1280,
        "height": 720
      }
    },
    "cdpEndpoint": null,
    "remoteEndpoint": null
  },
  "server": {
    "port": 8080,
    "host": "localhost"
  },
  "capabilities": [
    "core",
    "tabs",
    "pdf",
    "history",
    "wait",
    "files",
    "install",
    "testing"
  ],
  "vision": false,
  "outputDir": "./output",
  "tools": {
    "browser_take_screenshot": {
      "omitBase64": false
    }
  }
}Code language: JSON / JSON with Comments (json)

Now it’s all set. You should be able start The MCP server. To start it. You can specify the config with following command:

npx @playwright/mcp@latest --config path/to/mcp-server-config.jsonCode language: CSS (css)

Now to run the server use following command which will allow to enable SSE endpoint

npx @playwright/mcp@latest --port 8080Code language: CSS (css)

Test with a simple prompt

As everything hopefully is working in your end as well, let try running following sample prompt in the copilot chat window. Make sure that copilot is set to Agent mode.

The Prompt:

Open sauscedemo.com.
Enter standard_user as username.
Enter secret_sauce as Password.
Click on the Login button.Code language: JavaScript (javascript)

1. Run npx @playwright/mcp@latest --port 8080 to start the MCP server.
2. Enter the prompt in Copilot chat window and hit enter.

Expectation

Copilot should be be starting the execution by navigating to the saucelab demo ecommerce site.

But if you look at this demo, you’ll see that we need to click Continue before every command which is kind of annoying right?

To avoid it, select Always Allow from the context menu next to Continue button in the chat window.

Let’s have the final demo here!

Final thoughts!

That wraps up our exploration of MCP and Playwright MCP! I’ve aimed to break down the concept as clearly as possible. In the next installment, I’ll walk you through end-to-end testing with Playwright MCP—stay tuned!

Until then, happy testing! If you found this useful, I’d love to hear your feedback, suggestions, or ideas. Let’s keep the conversation going.

P.S. Shoutout to this insightful article—Supercharge Testing with Playwright MCP, Server, and Cursor AI—which helped me grasp the full potential of this approach.