Playwright MCP Setup Guide for Cursor IDE

This guide walks you through integrating Playwright MCP with Cursor IDE to enable powerful browser automation and frontend testing directly via Cursor agents.

---

Prerequisites

• Cursor IDE installed
• A modern browser (recommended: Google Chrome)
• Node.js installed (required for npx)

---

Step 1: Install Cursor

Install Cursor IDE using your preferred browser if you haven’t already.

---

Step 2: Download Playwright MCP Extension

1. Visit the official repository:
   👉 https://github.com/microsoft/playwright-mcp

2. Go to the Releases section.

3. Download the latest Playwright MCP extension ZIP file.

4. Extract the ZIP file into a local folder.

---

Step 3: Load the Extension into Your Browser

This guide uses Google Chrome as the example browser.

1. Open Chrome and navigate to:
   Extensions → Manage Extensions

2. Enable Developer mode (top-right corner).

3. Click Load unpacked.

4. Select the extracted Playwright MCP folder.

5. The browser will load and enable the extension successfully.

UPDATE: now playwright provide official extention in Google Chrome extention market. go there and get it from there for Free. Easy and more reliable now!

---

Step 4: Get the Playwright MCP Token

1. Open the browser’s Extensions list.

2. Click on the Playwright MCP extension.

3. A Playwright page will open displaying your authentication token.

4. Copy the token — you’ll need it in the next step.

---

Step 5: Configure Playwright MCP in Cursor

1. Open Cursor IDE.

2. Go to:

   Settings → Tools & MCP

3. Click New MCP Server.

4. Paste the configuration below and replace <token> with the copied token:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--browser",
        "chrome",
        "--extension"
      ],
      "env": {
        "PLAYWRIGHT_MCP_EXTENSION_TOKEN": "<token>"
      }
    }
  }
}

---

Step 6: Verify MCP Settings

1. In Cursor → Tools & MCP:

   • Ensure Browser Automation is turned OFF.
   • Confirm Playwright MCP is enabled and active.

2. Restart Cursor IDE to apply changes.

---

Step 7: Confirm Access

After restarting Cursor:

• Ask the Cursor agent to access a specific URL.
• Verify that Cursor has full browser control and visibility.

If successful, the integration is complete.

---

🎉 You're Ready to Go

Cursor agents now have full access to Playwright tools, enabling:

• Frontend automation
• UI testing
• Browser-based workflows
• AI-assisted interaction with live web pages

You can now confidently perform frontend-related tasks using Cursor + Playwright MCP.

Happy automating 🚀