Playwright MCP Quickstart Template 🤖🎭

Welcome to the Quickstart Template for running Playwright with the Model Context Protocol (MCP). This repo contains everything you need to let AI agents (like Claude Desktop or Cursor) control a local browser using Playwright's accessibility tree.

As seen on JKC Tutorials.

🚀 Prerequisites

1. Node.js 20 or newer installed on your machine.

2. An MCP client installed (e.g., Claude Desktop or Cursor).

Related MCP server: Playwright MCP

⚙️ Installation

1. Clone this repository.

2. Install the dependencies:

   npm install

3. Install the required Playwright browsers:

   npm run setup

🔌 Connecting to Claude Desktop

To give Claude Desktop control over Playwright, you must update Claude's configuration file.

1. Open the Claude Desktop configuration file:

   • Mac: ~/Library/Application Support/Claude/claude_desktop_config.json

   • Windows: %APPDATA%\Claude\claude_desktop_config.json

2. Copy the contents of the claude_desktop_config.json file provided in this repository and paste it into Claude's config file.

3. Restart Claude Desktop.

Note: You do not need to run npm run start-mcp manually if you configure Claude Desktop this way; Claude will spin up the server automatically when needed.

🧪 Running Your First AI Test

Once Claude Desktop is restarted, open a new chat in Claude and copy/paste this exact prompt:

"Use Playwright MCP to navigate to https://www.saucedemo.com/. Log in using the username 'standard_user' and password 'secret_sauce'. Add the backpack to the cart, navigate to the cart, and verify that the backpack is present."

Watch as Claude opens a headed browser, reads the accessibility tree, and executes the entire flow without a single line of traditional test code!

Want more tutorials on AI and Test Automation? Subscribe to JKC Tutorials on YouTube.