# 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](https://www.youtube.com/@JKCTutorials).

## 🚀 Prerequisites

1.  **Node.js 20 or newer** installed on your machine.
2.  An MCP client installed (e.g., [Claude Desktop](https://claude.ai/download) or Cursor).

## ⚙️ Installation

1.  Clone this repository.
2.  Install the dependencies:
    ```bash
    npm install
    ```
3.  Install the required Playwright browsers:
    ```bash
    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](https://www.youtube.com/@JKCTutorials).*