Playwright MCP

Automate web interactions and perform web scraping tasks using the Playwright framework.

GitHub

Playwright MCP Configuration

This repository contains everything needed to launch and connect to a working Playwright MCP (Model Context Protocol) server.

✅ Overview

This setup allows you to automate and inspect web pages using structured data instead of screenshots — ideal for LLM-powered tools like Claude, Cursor, and VS Code AI agents.

🛠️ Prerequisites

  • Node.js v18 or newer

  • One of the following MCP-compatible clients:

    • VS Code or VS Code Insiders
    • Cursor
    • Claude Desktop

📁 Repository Contents

  • .vscode/settings.json — VS Code configuration to launch Playwright MCP
  • package.json — Includes required MCP dependencies
  • README.md — This file
  • .gitignore — Basic Node project ignore rules

🚀 Getting Started

1. Clone the Repository

git clone https://github.com/faruklmu17/playwright_mcp.git 
cd playwright-mcp-config

2. Install Dependencies

npm install

This installs all required packages, including @playwright/mcp.

3. Start the MCP Server

npx playwright-mcp --port 3550

You should see output like:

MCP Server started
Web server started

You can change the port if needed, e.g. --port=4000

4. VS Code MCP Client Configuration

Add this to your .vscode/settings.json:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--port=3550"
      ]
    }
  }
}

This tells VS Code (or Cursor) how to launch and connect to the MCP server.

5. Optional: Use Persistent or Isolated Sessions

Persistent (default)

The browser state is preserved across sessions.

Isolated Example

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--isolated",
        "--storage-state=storage/state.json"
      ]
    }
  }
}

6. Additional Flags

You can enhance your MCP server using optional flags:

FlagDescription
--port <port>Custom port (default is random/OS-assigned)
--headlessRun without browser UI
--deviceEmulate a device (e.g., "iPhone 15")
--visionEnable screenshot-based vision (if supported)

Check available flags with:

npx playwright-mcp --help

📅 Note About Browsers

You do not need to install playwright or run npx playwright install separately. The MCP package handles everything required for browser automation.

📄 .gitignore

node_modules/
.DS_Store

🤝 Contributing

Pull requests and suggestions are welcome!

📄 License

MIT

İlgili Sunucular