Quick Start

Get started with Playwright MCP in minutes - from installation to your first web automation

Get Started in Minutes

This guide will walk you through setting up Playwright MCP and creating your first web automation.

1. Install Playwright MCP

   Install the Playwright MCP server using npx. The simplest configuration works with most MCP clients:

   npx @playwright/mcp@latest
   

   The @latest tag ensures you always get the most recent version with the latest features and fixes.

2. Configure Your MCP Client

   Add Playwright MCP to your client’s configuration. Most clients use a standard JSON configuration:

   VS Code Claude Desktop

   {
     "mcpServers": {
       "playwright": {
         "command": "npx",
         "args": [
           "@playwright/mcp@latest"
         ]
       }
     }
   }
   

   {
     "mcpServers": {
       "playwright": {
         "type": "stdio",
         "command": "npx",
         "timeout": 30,
         "args": [
           "-y",
           "@playwright/mcp@latest"
         ],
         "disabled": false
       }
     }
   }
   

   {
     "$schema": "https://opencode.ai/config.json",
     "mcp": {
       "playwright": {
         "type": "local",
         "command": [
           "npx",
           "@playwright/mcp@latest"
         ],
         "enabled": true
       }
     }
   }
   

   [mcp_servers.playwright]
   command = "npx"
   args = ["@playwright/mcp@latest"]
   

   amp mcp add playwright -- npx @playwright/mcp@latest
   

   claude mcp add playwright npx @playwright/mcp@latest
   

   For one-click installation in specific clients, see the Installation Guide.

3. Verify Installation

   Restart your MCP client and verify that Playwright MCP is connected. You should see browser automation tools available in your client’s tool list.

   On first run, Playwright may download browser binaries. This is a one-time setup and may take a few minutes.

4. Create Your First Automation

   Let’s create a simple automation that navigates to a website and captures its content:

   Example Request

   Navigate to example.com and capture the page content
   

   1. Playwright MCP launches a browser
   2. Navigates to https://example.com
   3. Captures the accessibility tree snapshot
   4. Returns structured page content to the LLM
   

   The LLM will use these tools:

   • browser_navigate - Navigate to the URL
   • browser_snapshot - Capture page accessibility tree

   Try asking your LLM to interact with specific elements: “Click the login button” or “Fill in the search form”.

5. Explore Available Tools

   Playwright MCP provides dozens of tools for browser automation:

   Core Automation Tools

   • browser_navigate - Navigate to URLs
   • browser_snapshot - Capture page accessibility tree
   • browser_click - Click elements
   • browser_type - Type text into fields
   • browser_fill_form - Fill multiple form fields
   • browser_take_screenshot - Capture screenshots
   • browser_evaluate - Execute JavaScript
   • browser_run_code - Run Playwright code snippets

   Advanced Tools

   • browser_network_requests - Monitor network activity
   • browser_console_messages - Capture console logs
   • browser_tabs - Manage browser tabs
   • browser_pdf_save - Generate PDFs (with —caps=pdf)
   • browser_verify_* - Test assertions (with —caps=testing)

Example Workflows

Web Scraping

Navigate to news.ycombinator.com and extract the top 5 story titles

The LLM will:

1. Navigate to the website
2. Capture the accessibility snapshot
3. Parse the structured data to find story titles
4. Return the top 5 results

Form Automation

Go to example.com/contact, fill in the contact form with:
- Name: John Doe
- Email: [e-mail]
- Message: Hello from Playwright MCP

Then submit the form.

The LLM will:

1. Navigate to the contact page
2. Locate form fields using the accessibility tree
3. Fill in each field
4. Click the submit button

Testing Workflows

Navigate to my-app.com, verify the login button is visible,
then test the login flow with test credentials

The LLM will:

1. Navigate and capture the page
2. Use browser_verify_element_visible to check for the button
3. Interact with the login form
4. Verify the authentication flow

Configuration Options

You can customize Playwright MCP behavior with command-line arguments:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--browser=firefox",
        "--headless",
        "--timeout-action=10000"
      ]
    }
  }
}

Common options:

• --browser - Choose browser: chrome, firefox, webkit, msedge
• --headless - Run browser in headless mode
• --timeout-action - Set action timeout in milliseconds (default: 5000)
• --timeout-navigation - Set navigation timeout (default: 60000)
• --caps - Enable additional capabilities: vision, pdf, devtools

See the Configuration Reference for all available options.

Next Steps

Installation Guide

Detailed setup instructions for all MCP clients

Configuration

Learn about all configuration options and advanced setup

Available Tools

Explore all browser automation tools and capabilities

Core Concepts

Understand MCP and browser automation fundamentals