Set up Playwright MCP with Claude Code

A compact guide to wire Playwright plus Model Context Protocol so your AI assistant can run browser tests.

Prerequisites

• Node.js 18 or newer, git, and a modern package manager.
• A Claude Code or MCP-capable assistant.
• Browsers installed by running npx playwright install.

Quick start

1. Create a workspace and install Playwright: npm init -y npm install -D @playwright/test npx playwright install
2. Add an MCP server entry pointing to your repo (see claude_code_config.json).
3. Expose safe commands such as npx playwright test and node scripts/seed.js.

Writing a first test

import { test, expect } from '@playwright/test';

test('landing page loads', async ({ page }) => {
  await page.goto('http://localhost:3000');
  await expect(page.getByRole('heading', { name: /home/i })).toBeVisible();
});

Run with npx playwright test and keep artifacts (screenshots, traces) for debugging.

Best practices

• Pin Node and Playwright versions to avoid drift.
• Least-privilege commands: only allow what the assistant needs.
• Use a staging URL and seed data; avoid hitting production accounts.
• Store secrets outside config or mock them during tests.

Result: With MCP, your assistant can preview pages, run tests, and share artifacts without manual clicking.