> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/microsoft/playwright-mcp/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

<Steps>
  <Step title="Install Playwright MCP">
    Install the Playwright MCP server using npx. The simplest configuration works with most MCP clients:

    ```bash theme={null}
    npx @playwright/mcp@latest
    ```

    <Note>
      The `@latest` tag ensures you always get the most recent version with the latest features and fixes.
    </Note>
  </Step>

  <Step title="Configure Your MCP Client">
    Add Playwright MCP to your client's configuration. Most clients use a standard JSON configuration:

    <CodeGroup>
      ```json VS Code / Cursor / Claude Desktop theme={null}
      {
        "mcpServers": {
          "playwright": {
            "command": "npx",
            "args": [
              "@playwright/mcp@latest"
            ]
          }
        }
      }
      ```

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

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

      ```toml Codex theme={null}
      [mcp_servers.playwright]
      command = "npx"
      args = ["@playwright/mcp@latest"]
      ```

      ```bash Amp CLI theme={null}
      amp mcp add playwright -- npx @playwright/mcp@latest
      ```

      ```bash Claude Code CLI theme={null}
      claude mcp add playwright npx @playwright/mcp@latest
      ```
    </CodeGroup>

    <Tip>
      For one-click installation in specific clients, see the [Installation Guide](/installation).
    </Tip>
  </Step>

  <Step title="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.

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

  <Step title="Create Your First Automation">
    Let's create a simple automation that navigates to a website and captures its content:

    <CodeGroup>
      ```text Example Request theme={null}
      Navigate to example.com and capture the page content
      ```

      ```text What Happens theme={null}
      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
      ```
    </CodeGroup>

    The LLM will use these tools:

    * `browser_navigate` - Navigate to the URL
    * `browser_snapshot` - Capture page accessibility tree

    <Tip>
      Try asking your LLM to interact with specific elements: "Click the login button" or "Fill in the search form".
    </Tip>
  </Step>

  <Step title="Explore Available Tools">
    Playwright MCP provides dozens of tools for browser automation:

    <Accordion title="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
    </Accordion>

    <Accordion title="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)
    </Accordion>
  </Step>
</Steps>

## Example Workflows

### Web Scraping

```text theme={null}
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

```text theme={null}
Go to example.com/contact, fill in the contact form with:
- Name: John Doe
- Email: john@example.com
- 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

```text theme={null}
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:

```json theme={null}
{
  "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`

<Tip>
  See the [Configuration Reference](/guides/configuration) for all available options.
</Tip>

## Next Steps

<CardGroup cols={2}>
  <Card title="Installation Guide" icon="download" href="/installation">
    Detailed setup instructions for all MCP clients
  </Card>

  <Card title="Configuration" icon="gear" href="/guides/configuration">
    Learn about all configuration options and advanced setup
  </Card>

  <Card title="Available Tools" icon="wrench" href="/tools/overview">
    Explore all browser automation tools and capabilities
  </Card>

  <Card title="Core Concepts" icon="lightbulb" href="/concepts/mcp-overview">
    Understand MCP and browser automation fundamentals
  </Card>
</CardGroup>