Package Exports

playwright-mcp
playwright-mcp/dist/server.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (playwright-mcp) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

How to Use playwright-mcp?

Introduction

playwright-mcp (Model Context Protocol) is a powerful tool that bridges the gap between AI assistants and browser automation. It enables AI models to interact with web browsers, inspect DOM elements, record user interactions, and generate Playwright test scripts with higher accuracy. This guide will walk you through setting up and using playwright-mcp effectively.

Tools

Available tools in the browser interface:

Browser Toolbox

Pick DOM (🎯): Click to select and capture HTML elements from the page. Use this to record selectors for your test cases.
Pick Image (📸): Capture screenshots of specific elements. Useful for visual testing or documentation.
Record Interactions (📋): Record browser interactions such as clicks, inputs, and navigations. These interactions automatically generate selectors and can be passed as context to MCP clients like Claude or Cursor to help write test cases.

MCP Commands

init-browser: Initialise the playwright browser.
get-context: Get the website context, which would be used to write the test case
execute-code: Execute custom Playwright JS code against the current page
get-screenshot: Get a screenshot of the current page
get-full-dom: Get the full DOM of the current page. (Prefer using get-context instead)

Learn More

Want to dive deeper? Check out the full documentation:

📖 View Documentation