repository·main·Indexed 26 days ago
https://github.com/executeautomation/mcp-playwrightA Model Context Protocol (MCP) server that provides LLMs with browser automation capabilities using Playwright. It enables AI assistants to interact with web pages, execute JavaScript, take screenshots, scrape content, and emulate 143 real-world device profiles. The server supports Chromium, Firefox, and WebKit engines and can be deployed via npm, Docker, or HTTP mode for integration with clients like Claude Desktop and VS Code GitHub Copilot.
The Playwright Model Context Protocol (MCP) server enables LLMs to interact with web pages in a real browser environment. Key capabilities include:
The Playwright MCP server provides the following browser automation capabilities:
To ensure the AI assistant correctly invokes playwright_resize, follow these prompting best practices:
iPhone 13 instead of iPhone).Navigate to example.com and test on iPad).Test on Galaxy S24 and take a screenshot).Rotate the phone or Switch to landscape.Make it smaller or Phone view without specifying a device or resolution.Install the Playwright MCP server globally using npm to make it available for use with Claude Desktop.
npm install -g @executeautomation/playwright-mcp-serverYou can perform Behavior Driven Development (BDD) testing using the Playwright MCP Server by providing Gherkin-style scenarios to an AI-enabled editor (like Cursor) that supports MCP servers. This allows for hands-free automation where the AI interprets the natural language steps to execute browser actions without manual code writing.
To use this approach, ensure the Playwright MCP Server is configured and available to your agent/editor.
You can automate end-to-end testing workflows (UI, API, and Database) by defining custom Cursor Rules (.mdc files). By combining the Playwright MCP Server with other MCP servers like the SQLite MCP Server, you can instruct AI agents to perform complex sequences such as navigating to a URL, interacting with UI elements, and verifying data persistence in a database without writing manual test scripts.
To implement this, create a Cursor Rule file that defines a trigger command (e.g., /test) and provides the agent with the necessary context, such as URLs, element IDs, and schema locations.
When I say /test, then perform following
Navigate to http://localhost:8000/Product/List.
Create product by clicking Create link .
Then create a product with some realistic data for Name, Price and Select ProductType as CPU and click create input type with id as Create.
Check the Database for the created record
Use the Schema: http://localhost:8001/swagger/v1/swagger.json
Here is the baseURL of API Base URL: http://localhost:8001/
Also check the API which performs the GET operation if the values are correctly retreived for the created product from the above schemaYou can use natural language prompts to instruct an AI assistant to resize the browser viewport using the playwright_resize tool. This allows for testing responsiveness across various device presets or custom dimensions.
You can request specific devices by name, including:
iPhone 13, iPhone 14, iPhone 15, iPhone SE, iPhone X, etc.iPad Pro 11, iPad Air, iPad Mini, iPad Pro 12.9.Pixel 7, Galaxy S24, Galaxy S9+, Pixel 5.Galaxy Tab S4, Pixel Tablet.Desktop Chrome, Desktop Firefox, Desktop Safari.You can also request specific pixel resolutions:
Resize to 1024x768Set viewport to 800x600Test at 1920x1080 resolutionYou can control device orientation using prompts like Rotate to landscape or Switch to portrait mode.
You can instruct the AI to perform complex testing workflows across multiple devices and orientations in a single request.
Example Workflows:
The Playwright MCP Server supports an HTTP/SSE transport mode, allowing for remote access, multiple clients, and health monitoring. This mode is useful for VS Code Copilot or when you need to access the server over a network.
If you are currently using stdio mode in your MCP configuration, follow these steps to switch to HTTP mode:
Start the server on a specific port:
playwright-mcp-server --port 8931Update your MCP configuration to use the url key instead of command and args:
{
"mcpServers": {
"playwright": {
"url": "http://localhost:8931/mcp"
}
}
}{
"mcpServers": {
"playwright": {
"url": "http://localhost:8931/mcp"
}
}
}The Playwright MCP Server supports capturing browser console logs during development and testing. This allows you to monitor browser activity and debug issues by retrieving logs emitted by the browser's console while performing actions.
Supported log types include:
loginfowarnerrordebugall (captures all types)To trigger this capability via an MCP-enabled client, use a prompt that instructs the server to monitor or retrieve logs during its operations.
Get the console log from the browser whenever you perform any action.To perform Bearer token authentication, use the token parameter in your Playwright MCP Server API calls (playwright_get, playwright_post, playwright_delete, etc.). This automatically handles the Bearer token injection.
// GET request with Bearer token
await playwright_get({
url: 'https://api.example.com/protected-data',
token: 'your-bearer-token-here'
});
// POST request with Bearer token
await playwright_post({
url: 'https://api.example.com/create',
value: '{"name":"test"}',
token: 'your-bearer-token-here'
});
// DELETE request with Bearer token
await playwright_delete({
url: 'https://api.example.com/resource/123',
token: 'your-bearer-token-here'
});You can install the Playwright MCP server using several methods depending on your client:
npm install -g @executeautomation/playwright-mcp-servernpx @michaellatman/mcp-get@latest install @executeautomation/playwright-mcp-servernpx @smithery/cli install @executeautomation/playwright-mcp-server --client claudeclaude mcp add --transport stdio playwright npx @executeautomation/playwright-mcp-servernpm install -g @executeautomation/playwright-mcp-server