Skip to main content

​
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:
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@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:
Navigate to example.com and capture the page content
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:
  • 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
  • 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: [email protected]
- 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