Playwright MCP Guide

Proxied browser automation for live UI inspection and exploration. For Playwright test generation, use QE E2E Tests V2.

Overview

The Playwright MCP (/mcp/v2/playwright) is a browser automation endpoint (often via PLAYWRIGHT_PROXY). It pairs the agent with a real browser so you can navigate, inspect, and validate live UI — especially during failure healing with playwright_test_analyzer on E2E Tests V2.

Use it for live UI inspection, navigation, capturing page state, and debugging a browser scenario. Prefer QE E2E Tests V2 to generate, record/refine, or heal Playwright tests.

URLs and JSON

Mount: /mcp/v2/playwright (when Playwright proxy is configured). Config key: playwright.

EnvironmentURLTransportStatus
Production https://qe-mcp.bindg.com/mcp/v2/playwright http Production

Cursor — ~/.cursor/mcp.json

{
  "mcpServers": {
    "playwright": {
      "url": "https://qe-mcp.bindg.com/mcp/v2/playwright",
      "transport": "http"
    }
  }
}

VS Code — .vscode/mcp.json

{
  "servers": {
    "playwright": {
      "url": "https://qe-mcp.bindg.com/mcp/v2/playwright",
      "type": "http"
    }
  },
  "inputs": []
}

Add to Cursor

  1. Open Cursor Settings.
  2. Search for Tools & MCP.
  3. Select Add New MCP Server.
  4. Add the URL https://qe-mcp.bindg.com/mcp/v2/playwright.
  5. Give the server a clear alias, for example playwright or playwright-mcp.
  6. Save the configuration.
  7. Open a chat in Cursor and confirm the MCP server is available in the tools list.
  8. Add any relevant files or application context, then ask the agent to use the Playwright MCP.

Add to VS Code

  1. Open the Command Palette (Cmd+Shift+P on Mac, Ctrl+Shift+P on Windows).
  2. Search for and select MCP: Add Server.
  3. Choose the HTTP option.
  4. Enter the URL https://qe-mcp.bindg.com/mcp/v2/playwright.
  5. Provide an alias such as playwright.
  6. Choose whether to save globally or to the current workspace.
  7. Open the agent/chat experience and confirm Playwright MCP is available.

Recommended usage pattern

  1. Add the Playwright MCP to your IDE.
  2. Attach relevant files for context: page components, existing tests, routes, or page objects.
  3. Describe the workflow you want the agent to explore.
  4. Ask the agent to use the Playwright MCP to inspect, navigate, or validate the flow.
  5. Review the suggested test structure and selectors.
  6. Generate new test files only.
  7. Review, run, and refine the tests before merging.

Example prompts

Navigate a flow: Using MCP server playwright, navigate the login flow and identify the key assertions we should include in an E2E test.
Suggest selectors: Using MCP server playwright, inspect this page and suggest stable selectors for the primary actions.
Validate then generate: Using MCP server playwright, validate this workflow and then generate a Playwright E2E test plan.
Reproduce a UI issue: Using MCP server playwright, reproduce this UI issue and summarize the steps, expected behavior, and actual behavior.
Smoke test: Using Playwright MCP only, open https://beta.bloomberglaw.com/, follow redirects, wait for load. Report final URL, document title, and whether you see a login form or the post-login app. If you hit a captcha or SSO wall, say so and stop.

Codegen integration

Playwright Codegen runs in your terminal, opens a real browser, records your interactions, and generates test code. The MCP cannot execute terminal commands directly, so the workflow is:

  1. Run npx playwright codegen <url> in your terminal.
  2. Record your interactions in the browser window that opens.
  3. Copy the generated code.
  4. Share it with the agent and ask it to transform the output into a structured test file following best practices.

The assistant should:

Why Codegen does not auto-run from a prompt: Cursor is a code editor, not a browser automation tool. It has no built-in browser engine and cannot directly control browser instances or DOM. Playwright Codegen runs in your terminal and opens a separate browser window — share its output with the agent for transformation.

UI mode alternative

You can also use Playwright UI mode with:

npm run test:ui
Prompt: I want to create a test visually using Playwright UI mode for the login flow. Can you guide me through the process?
Prompt after Codegen: I recorded a test with Codegen, and now I want to debug and refine it visually. How do I use UI mode for this?

Validate the connection

In Cursor Settings → Tools & MCP, your Playwright server status should be connected (green). If it errors, check VPN, URL typos, and transport.

Smoke test prompt: Using my MCP server playwright, list available tools or capabilities and provide a short ready checklist.

External references

← Back to MCP Server Guide ← Back to Quality Engineering Tools Suite

Playwright MCP • Browser automation and E2E exploration