How to install Playwright MCP on Other IDEs

Install Playwright MCP once and enable AI-driven browser automation across IDEs like JetBrains, Zed, and Cursor with a consistent, editor-agnostic setup.

Playwright

TestDino

Jan 19, 2026

How to install Playwright MCP on Other IDEs

Playwright MCP is quickly becoming the missing link between AI-powered coding assistants and reliable browser automation inside your editor.

If your team is still deciding whether Playwright is worth standardizing on, this Playwright market share and adoption breakdown will help you justify the switch internally.

By exposing Playwright through the Model Context Protocol, it lets tools like JetBrains IDEs, Zed, and Goose turn natural language into executable, production-ready tests without constant context switching.

Instead of manually hunting for selectors, you describe the scenario and let your AI assistant use accessibility tree snapshots to generate robust, cross-browser Playwright code.

Whether you're standardizing across a team or testing locally, this guide provides a consistent installation path that works across different editors.

Playwright and Playwright MCP Fundamentals

Playwright is Microsoft's open-source browser automation framework. It lets you automate real browser interactions across Chromium, Firefox, and WebKit with one unified API.

It solves three persistent problems:

Flaky tests from unreliable waits
Fragmented tooling across browsers
Inconsistent cross-browser behavior

Playwright handles waits, parallel execution, and context isolation automatically.

Why Playwright MCP Matters for AI-Driven Testing?

Playwright MCP (Model Context Protocol) exposes Playwright's automation capabilities in a structured format that AI assistants and IDEs can consume directly.

Instead of screenshots, it uses accessibility tree snapshots. This makes automation:

Lightweight
Deterministic
LLM-friendly

Why it matters for your workflow:

Installing Playwright MCP in your favourite IDE turns natural language into structured Playwright commands. AI bots can drive real browser automation from within your editor.

This opens the door to smarter test generation and interaction workflows without leaving your development environment.

Universal Playwright MCP Server Setup

Most teams waste hours figuring out how to configure their MCP server for Playwright across different development environments.

The good news?

There's a universal approach that works across almost every modern IDE and code editor. The Playwright MCP server installation follows a standard Node.js package installation pattern.

Once installed, you configure it using a JSON-based MCP server configuration that most MCP-compatible editors recognize automatically.

Installing Playwright MCP via NPM

The Playwright MCP server is distributed as an npm package. You can install it globally or use it directly with npx.

Global installation:

bash

npm install -g @playwright/mcp

Or use npx without installation:

bash

npx @playwright/mcp

Global installation is recommended for teams running multiple projects or working across different repositories.

It ensures the MCP server for Playwright is always available without repeated downloads.

Using npx works well for testing or one-off usage, but adds startup time since it downloads the package on each run.

the package on each run.

Standard MCP Server Configuration File

After installing the Playwright MCP server, you need to configure your code editor to recognize it.

Most editors supporting the model context protocol use a standardized JSON config file.

Universal MCP JSON config for Playwright:

mcp_config.json

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp"
      ],
    }
  }
}

IDE Specific Setup

While the universal configuration works across most environments, some IDEs and editors require specific setup steps.

This section covers Playwright MCP installation in three popular development tools: JetBrains IDEs, Zed Editor, and Goose.

Each tool has its own way of discovering and loading MCP servers.

Understanding these differences helps you configure browser automation capabilities correctly the first time.

What is IntelliJ?

IntelliJ refers to JetBrains' suite of integrated development environments built on a shared platform. Each IDE targets specific programming languages while sharing core features like intelligent code completion, refactoring tools, and debugging capabilities.

IntelliJ IDEA: JetBrains' flagship IDE for Java and JVM languages. Offers advanced code analysis, framework support, and enterprise tools in Community (free) and Ultimate (paid) editions.

WebStorm: Dedicated IDE for JavaScript and TypeScript development. Includes native support for React, Vue, Angular, and modern web tooling like npm and webpack.

Playwright MCP on JetBrains IDEs

JetBrains IDEs like IntelliJ IDEA, WebStorm, and PyCharm support MCP through their AI Assistant plugin.

The setup process differs slightly from standard MCP configurations.

Step 1: Install the AI Assistant plugin

Open your JetBrains IDE and navigate to Settings > Plugins.

Search for "AI Assistant" and install it.

Restart the IDE when prompted.

Step 2: Enable MCP support

Go to Settings > Tools > AI Assistant > Model Context Protocol.

Enable the "Use MCP servers" checkbox.

Step 3: Add Playwright MCP server

Click "Add Server" and enter the following details:

Server name: Playwright
Command: npx
Arguments: -y @playwright/mcp

Step 4: Test the connection

Click "Test Connection" to verify the MCP server starts correctly. JetBrains will show a success message if the Playwright MCP server responds.

The AI Assistant can now access Playwright's browser automation capabilities when you ask it to help write tests or debug selectors.

What is Zed Editor?

Zed is a lightweight, performance-focused code editor with built-in AI features. It delivers fast editing experiences through native system integration and GPU-accelerated rendering.

The editor supports the model context protocol natively, enabling seamless integration with MCP servers for browser automation and intelligent coding assistance.

Playwright MCP on Zed Editor

Zed is a lightweight, performance-focused code editor with built-in AI features. Setting up the Playwright MCP server in Zed follows a simpler configuration pattern.

Step 1: Locate Zed's config directory

Zed stores its MCP configuration in:

macOS: ~/Library/Application Support/Zed/mcp.json
Linux: ~/.config/zed/mcp.json

Step 2: Create or edit mcp.json

If the file doesn't exist, create it. Add this configuration:

mcp_config.json

{
  "context_servers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp"]
    }
  }
}

Step 3: Restart Zed

Close and reopen Zed completely. The editor loads the MCP server configuration only at startup.

Step 4: Verify in the Assistant panel

Open Zed's AI Assistant panel (Cmd+Shift+A on macOS). You should see Playwright listed as an available tool when you hover over the tool icon.

Zed's MCP integration is straightforward because it uses the standard model context protocol without custom layers. This makes Playwright MCP cursor installation and Zed setup nearly identical.

What is Goose?

Goose is an AI-powered coding assistant that runs directly in your terminal. It provides intelligent code generation, debugging support, and browser automation capabilities through MCP servers.

The tool integrates with version control systems and supports interactive test creation workflows without leaving the command line environment.

Playwright MCP on Goose

Goose is an AI-powered coding assistant that runs in your terminal. It provides browser automation capabilities through MCP servers with a different configuration approach.

Method 1: Quick Installation

Click the text below to quickly add Playwright MCP as a Goose extension:

Install Playwright MCP for Goose

This button opens Goose's extension installer and pre-populates the command npx @playwright/mcp with all required settings.

After clicking, Goose will register Playwright as an available tool, and you can start using it in your next session.

Method 2: Manual Installation

If you prefer to set it manually, follow the manual process below.

1. Open the Goose side panel and navigate to the Extensions tab.

2. Click Add custom extension and enter these details:

Name: Playwright (or whatever you prefer)

Type: STDIO

Command: npx @playwright/mcp@latest

3. Click Add Extension to save the configuration.

Goose loads the Playwright MCP server automatically on startup. Test the integration by asking Goose to navigate to any website or inspect a page element.

4. Test Playwright integration

Ask Goose to navigate to a website or inspect an element. It should use the Playwright MCP server automatically:

Prompt

Navigate to example.com and describe its structure

Goose will leverage Playwright's structured accessibility snapshots to provide accurate web navigation insights.

Setup verification example

After configuring your Playwright MCP server, verify the installation works correctly by creating a real test case.

This example demonstrates how AI-driven QA workflows simplify test creation using the model context protocol.

Prompt for your AI coding assistant:

Prompt

Write a Playwright test that:
Opens app.testdino.com
Takes a screenshot of the login page
Fills email and password fields
Clicks the login button
Takes a screenshot of the dashboard
Logs out

This simple prompt leverages browser automation capabilities through the MCP server. Your AI assistant uses structured accessibility snapshots to identify elements accurately.

Expected outputs:

Complete Playwright test file with proper imports and test structure
Screenshot capture commands at login and dashboard pages
Accurate selectors for email, password, and login button elements
Assertions confirming successful navigation between pages
Proper async/await handling and page object patterns

The AI test automation workflow generates production-ready code without manual element inspection.

Common Issues and Fixes

Here are the frequent setup problems teams encounter and maps each issue to clear symptoms and practical corrective actions.

Issue	Symptom	Solution
MCP server not running	IDE shows server unavailable, or NL commands do nothing	Install Node.js, install the MCP server globally via npm, and start the local server
Incorrect MCP configuration	Browser automation or AI QA does not trigger	Verify the :mcp.json path and server settings so the IDE can connect
Missing Playwright or browsers	Browsers fail to launch, or tests stop at startup	Reinstall Playwright and browser engines using :npx playwright install
IDE integration issues	Works in one IDE but not others	Follow IDE-specific setup and confirm the MCP server endpoint is linked

Conclusion

Once Playwright MCP is configured, your IDE shifts from a simple code editor into a central workspace for writing, running, and analyzing tests.

One MCP server setup works across JetBrains, Zed, Goose, and any other MCP-aware tool in your stack. Your natural language prompts turn into reliable, accessibility-aware tests that run consistently across Chromium, Firefox, and WebKit.

From there, you can add shared configs, CI-friendly server startup, and editor-specific shortcuts without rebuilding the foundation.

When your tests start running at scale, tools like TestDino help you make sense of the results.

It centralizes your Playwright test runs, automatically classifies failures, and connects results to PRs and commits so you can spot patterns faster.

Scale Visual Testing Faster

Analyze Playwright test results, reduce noise, and spot regressions instantly

Try TestDino Try TestDino

FAQs

Playwright MCP is used to connect AI agents and IDE assistants with Playwright’s browser automation engine. It enables natural language-driven UI and API testing using a local MCP server.

Table of content

How to install Playwright MCP on Other IDEs

Playwright and Playwright MCP Fundamentals

Why Playwright MCP Matters for AI-Driven Testing?

Why it matters for your workflow:

Universal Playwright MCP Server Setup

Installing Playwright MCP via NPM

Standard MCP Server Configuration File

IDE Specific Setup

What is IntelliJ?

Playwright MCP on JetBrains IDEs

Step 1: Install the AI Assistant plugin

Step 2: Enable MCP support

Step 3: Add Playwright MCP server

Step 4: Test the connection

What is Zed Editor?

Playwright MCP on Zed Editor

Step 1: Locate Zed's config directory

Step 2: Create or edit mcp.json

Step 3: Restart Zed

Step 4: Verify in the Assistant panel

What is Goose?

Playwright MCP on Goose

Method 1: Quick Installation

Method 2: Manual Installation

Setup verification example

Expected outputs:

Common Issues and Fixes

Conclusion

FAQs

Get started fast

Automating Visual Regression Checks with Playwright MCP

Using Playwright MCP to Fix Flaky Tests Automatically

How to Use Playwright MCP Server in Docker

How to install Playwright MCP on Other IDEs

Playwright and Playwright MCP Fundamentals

Why Playwright MCP Matters for AI-Driven Testing?

Why it matters for your workflow:

Universal Playwright MCP Server Setup

Installing Playwright MCP via NPM

Standard MCP Server Configuration File

IDE Specific Setup

What is IntelliJ?

Playwright MCP on JetBrains IDEs

Step 1: Install the AI Assistant plugin

Step 2: Enable MCP support

Step 3: Add Playwright MCP server

Step 4: Test the connection

What is Zed Editor?

Playwright MCP on Zed Editor

Step 1: Locate Zed's config directory

Step 2: Create or edit mcp.json

Step 3: Restart Zed

Step 4: Verify in the Assistant panel

What is Goose?

Playwright MCP on Goose

Method 1: Quick Installation

Method 2: Manual Installation

Setup verification example

Expected outputs:

Common Issues and Fixes

Conclusion

FAQs

Get started fast

Automating Visual Regression Checks with Playwright MCP

Using Playwright MCP to Fix Flaky Tests Automatically

How to Use Playwright MCP Server in Docker

Join our waitlist