Installing Playwright MCP Server in VS Code Explained in 5 Minutes

Welcome! This article explores how to install and use the Playwright MCP (Multi-Copilot-Platform) server within Visual Studio Code. We've received several questions from the community on getting started, and now that VS Code has enhanced its capabilities for MCP servers, this guide provides all the details you need for a smooth installation.

To begin, you'll use the Playwright MCP server from Execute Automation. You can find comprehensive documentation and tutorials on how to work with the server and explore its new features by visiting their official page.

Core Features of Playwright MCP Server

The server comes packed with powerful features, including code generation that not only executes tasks in VS Code or a cloud desktop but also generates the corresponding code for the session. It can interpret plain English commands to perform actions.

Additionally, the server offers a wide array of more than 25+ automation tools, such as: - navigate - screenshot - click - iframe - hover - select - evaluate

Beyond UI testing, the Playwright MCP server also supports API testing, making it a versatile tool for various automation needs.

Step 1: Get the VS Code Insider Build

For the best experience, it's currently recommended to use the Visual Studio Code Insider build. This version includes all the latest features required for the MCP server to function optimally. While other IDEs like Cursor have these features built-in, VS Code users will need to follow this process.

The Insider build is a pre-release version that contains the newest, not-yet-generally-available features.

1. Download the Visual Studio Code Insider build. For modern Macs (Apple M1/M2/M3), choose the Universal or ARM architecture download.
2. Once downloaded, move the application to your Applications folder. This is necessary to allow for modifications required during the setup process.
3. Open the VS Code Insider application.

Step 2: Install the Playwright MCP Server

There are two primary ways to install the server.

Method 1: The Easy Button

The simplest method is to visit the Playwright MCP server's readme file, where you'll find an installation button.

1. Click the "Install in Visual Studio Code Insider" button on the webpage.
2. Your browser will ask for permission to open VS Code Insider. Allow it.
3. A new prompt will appear in VS Code. Select the "Install the server in your user settings" option.

This action automatically configures the server for you.

Method 2: Manual Installation

If you prefer a manual approach, you can configure it directly within VS Code.

1. Open the Command Palette (Cmd+Shift+P or Ctrl+Shift+P).
2. Type and select "MCP: List Servers". This will show any currently configured servers.
3. Click "Add Server" and choose a manual installation method. The most straightforward option is "Command Stdio".
4. You will be prompted to enter a command. Use the following npx command to install the server:

npx -y @executeautomation/playwright-mcp-server

Step 3: Verify the Configuration

After installation, you can verify that the server is configured correctly.

1. From the "MCP: List Servers" view, find the newly added Playwright server. It will likely be in a "Stopped" state.
2. Click on it and select "Show Configuration".
3. This will open your settings.json file, where you should see the new configuration.

It should look something like this:

{
  "mcp.servers": {
    "playwright": {
      "command": "npx",
      "args": [
        "-y",
        "@executeautomation/playwright-mcp-server"
      ]
    }
  }
}

The mcp.servers key holds an object where you can configure multiple servers. Here, we have one named playwright.

Step 4: Start the Server and Use the Agent

Before you can use the server, you must start it.

1. Go back to the "MCP: List Servers" view.
2. Click the Playwright server and select "Start the server".

The MCP server works in tandem with an agent, which in VS Code is powered by the GitHub Copilot extension.

Note: You must have both the GitHub Copilot and GitHub Copilot Chat extensions installed.

With the server running, you can now interact with the agent: 1. Open the secondary sidebar in VS Code and click the + icon to start a new chat with Copilot. 2. At the top of the chat window, you'll see a dropdown that defaults to "Ask" mode. Click it and switch to "Agent" mode. 3. In Agent mode, you can see the available tools. You should see that numerous tools (over 25+) from the Playwright MCP server are now available.

Example Workflow: Automating a Test Case

You are now ready to give the agent commands. Let's try a complete workflow.

In the Copilot chatbox, enter the following prompt:

Navigate to the website eapp.somi.com and click the login link. In the login page, enter the username and password as admin and click the employee list to create a new user by entering some data in there. Then, close the browser and generate the code and show me that.

Copilot will respond with a plan to automate these actions, starting with a code generation session. As it executes each step, it will invoke the necessary tools. You may be prompted to grant permission for each tool to run. You can select "Allow in this session" to avoid repeated prompts.

The agent will perform the following actions: 1. Launch a browser and navigate to the specified URL. 2. Fill in the login credentials and submit the form. 3. Navigate to the employee list and click the "Create" button. 4. Fill in the new employee form, including selecting a value from a dropdown menu. 5. Close the browser.

Once the automation is complete, Copilot will end the code generation session and provide you with the complete Playwright test script.

Here is an example of the generated code:

import { test, expect } from '@playwright/test';

test('test', async ({ page }) => {
  await page.goto('http://eapp.somi.com/');
  await page.getByRole('link', { name: 'Login' }).click();
  await page.getByLabel('UserName').fill('admin');
  await page.getByLabel('Password').fill('password');
  await page.getByRole('button', { name: 'Log in' }).click();
  await page.getByRole('link', { name: 'Employee List' }).click();
  await page.getByRole('link', { name: 'Create New' }).click();
  await page.getByLabel('Name').fill('Gemini');
  await page.getByLabel('Salary').fill('15000');
  await page.getByLabel('DurationWorked').fill('10');
  await page.getByLabel('Grade').selectOption('C-Level');
  await page.getByLabel('Email').fill('[email protected]');
  await page.getByRole('button', { name: 'Create' }).click();
});

This generated code is a ready-to-use Playwright test. You can simply copy it into a test.spec.ts file and run it. This demonstrates the incredible power of combining the Playwright MCP server with GitHub Copilot's agent capabilities to automate complex tasks from a simple English prompt.

For now, this process requires the VS Code Insider build, but hopefully, these features will be integrated into the main VS Code release soon.