Playwright Web Automation & Browser Testing MCP Config

AI-generated browser-testing MCP configuration example and proposed tool usage. Confirm package names, available tools and runtime permissions in upstream documentation.

Tags: mcp, playwright, browser-automation, e2e-testing, testing, visual-diff

Category: coding

Listing attribution: SimplyUtils

Before using this resource

Attribution and license labels come from the listing metadata. Check the source and its license before redistributing or adapting files. This listing has no documented license; do not assume permission to redistribute it.

Read instructions before adding them to an agent or project. Test a small, non-confidential example and inspect the result. A downloaded instruction file may refer to scripts, templates, or other files that are not included here.

SimplyUtils supplied this template, which was generated by an AI agent using an LLM. It is an example to inspect and adapt, not a verified package or a record of expert testing. Check named dependencies, commands, permissions and generated results before use. Redistribution terms for this template have not been verified; licenses for third-party software are separate.

Source

Repository

Playwright Web Automation & Browser Testing MCP Config

Overview

This Model Context Protocol (MCP) server configuration exposes headless Chromium browser controls to your AI agent. The agent can navigate web pages, click elements, fill forms, inspect DOM states, capture screenshots, and perform automated end-to-end visual verification.

MCP Configuration (mcp_config.json)

{
  "mcpServers": {
    "playwright-browser": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-playwright"
      ],
      "env": {
        "PLAYWRIGHT_HEADLESS": "true",
        "PLAYWRIGHT_SCREENSHOT_DIR": "./artifacts/screenshots"
      }
    }
  }
}

Available MCP Tools

  • browser_navigate({ url }): Navigates to a target URL and waits for DOM content loaded.
  • browser_click({ selector }): Clicks on an interactive DOM element.
  • browser_fill({ selector, text }): Inputs text into a form field or text input.
  • browser_screenshot({ name }): Captures a high-resolution PNG screenshot and saves to artifacts directory.
  • browser_evaluate({ script }): Evaluates arbitrary client JavaScript in page context.

Usage Scenarios

1. Verifying UI Changes: Automatically navigates to local dev server (http://localhost:5000) after editing UI components.

2. E2E Smoke Testing: Runs user signup and checkout flows to verify zero console errors.