MCP Server

Browser AutomationHeadless ChromeApache 2.0

Puppeteer MCP Server

Q: What is the Puppeteer MCP Server?

Puppeteer MCP Server is a Model Context Protocol integration that gives AI coding assistants direct control over a headless Chrome or Chromium browser. It exposes navigation, screenshot, DOM interaction, form filling, and scraping operations as MCP tools that Claude Code, Cursor, or any MCP-compatible client can call. This allows agents to interact with web pages the same way a human user would.

Q: How do I install and configure Puppeteer MCP?

Install the server via npm and register it with your MCP client. Puppeteer downloads a compatible Chromium binary automatically during installation. You can optionally set environment variables to point to an existing Chrome installation, configure viewport dimensions, or enable headed mode for visual debugging. The server launches a browser instance on the first tool call and reuses it across subsequent requests.

Q: Can Puppeteer MCP handle JavaScript-rendered pages?

Yes. Unlike simple HTTP scrapers, Puppeteer runs a full browser engine that executes JavaScript, renders CSS, and processes AJAX requests. This makes it ideal for scraping single-page applications, React/Vue sites, and pages that load content dynamically. The agent can wait for specific selectors or network idle before extracting data.

Q: Is Puppeteer MCP suitable for end-to-end testing?

Absolutely. The agent can navigate through multi-step user flows, fill forms, click buttons, assert page content, and take screenshots at each step. While dedicated tools like Playwright offer more advanced testing features, Puppeteer MCP is excellent for quick smoke tests, regression checks, and visual validation directly from your coding assistant.

Q: How does Puppeteer MCP compare to Playwright MCP?

Puppeteer focuses exclusively on Chromium-based browsers and has a simpler API surface. Playwright MCP supports multiple browsers (Chrome, Firefox, WebKit) and offers more advanced features like auto-waiting and network interception. Choose Puppeteer MCP when you only need Chrome support and prefer a lighter setup, or Playwright MCP when cross-browser testing matters.

Q: Can Puppeteer MCP run in CI/CD environments?

Yes. Puppeteer runs in headless mode by default, which works in CI/CD containers, Docker, and remote servers without a display. The MCP server inherits this capability. Common setups include running screenshot audits on every PR, validating deployed pages after a release, or scraping competitor pricing on a schedule.

by Community / Puppeteer Team · puppeteer/puppeteer

Puppeteer MCP Server gives your AI coding assistant full control over a headless Chrome or Chromium browser. Your agent can navigate to any URL, take full-page or element-level screenshots, extract text and HTML from the DOM, fill out forms, click buttons, and wait for dynamic content to load — all through lightweight MCP tool calls without leaving your IDE.

Built on Google's Puppeteer library — the most widely adopted Node.js browser automation framework with over 88K GitHub stars — this MCP server inherits battle-tested reliability for tasks ranging from web scraping and visual regression testing to automated form submission and site monitoring. It runs Chromium in headless mode by default, making it ideal for CI/CD pipelines and server environments.

10+

Tools Exposed

navigate, screenshot, click...

<3min

Setup

npm install + config

Chromium

Browser

headless or headed

Apache 2.0

License

open source

Quick Install

claude mcp add puppeteer -- npx puppeteer-mcp-server

Key Features

Full Page Navigation

Navigate to any URL with configurable wait conditions — wait for DOM content loaded, network idle, or specific CSS selectors before proceeding. Handle redirects, authentication prompts, and single-page app route changes seamlessly.

Screenshot Capture

Take full-page screenshots, viewport-only captures, or element-level snapshots in PNG or JPEG format. Configure quality, clip regions, and device scale factor for pixel-perfect visual testing and documentation.

DOM Scraping & Extraction

Extract text content, innerHTML, attribute values, and computed styles from any element using CSS selectors. Evaluate arbitrary JavaScript in the page context to access data from complex SPAs and dynamic widgets.

Form Interaction

Type into input fields, select dropdown options, check boxes, click buttons, and submit forms. Handle multi-step wizards, file uploads, and dynamically generated form fields that appear after user interaction.

Network Monitoring

Intercept and inspect network requests and responses. Monitor API calls made by the page, block specific resources like ads or analytics, and capture response bodies for data extraction from XHR and fetch requests.

PDF Generation

Render any web page to a PDF with configurable page size, margins, headers, and footers. Generate printable reports, invoices, or documentation directly from live web content without manual export steps.

Execution Brief

Use this page as a rollout checklist, not just reference text.

Suggest update

Tool Mapping Lens

Organize Tools by Workflow Phase

Catalog-oriented pages work best when users can map discovery, evaluation, and rollout in a clear path instead of reading an undifferentiated list.

Define the job-to-be-done first
Group tools by stage
Prioritize by adoption friction

Actionable Utility Module

Skill Implementation Board

Use this board for Puppeteer MCP Server before rollout. Capture inputs, apply one decision rule, execute the checklist, and log outcome.

Input: Objective

Deliver one measurable improvement with puppeteer mcp server claude code browser automation headless chrome scraping testing

Input: Baseline Window

20-30 minutes

Input: Fallback Window

8-12 minutes

Decision Trigger	Action	Expected Output
Input: one workflow objective and release owner are defined	Run preview execution with fixed acceptance criteria.	Go or hold decision backed by repeatable evidence.
Input: output quality below baseline or retries increase	Limit scope, isolate root issue, and rerun controlled test.	One confirmed correction path before wider rollout.
Input: checks pass for two consecutive replay windows	Promote to broader traffic with fallback path active.	Stable rollout with low operational surprise.

Execution Steps

Record objective, owner, and stop condition.
Execute one controlled preview run.
Measure quality, latency, and correction burden.
Promote only when pass criteria are stable.

Output Template

tool=puppeteer mcp server claude code browser automation headless chrome scraping testing
objective=
preview_result=pass|fail
primary_metric=
next_step=rollout|patch|hold

Share execution feedback

What Is Puppeteer MCP Server?

Puppeteer MCP Server is a Model Context Protocol bridge that connects AI coding assistants to a headless Chrome or Chromium browser via Google's Puppeteer library. It exposes browser automation primitives — navigation, DOM interaction, screenshots, form filling, and JavaScript evaluation — as MCP tools that any compatible client can invoke directly from the IDE.

Web scraping, visual testing, and browser automation are among the most common tasks developers face, yet they typically require writing standalone scripts with complex async logic. Puppeteer MCP eliminates this overhead by letting the agent drive the browser conversationally. Ask "go to example.com and grab the pricing table" and the agent handles navigation, waiting, extraction, and formatting in one seamless flow.

The server manages browser lifecycle automatically. It launches a Chromium instance on the first tool call, reuses it across subsequent requests for performance, and cleans up when the session ends. You can configure it to run in headed mode for visual debugging, set custom viewport sizes for responsive testing, or connect to an existing Chrome instance via the DevTools protocol.

Puppeteer MCP integrates naturally with other MCP servers in the ecosystem. Filesystem MCP can save scraped data and screenshots to disk, Postgres MCP can store extracted data in a database, and GitHub MCP can attach visual diffs to pull requests. Together, they create a powerful automation stack orchestrated entirely by your AI assistant.

How to Calculate Better Results with puppeteer mcp server claude code browser automation headless chrome scraping testing

Install the Puppeteer MCP server package via npm. Puppeteer automatically downloads a compatible Chromium binary during installation, so no separate browser setup is needed. If you prefer to use an existing Chrome installation, set the PUPPETEER_EXECUTABLE_PATH environment variable to its binary path.

Register the MCP server with your AI client using the appropriate configuration command. For Claude Code, run the quick install command shown above. For other MCP clients, add the server entry to your MCP configuration file with the npx command as the server executable.

Configure optional settings to match your use case. Set PUPPETEER_HEADLESS to false for visual debugging, adjust PUPPETEER_VIEWPORT_WIDTH and PUPPETEER_VIEWPORT_HEIGHT for responsive testing, or set PUPPETEER_DEFAULT_TIMEOUT to increase wait times for slow-loading pages. These environment variables are read by the server at startup.

Verify the setup by asking your agent to navigate to a public website, take a screenshot, and extract the page title. If the screenshot appears and the title matches, the browser automation pipeline is working end-to-end. Try a more complex task like filling a search form and extracting results to confirm interactive capabilities.

Treat this page as a decision map. Build a shortlist fast, then run a focused second pass for security, ownership, and operational fit.

When a team keeps one shared selection rubric, tool adoption speeds up because evaluators stop debating criteria every time a new option appears.

Worked Examples

Automated competitor pricing monitor

You need to track pricing changes across five competitor websites that render prices dynamically with JavaScript
Ask the agent to navigate to each competitor's pricing page using Puppeteer MCP, waiting for network idle to ensure all prices are rendered
The agent extracts pricing data using CSS selectors targeting price elements, plan names, and feature lists on each page
Extracted data is structured into a JSON object with competitor name, plan tiers, and prices, then saved to a local file via Filesystem MCP
The agent compares current prices against the previous snapshot stored on disk and highlights any changes
A summary report is generated showing which competitors changed prices, by how much, and whether your pricing remains competitive

Outcome: A fully automated pricing intelligence pipeline that runs on demand from your IDE, capturing JavaScript-rendered pricing data that simple HTTP scrapers would miss.

Visual regression testing for a web application

Your team ships UI changes frequently and wants to catch visual regressions before they reach production
Ask the agent to navigate to each critical page of your staging site (homepage, dashboard, settings, checkout) using Puppeteer MCP
The agent takes full-page screenshots at multiple viewport sizes — desktop (1920x1080), tablet (768x1024), and mobile (375x812)
Screenshots are saved with descriptive filenames via Filesystem MCP and compared pixel-by-pixel against baseline images from the last release
The agent reports which pages have visual differences, the percentage of changed pixels, and the affected viewport sizes
If differences exceed a threshold, the agent creates a GitHub issue via GitHub MCP with the diff screenshots attached for the team to review

Outcome: An agent-driven visual QA process that catches layout breaks, font changes, and styling regressions across all viewports before deployment.

Frequently Asked Questions

What is the Puppeteer MCP Server?