@ai-coding-labs/playwright-mcp-plus
Advanced tools
Enhanced Playwright Tools for MCP with Project Session Isolation
Single Browser Limitation: Only one browser automation session at a time. Session conflicts destroy your workflow...
πΉ Demo Video:
π― GAME CHANGER: Open Multiple Browsers Simultaneously for Concurrent Automation Testing!
Experience the power of parallel browser automation - run multiple automated tests across different projects at the same time, each with their own persistent sessions!
πΉ Demo Video:
π‘ Note: The videos demonstrate the revolutionary difference - from single browser limitation to unlimited concurrent browser automation.
π₯ What You Just Witnessed:
A enhanced Model Context Protocol (MCP) server that provides browser automation capabilities using Playwright.
β‘ The Problem We Solve:
π Our Revolutionary Solution: π― UNLIMITED CONCURRENT BROWSER AUTOMATION - Run multiple automated tests simultaneously across different projects, each with isolated persistent sessions!
β¨ What This Unlocks for You:
This enhanced version maintains 100% backward compatibility with the official Playwright MCP while unlocking unlimited concurrent browser automation:
system: Store in OS cache directory (recommended, user-invisible)project: Store in project directory (legacy behavior)custom: Store in custom location--project-isolation: Enable project-level session isolation (default: disabled)--project-isolation-session-strategy: Choose storage strategy (default: "system")--project-isolation-session-root-dir: Custom root directory for session storageFirst, install the Playwright MCP server with your client.
Standard config (100% compatible with official Playwright MCP):
{
"mcpServers": {
"playwright-plus": {
"command": "npx",
"args": [
"-y",
"@ai-coding-labs/playwright-mcp-plus@latest"
]
}
}
}
Enhanced config with project isolation (recommended):
{
"mcpServers": {
"playwright-plus": {
"command": "npx",
"args": [
"-y",
"@ai-coding-labs/playwright-mcp-plus@latest",
"--project-isolation"
]
}
}
}
Advanced config with custom session storage:
{
"mcpServers": {
"playwright-plus": {
"command": "npx",
"args": [
"-y",
"@ai-coding-labs/playwright-mcp-plus@latest",
"--project-isolation",
"--project-isolation-session-strategy=custom",
"--project-isolation-session-root-dir=/custom/session/path"
]
}
}
}
π‘ Pro Tip for Multi-Project Workflows:
Once you enable --project-isolation, each of your projects will automatically get its own browser session. When you call any browser tool, simply include the project parameters:
// Each project gets isolated sessions automatically
browser_navigate({
url: "https://yourapp.com",
projectDrive: "/", // For macOS/Linux: "/", For Windows: "C:"
projectPath: "/path/to/your/project" // Absolute path to your project directory
})
This ensures your login states, cookies, and browser data never interfere between different projects!
Before (Official Playwright MCP):
# Working on Project A - login to admin panel
browser_navigate("https://myapp-staging.com/admin")
# Login with credentials, do some testing...
# Switch to Project B window - session lost! π±
browser_navigate("https://different-app.com/dashboard")
# All Project A login states are gone, must login again
# Switch back to Project A - login lost again! π±
# Must re-authenticate every single time
After (With Project Isolation):
# Project A window - gets its own isolated session
browser_navigate({
url: "https://myapp-staging.com/admin",
projectDrive: "/",
projectPath: "/Users/you/projects/project-a"
})
# Login once, stays logged in forever β¨
# Project B window - completely separate session
browser_navigate({
url: "https://different-app.com/dashboard",
projectDrive: "/",
projectPath: "/Users/you/projects/project-b"
})
# Login once, independent of Project A β¨
# Switch back to Project A - STILL LOGGED IN! π
# Run automated tests without re-authentication
# Perfect for CI/CD pipelines and development workflows
The Result: Your automated tests run 10x faster, your development workflow is uninterrupted, and you can work on multiple projects simultaneously without losing authentication state.
Playwright MCP Plus includes powerful Chrome extension management capabilities that allow you to programmatically install, uninstall, and manage Chrome extensions with automatic browser restart for immediate effect.
Key Features:
~/.mcp-extensions/ directoryUsage Examples:
// Install an extension by URL with immediate loading
browser_extension_install({
extensionUrl: "https://chromewebstore.google.com/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa",
loadImmediately: true,
projectDrive: "/",
projectPath: "/path/to/your/project"
})
// Install an extension by ID
browser_extension_install({
extensionId: "chklaanhfefbnpoihckbnefhakgolnmc",
loadImmediately: true
})
// List all installed extensions
browser_extension_list()
// Uninstall an extension with immediate effect
browser_extension_uninstall({
extensionId: "bcjindcccaagfpapjjmafapmmgkkhgoa",
restartImmediately: true
})
Perfect for:
Use the Claude Code CLI to add the enhanced Playwright MCP server:
Standard version:
claude mcp add playwright-plus npx -y @ai-coding-labs/playwright-mcp-plus@latest
With project isolation (recommended):
claude mcp add playwright-plus npx -y @ai-coding-labs/playwright-mcp-plus@latest --project-isolation
Follow the MCP install guide, use the standard config above.
Go to Cursor Settings -> MCP -> Add new MCP Server. Name to your liking, use command type with the command npx -y @ai-coding-labs/playwright-mcp-plus --project-isolation. You can also verify config or add command like arguments via clicking Edit.
Follow the MCP install guide, use the standard config above.
Go to Advanced settings -> Extensions -> Add custom extension. Name to your liking, use type STDIO, and set the command to npx -y @ai-coding-labs/playwright-mcp-plus --project-isolation. Click "Add Extension".
Go to Program in the right sidebar -> Install -> Edit mcp.json. Use the standard config above.
Open Qodo Gen chat panel in VSCode or IntelliJ β Connect more tools β + Add new MCP β Paste the standard config above.
Click Save.
Follow the MCP install guide, use the standard config above. You can also install the Playwright MCP server using the VS Code CLI:
# For VS Code
code --add-mcp '{"name":"playwright-plus","command":"npx","args":["-y","@ai-coding-labs/playwright-mcp-plus@latest","--project-isolation"]}'
After installation, the Playwright MCP server will be available for use with your GitHub Copilot agent in VS Code.
Follow Windsurf MCP documentation. Use the standard config above.
Playwright MCP server supports following arguments. They can be provided in the JSON configuration above, as a part of the "args" list:
> npx @playwright/mcp@latest --help
--allowed-origins <origins> semicolon-separated list of origins to allow the browser to request. Default is to allow all.
--blocked-origins <origins> semicolon-separated list of origins to block the browser from requesting. Blocklist is evaluated before allowlist. If used without the allowlist, requests not matching the blocklist are still allowed.
--block-service-workers block service workers
--browser <browser> browser or chrome channel to use, possible values: chrome, firefox, webkit, msedge.
--caps <caps> comma-separated list of additional capabilities to enable, possible values: vision, pdf.
--cdp-endpoint <endpoint> CDP endpoint to connect to.
--config <path> path to the configuration file.
--device <device> device to emulate, for example: "iPhone 15"
--executable-path <path> path to the browser executable.
--headless run browser in headless mode, headed by default
--host <host> host to bind server to. Default is localhost. Use 0.0.0.0 to bind to all interfaces.
--ignore-https-errors ignore https errors
--isolated keep the browser profile in memory, do not save it to disk.
--image-responses <mode> whether to send image responses to the client. Can be "allow" or "omit", Defaults to "allow".
--no-sandbox disable the sandbox for all process types that are normally sandboxed.
--output-dir <path> path to the directory for output files.
--port <port> port to listen on for SSE transport.
--project-isolation enable project-level session isolation using project path from MCP context.
--project-isolation-session-strategy <strategy> session directory strategy for project isolation: system, project, custom. Defaults to "system". (default: "system")
--project-isolation-session-root-dir <path> custom root directory for session storage when using project isolation (only used with --project-isolation-session-strategy=custom).
--proxy-bypass <bypass> comma-separated domains to bypass proxy, for example ".com,chromium.org,.domain.com"
--proxy-server <proxy> specify proxy server, for example "http://myproxy:3128" or "socks5://myproxy:8080"
--save-session Whether to save the Playwright MCP session into the output directory.
--save-trace Whether to save the Playwright Trace of the session into the output directory.
--storage-state <path> path to the storage state file for isolated sessions.
--user-agent <ua string> specify user agent string
--user-data-dir <path> path to the user data directory. If not specified, a temporary directory will be created.
--viewport-size <size> specify browser viewport size in pixels, for example "1280, 720"
You can run Playwright MCP with persistent profile like a regular browser (default), or in the isolated contexts for the testing sessions.
Persistent profile
All the logged in information will be stored in the persistent profile, you can delete it between sessions if you'd like to clear the offline state.
Persistent profile is located at the following locations and you can override it with the --user-data-dir argument.
# Windows
%USERPROFILE%\AppData\Local\ms-playwright\mcp-{channel}-profile
# macOS
- ~/Library/Caches/ms-playwright/mcp-{channel}-profile
# Linux
- ~/.cache/ms-playwright/mcp-{channel}-profile
Isolated
In the isolated mode, each session is started in the isolated profile. Every time you ask MCP to close the browser,
the session is closed and all the storage state for this session is lost. You can provide initial storage state
to the browser via the config's contextOptions or via the --storage-state argument. Learn more about the storage
state here.
{
"mcpServers": {
"playwright-plus": {
"command": "npx",
"args": [
"@ai-coding-labs/playwright-mcp-plus@latest",
"--isolated",
"--storage-state={path/to/storage.json}"
]
}
}
}
Project Isolation allows each project to maintain its own separate browser session with independent login states, cookies, and localStorage. This prevents cross-project interference while keeping your workspace clean.
Without any isolation flags, sessions are shared between all projects (identical to official Playwright MCP):
{
"mcpServers": {
"playwright-plus": {
"command": "npx",
"args": ["@ai-coding-labs/playwright-mcp-plus@latest"]
}
}
}
Enable project isolation with sessions stored in OS cache directory (invisible to users):
{
"mcpServers": {
"playwright-plus": {
"command": "npx",
"args": [
"@ai-coding-labs/playwright-mcp-plus@latest",
"--project-isolation"
]
}
}
}
Storage locations by OS:
%LOCALAPPDATA%/ms-playwright/mcp-chrome-profile/playwright-plus-mcp/project-hash/~/Library/Caches/ms-playwright/mcp-chrome-profile/playwright-plus-mcp/project-hash/~/.cache/ms-playwright/mcp-chrome-profile/playwright-plus-mcp/project-hash/Store sessions in project directory (creates .user-session-data-directory/):
{
"mcpServers": {
"playwright-plus": {
"command": "npx",
"args": [
"@ai-coding-labs/playwright-mcp-plus@latest",
"--project-isolation",
"--project-isolation-session-strategy=project"
]
}
}
}
Store sessions in a custom location:
{
"mcpServers": {
"playwright-plus": {
"command": "npx",
"args": [
"@ai-coding-labs/playwright-mcp-plus@latest",
"--project-isolation",
"--project-isolation-session-strategy=custom",
"--project-isolation-session-root-dir=/custom/sessions"
]
}
}
}
| Configuration | Session Location | Project Directory | User Visibility | Use Case |
|---|---|---|---|---|
| No isolation (default) | Shared cache | Clean | Hidden | Backward compatibility |
| System (isolation default) | OS cache directory | Clean | Hidden | Best user experience |
| Project | .user-session-data-directory/ | Has session files | Visible | Legacy/debugging |
| Custom | Custom path | Clean | Hidden | Advanced setups |
The Playwright MCP server can be configured using a JSON configuration file. You can specify the configuration file
using the --config command line option:
npx @ai-coding-labs/playwright-mcp-plus@latest --config path/to/config.json
{
// Browser configuration
browser?: {
// Browser type to use (chromium, firefox, or webkit)
browserName?: 'chromium' | 'firefox' | 'webkit';
// Keep the browser profile in memory, do not save it to disk.
isolated?: boolean;
// Path to user data directory for browser profile persistence
userDataDir?: string;
// Browser launch options (see Playwright docs)
// @see https://playwright.dev/docs/api/class-browsertype#browser-type-launch
launchOptions?: {
channel?: string; // Browser channel (e.g. 'chrome')
headless?: boolean; // Run in headless mode
executablePath?: string; // Path to browser executable
// ... other Playwright launch options
};
// Browser context options
// @see https://playwright.dev/docs/api/class-browser#browser-new-context
contextOptions?: {
viewport?: { width: number, height: number };
// ... other Playwright context options
};
// CDP endpoint for connecting to existing browser
cdpEndpoint?: string;
// Remote Playwright server endpoint
remoteEndpoint?: string;
},
// Server configuration
server?: {
port?: number; // Port to listen on
host?: string; // Host to bind to (default: localhost)
},
// List of additional capabilities
capabilities?: Array<
'tabs' | // Tab management
'install' | // Browser installation
'pdf' | // PDF generation
'vision' | // Coordinate-based interactions
>;
// Directory for output files
outputDir?: string;
// Network configuration
network?: {
// List of origins to allow the browser to request. Default is to allow all. Origins matching both `allowedOrigins` and `blockedOrigins` will be blocked.
allowedOrigins?: string[];
// List of origins to block the browser to request. Origins matching both `allowedOrigins` and `blockedOrigins` will be blocked.
blockedOrigins?: string[];
};
/**
* Whether to send image responses to the client. Can be "allow" or "omit".
* Defaults to "allow".
*/
imageResponses?: 'allow' | 'omit';
/**
* Enable project-level session isolation using project path from MCP context.
* When enabled, each project gets its own isolated browser session.
* Defaults to false (shared sessions, compatible with official Playwright MCP).
*/
projectIsolation?: boolean;
/**
* Session directory storage strategy for project isolation.
* Only used when projectIsolation is enabled.
* - 'system': Store in OS cache directory (recommended, user-invisible)
* - 'project': Store in project directory (legacy behavior)
* - 'custom': Store in custom location specified by projectIsolationSessionRootDir
* Defaults to "system".
*/
projectIsolationSessionStrategy?: 'system' | 'project' | 'custom';
/**
* Custom root directory for session storage when using project isolation.
* Only used when projectIsolationSessionStrategy is 'custom'.
* Example: "/custom/session/storage/path"
*/
projectIsolationSessionRootDir?: string;
}
When running headed browser on system w/o display or from worker processes of the IDEs,
run the MCP server from environment with the DISPLAY and pass the --port flag to enable HTTP transport.
npx @ai-coding-labs/playwright-mcp-plus@latest --port 8931
And then in MCP client config, set the url to the HTTP endpoint:
{
"mcpServers": {
"playwright-plus": {
"url": "http://localhost:8931/mcp"
}
}
}
NOTE: The Docker implementation only supports headless chromium at the moment.
{
"mcpServers": {
"playwright-plus": {
"command": "docker",
"args": ["run", "-i", "--rm", "--init", "--pull=always", "mcr.microsoft.com/playwright/mcp"]
}
}
}
You can build the Docker image yourself.
docker build -t mcr.microsoft.com/playwright/mcp .
import http from 'http';
import { createConnection } from '@ai-coding-labs/playwright-mcp-plus';
import { SSEServerTransport } from '@modelcontextprotocol/sdk/server/sse.js';
http.createServer(async (req, res) => {
// ...
// Creates a headless Playwright MCP server with SSE transport
const connection = await createConnection({ browser: { launchOptions: { headless: true } } });
const transport = new SSEServerTransport('/messages', res);
await connection.sever.connect(transport);
// ...
});
element (string): Human-readable element description used to obtain permission to interact with the elementref (string): Exact target element reference from the page snapshotdoubleClick (boolean, optional): Whether to perform a double click instead of a single clickbutton (string, optional): Button to click, defaults to leftprojectDrive (string, optional): Project drive letter or root (e.g., "C:", "/") for session isolationprojectPath (string, optional): Absolute path to project root directory for session isolationstartElement (string): Human-readable source element description used to obtain the permission to interact with the elementstartRef (string): Exact source element reference from the page snapshotendElement (string): Human-readable target element description used to obtain the permission to interact with the elementendRef (string): Exact target element reference from the page snapshotfunction (string): () => { /* code / } or (element) => { / code */ } when element is providedelement (string, optional): Human-readable element description used to obtain permission to interact with the elementref (string, optional): Exact target element reference from the page snapshotextensionId (string, optional): Chrome extension ID (e.g., "cjpalhdlnbpafiamejdnhcphjbkeiagm")extensionUrl (string, optional): Full Chrome Web Store URL of the extensionwaitForInstall (boolean, optional): Whether to wait for installation to completeloadImmediately (boolean, optional): Whether to restart browser to load the extension immediatelyprojectDrive (string, optional): Project drive letter or root (e.g., "C:", "/") for session isolationprojectPath (string, optional): Absolute path to project root directory for session isolationprojectDrive (string, optional): Project drive letter or root (e.g., "C:", "/") for session isolationprojectPath (string, optional): Absolute path to project root directory for session isolationextensionId (string): Chrome extension ID to uninstall (e.g., "bcjindcccaagfpapjjmafapmmgkkhgoa")restartImmediately (boolean, optional): Whether to restart browser immediately after uninstallingprojectDrive (string, optional): Project drive letter or root (e.g., "C:", "/") for session isolationprojectPath (string, optional): Absolute path to project root directory for session isolationpaths (array): The absolute paths to the files to upload. Can be a single file or multiple files.accept (boolean): Whether to accept the dialog.promptText (string, optional): The text of the prompt in case of a prompt dialog.element (string): Human-readable element description used to obtain permission to interact with the elementref (string): Exact target element reference from the page snapshoturl (string): The URL to navigate toprojectDrive (string, optional): Project drive letter or root (e.g., "C:", "/") for session isolationprojectPath (string, optional): Absolute path to project root directory for session isolationkey (string): Name of the key to press or a character to generate, such as ArrowLeft or awidth (number): Width of the browser windowheight (number): Height of the browser windowelement (string): Human-readable element description used to obtain permission to interact with the elementref (string): Exact target element reference from the page snapshotvalues (array): Array of values to select in the dropdown. This can be a single value or multiple values.projectDrive (string, optional): Project drive letter or root (e.g., "C:", "/") for session isolationprojectPath (string, optional): Absolute path to project root directory for session isolationtype (string, optional): Image format for the screenshot. Default is png.filename (string, optional): File name to save the screenshot to. Defaults to page-{timestamp}.{png|jpeg} if not specified.element (string, optional): Human-readable element description used to obtain permission to screenshot the element. If not provided, the screenshot will be taken of viewport. If element is provided, ref must be provided too.ref (string, optional): Exact target element reference from the page snapshot. If not provided, the screenshot will be taken of viewport. If ref is provided, element must be provided too.fullPage (boolean, optional): When true, takes a screenshot of the full scrollable page, instead of the currently visible viewport. Cannot be used with element screenshots.element (string): Human-readable element description used to obtain permission to interact with the elementref (string): Exact target element reference from the page snapshottext (string): Text to type into the elementsubmit (boolean, optional): Whether to submit entered text (press Enter after)slowly (boolean, optional): Whether to type one character at a time. Useful for triggering key handlers in the page. By default entire text is filled in at once.time (number, optional): The time to wait in secondstext (string, optional): The text to wait fortextGone (string, optional): The text to wait for to disappearprojectDrive (string, optional): Project drive letter or root (e.g., "C:", "/") for session isolationprojectPath (string, optional): Absolute path to project root directory for session isolationindex (number, optional): The index of the tab to close. Closes current tab if not provided.projectDrive (string, optional): Project drive letter or root (e.g., "C:", "/") for session isolationprojectPath (string, optional): Absolute path to project root directory for session isolationurl (string, optional): The URL to navigate to in the new tab. If not provided, the new tab will be blank.projectDrive (string, optional): Project drive letter or root (e.g., "C:", "/") for session isolationprojectPath (string, optional): Absolute path to project root directory for session isolationindex (number): The index of the tab to selectprojectDrive (string, optional): Project drive letter or root (e.g., "C:", "/") for session isolationprojectPath (string, optional): Absolute path to project root directory for session isolationelement (string): Human-readable element description used to obtain permission to interact with the elementx (number): X coordinatey (number): Y coordinateelement (string): Human-readable element description used to obtain permission to interact with the elementstartX (number): Start X coordinatestartY (number): Start Y coordinateendX (number): End X coordinateendY (number): End Y coordinateelement (string): Human-readable element description used to obtain permission to interact with the elementx (number): X coordinatey (number): Y coordinatefilename (string, optional): File name to save the pdf to. Defaults to page-{timestamp}.pdf if not specified.FAQs
Enhanced Playwright Tools for MCP with Project Session Isolation
The npm package @ai-coding-labs/playwright-mcp-plus receives a total of 7 weekly downloads. As such, @ai-coding-labs/playwright-mcp-plus popularity was classified as not popular.
We found that @ai-coding-labs/playwright-mcp-plus demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago.Β It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.
Security News
Ruby maintainers from Bundler and rbenv teams are building rv to bring Python uv's speed and unified tooling approach to Ruby development.
Security News
Following last weekβs supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.