MCP Playwright: an MCP service that provides browser automation operations

General Introduction

MCP-Playwright is an open source tool developed by ExecuteAutomation and hosted on GitHub. It is based on the Playwright and Model Context Protocol (MCP) protocol, with the goal of allowing users to automate browsers and API testing through natural language commands. This tool is suitable for both developers and testers, and can connect Claude The Large Language Model (LLM), such as the LLM, controls browser actions, such as opening a web page, clicking a button, filling out a form, taking a screenshot, or sending an API request, through simple text. It does not require users to write complex code, lowering the threshold of use. The project is currently in the development stage, the function is gradually improved, welcome the community to contribute code.

Function List

• Browser Automation: Support for navigating to a specific web page, clicking on an element, filling in an input box, selecting a drop-down option, etc.
• API Testing: The ability to send GET, POST, PUT, PATCH, DELETE requests and inspect the contents of the response.
• screenshot function: The entire web page or a specific area can be intercepted and saved as an image.
• Execute JavaScript: The ability to run custom JavaScript code in the browser.
• Getting the console log: Extracts error, warning, or debugging information from the browser.
• natural language control: Connects to models such as Claude via the MCP protocol and operates with text commands.

Using Help

MCP-Playwright requires simple installation and configuration to work. Below are detailed steps to help you get started quickly.

Installation process

To run this tool, you need to prepare the environment and install the relevant components. Below are the details of how to do this:

1. Checking the environment
   • Make sure your computer has Node.js installed (the latest stable version is recommended).
   • An MCP-enabled client, such as Claude Desktop Client, is required.
   • Install Git for downloading code (optional).
2. Download project (optional manual installation)
   • Open a terminal and run it:

     git clone https://github.com/executeautomation/mcp-playwright.git
     

   • Go to the project catalog:

     cd mcp-playwright
     

3. Installation of dependencies
   • Run in the project directory:

     npm install
     

   • This will install Playwright and other necessary components.
4. Install directly via npm (recommended)
   • If you don't want to download it manually, you can just run it:

     npm install -g @executeautomation/playwright-mcp-server
     

   • This will globally install the server.
5. Installation via Smithery (for Claude Desktop)
   • Run the following command to automatically install and configure it:

     npx -y @smithery/cli install @executeautomation/playwright-mcp-server --client claude
     

6. Configuring Claude Desktop
   • Locate the configuration file for Claude Desktop (usually in the Claude folder in the user directory under the filename claude-desktop-config.json).
   • Add the following:

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

   • After saving and restarting Claude Desktop, the "Attach from MCP" button will appear on the interface, indicating that the configuration is successful.

How to use

Once installed, you can use natural language commands to control the browser or test the API. here's how to do it in detail.

Browser Automation

• Open the page.
  Enter at Claude Desktop:

Open the page https://example.com

The tool launches the browser and loads the page.

• clicking on an element
  Input:

Click the login button on the page, using the selector #loginBtn

It will find the ID loginBtn button and click on it.

• Fill out the form
  Input:

Fill in "admin" in the user name input box, use the selector #username
Fill in "123456" in the password input box, use the selector #password

The tool fills in the content automatically.

• screenshot (computing)
  Input:

Intercept the entire page and save it as "page.png"

The screenshot is saved to the current directory.

• Running JavaScript
  Input:

Execute the JavaScript code "document.title" in the browser.

Returns the page title.

• Getting Logs
  Input:

Get the browser console logs to show only error messages

The tool returns an error log.

API Testing

• Send GET request
  Input:

Send a GET request to https://api.example.com/data

Returns the status code and data.

• Send POST request
  Input:

Send POST request to https://api.example.com/users with data {"name": "TestUser"}
Check that the response contains "id"

The tool will validate the results.

• Updated data
  Input:

Send a PUT request to https://api.example.com/users/1 with data {"name": "NewUser"}

The data will be updated.

Example of operation

Suppose you want to test a login process:

1. Input:

Open the page http://eaapp.somee.com

2. Input:

Click on the login link on the page and use the selector #loginLink

3. Input:

Fill in "admin" in the user name input box, use the selector #username
Fill in "password" in the password input box, use selector #password
Click on the login button, using the selector #loginBtn

4. Input:

Intercept the entire page and save it as "login_result.png"

5. Input:

Close Browser

The whole process is done through natural language and is simple and intuitive.

Test Tools

The project uses Jest for testing. If you want to verify functionality, you can run tests:

• Enter it in the terminal:

npm test

• Band Coverage Report:

  npm run test:coverage
  

The test report is generated in the coverage Catalog.

caveat

• Complex authentication requests (such as OAuth) are not currently supported by the tool.
• If you encounter problems, check the official documentation at https://executeautomation.github.io/mcp-playwright/.
• The project is open source, you can fork and submit suggestions for improvement.