How to connect Claude to Playwright via MCP

Prerequisites

You need three things:

• A Claude account that supports MCP — Claude Desktop, Claude.ai with MCP enabled, Cursor, Continue.dev, or Cline.
• A free E2Easy account.
• Any web app you want to test (a public URL is fine for a 2-minute trial).

You do not need an Anthropic API key — E2Easy uses your existing Claude subscription via OAuth.

Step 1 — Sign in to E2Easy and get the MCP URL

Sign up at app.e2easy.app/sign-in (free during early access, no credit card). After login, open Settings → MCP connectors and copy the connector URL. It will look like:

https://mcp.e2easy.app/v1/{your-workspace}/sse

Keep this tab open — you'll paste this URL into Claude in the next step.

Step 2 — Add the connector to your Claude client

Claude Desktop

Open Claude Desktop. Go to Settings → Connectors → Add custom connector. Paste the URL from Step 1 and click Connect. Claude will open a browser tab for OAuth — sign in to your E2Easy account and approve the connection. The connector is now revocable from your E2Easy dashboard at any time.

Claude.ai (web)

If your plan supports MCP connectors, go to Profile → Settings → MCP connectors → Add and paste the URL.

Cursor / Continue.dev / Cline

Add the URL to your client's MCP config file. For Cursor, the config lives at ~/.cursor/mcp.json:

{
  "mcpServers": {
    "e2easy": {
      "url": "https://mcp.e2easy.app/v1/{your-workspace}/sse"
    }
  }
}

Restart the client. The 10 E2Easy tools (inspect_page, find_element, create_test, list_tests, get_test_steps, replace_test_steps, update_test, delete_test, run_test, list_test_runs) should appear in the tool list.

Step 3 — Author your first test

In Claude, type a single message describing the flow you want covered. For example:

Cover the sign-up flow on app.acme.com — admin user,
land on dashboard, assert the welcome banner.

Claude will:

1. Call inspect_page on the URL — a real Playwright browser visits the page and returns interactive elements with stable selectors, ARIA labels, xpath and locator candidates straight from the live DOM.
2. Compose the steps, ask you to confirm, then call create_test to save the recording.
3. Reply with the test name, step count, and a link to the dashboard.

Total LLM cost for authoring a typical 5-step test: about $0.03.

Step 4 — Replay and review

The recorded test now lives in your E2Easy workspace. To replay it:

• From chat: "Run the sign-up flow on staging." Claude calls run_test and returns a run ID.
• From your CI: reference the test ID in your GitHub Actions, GitLab CI or other runner. See the CI replay guide.
• Locally: run via the E2Easy CLI for fastest iteration.

Each replay produces video, step-by-step logs, screenshots and a full run report. Replay is deterministic and uses far fewer LLM tokens than agent-driven approaches — Claude is only re-engaged if a selector breaks (self-heal).

Troubleshooting

Connector shows up but tools are missing

Restart your Claude client after the OAuth flow completes. Cursor and Cline cache the MCP tool list at startup.

OAuth redirect fails

Make sure your firewall doesn't block https://app.e2easy.app. The OAuth callback uses standard HTTPS on port 443.

"inspect_page" timeouts

The default timeout is 30 seconds. For SPAs that load slowly, ask Claude to retry with inspect_page(url, wait_for: "networkidle").