Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@Playwright MCP ServerGo to news.ycombinator.com and extract the text of the top story."
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Playwright MCP Server
A production-ready Model Context Protocol (MCP) server that provides browser automation capabilities using Playwright. Built with the mcp-use framework for enhanced developer experience with built-in Inspector UI and comprehensive error handling.
Overview
This MCP server exposes 6 powerful browser automation tools that allow AI assistants like Claude to interact with web pages, extract information, and perform automated testing. All operations are performed in a managed Chromium browser instance with robust error handling and timeout management.
Key Features:
π Playwright Integration - Full async Playwright API support
π Built-in Inspector UI - Test tools interactively at
http://localhost:8000/inspectorπ‘ Auto-discovery - OpenMCP metadata endpoint at
/openmcp.jsonπ‘οΈ Robust Error Handling - Clear, actionable error messages with suggestions
π Crash Recovery - Automatic browser restart on failures
βοΈ Highly Configurable - All timeouts and settings via environment variables
π Debug Mode - Enhanced logging and
/docsendpoint
Features
6 Browser Automation Tools
navigate - Navigate to URLs with configurable wait conditions
click_element - Click elements by CSS selector
fill_input - Fill form inputs with text
extract_text - Extract text content from elements
screenshot - Take viewport or full-page screenshots
get_page_info - Get current page URL, title, and viewport size
All tools return standardized responses with either success data or detailed error information.
Installation
Prerequisites
Python 3.13 or higher
pip (Python package manager)
Setup
Clone or download this repository
Create a virtual environment
Activate the virtual environment
Windows:
macOS/Linux:
Install dependencies
Install Playwright browsers
Configure environment variables
Edit .env to customize settings (optional - defaults work out of the box).
Quick Start
Running the Server
You should see output like:
Accessing the Inspector UI
What to do:
Copy the Inspector URL:
http://localhost:8000/inspectorPaste it into your web browser (Chrome, Firefox, Edge, Safari, etc.)
The Inspector UI will open where you can test all tools
Note: If you see 0.0.0.0 in any URL, replace it with localhost in your browser.
The Inspector UI allows you to:
See all available tools and their parameters
Test tools interactively with a web form
View real-time responses and errors
Explore the OpenMCP metadata
How to use the Inspector:
You'll see a list of 6 tools (navigate, click_element, fill_input, etc.)
Click on a tool to see its description and parameters
Fill in the parameters (example: url = "https://example.com")
Click "Execute" to run the tool
View the results in the response panel
Testing with the Manual Test Script
This runs a complete integration test suite covering all tools.
Usage Examples
Tool 1: Navigate
Navigate to a URL and wait for page load:
Navigate with custom wait condition:
Wait conditions:
"load"- Wait for the load event (default)"domcontentloaded"- Wait for DOMContentLoaded event"networkidle"- Wait until network is idle (no requests for 500ms)
Tool 2: Click Element
Click an element by CSS selector:
Tool 3: Fill Input
Fill a form input with text:
Tool 4: Extract Text
Extract text content from an element:
Tool 5: Screenshot
Take a viewport screenshot:
Take a full-page screenshot:
Supported formats: .png, .jpg, .jpeg
Tool 6: Get Page Info
Get current page information:
Configuration Reference
All configuration is done via environment variables in the .env file:
Server Configuration
Variable | Description | Default |
| Enable debug mode with enhanced logging |
|
| Server host address |
|
| Server port |
|
Browser Configuration
Variable | Description | Default |
| Run browser in headless mode |
|
| Browser launch timeout (ms) |
|
| Browser viewport width |
|
| Browser viewport height |
|
Operation Timeouts
Variable | Description | Default |
| Page navigation timeout (ms) |
|
| Element interaction timeout (ms) |
|
| Screenshot capture timeout (ms) |
|
Screenshot Configuration
Variable | Description | Default |
| Directory for screenshots |
|
Error Handling
All tools return standardized error responses with actionable suggestions:
Error Types
ValidationError - Invalid inputs (bad URL, empty parameters, wrong types)
ElementNotFound - Selector not found or element not visible/clickable
TimeoutError - Operation exceeded timeout
NetworkError - DNS failures, connection refused, SSL errors
FileSystemError - File write permission errors
InvalidElementState - Element is disabled or read-only
UnknownError - Unexpected errors with details
Common Issues and Solutions
Browser fails to launch
Error: Failed to launch browser
Solution:
Ensure Playwright browsers are installed:
playwright install chromiumCheck that you have sufficient permissions
Try running with
HEADLESS=falsein.envto see browser window
Element not found
Error: Element not found with given selector
Solution:
Verify the CSS selector is correct
Check if element is inside an iframe (not currently supported)
Increase
ELEMENT_TIMEOUTif page loads slowlyUse browser dev tools to test your selector
Navigation timeout
Error: Navigation timed out after 30000ms
Solution:
Increase
NAVIGATION_TIMEOUTin.envCheck your internet connection
Verify the URL is accessible
Try using
wait_until="domcontentloaded"instead of"load"
Screenshot permission denied
Error: Permission denied
Solution:
Check write permissions for the target directory
Ensure parent directories exist (created automatically by the tool)
Verify you have disk space available
Development
Project Structure
Running Tests
Unit tests (requires pytest):
Integration tests:
Code Quality
This project follows best practices:
β Type hints on all functions
β Comprehensive docstrings
β Async/await throughout
β Singleton pattern for browser management
β Standardized error responses
β Configuration via environment variables
β Graceful shutdown handling
Architecture
BrowserManager (Singleton):
Manages browser lifecycle
Lazy initialization (browser starts on first use)
Async lock prevents race conditions
Automatic crash recovery
Graceful cleanup on shutdown
MCP Server:
Built with
mcp-useframework6 tools decorated with
@server.tool()Streamable HTTP transport for Inspector UI
Signal handlers for graceful shutdown
Comprehensive error parsing
Integration with Claude Desktop
To use this server with Claude Desktop, add to your Claude config:
Windows: %APPDATA%\Claude\claude_desktop_config.json
macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Note: For production use with Claude Desktop, modify server.py to use transport="stdio" instead of transport="streamable-http".
Contributing
Contributions are welcome! Please:
Fork the repository
Create a feature branch
Add tests for new functionality
Ensure all tests pass
Submit a pull request
License
MIT License - feel free to use this in your own projects.
Support
For issues and questions:
Check the Troubleshooting section above
Review the test files for usage examples
Open an issue on GitHub
Acknowledgments
Built with:
Playwright - Browser automation framework
mcp-use - Enhanced MCP server framework
Model Context Protocol - Protocol specification
π Citation
@software{mcp_use2025, author = {Zullo, Pietro and Contributors}, title = {MCP-Use: Complete MCP Ecosystem for Python and TypeScript}, year = {2025}, publisher = {GitHub}, url = {https://github.com/mcp-use/mcp-use}
}
Version: 1.0.0 Author: Built with Claude Code Last Updated: 2026-01-30