A MCP server that provides comprehensive website snapshot capabilities using Playwright. This server enables LLMs to capture and analyze web pages through structured accessibility snapshots, network monitoring, and console message collection.
A Model Context Protocol (MCP) server that provides comprehensive website snapshot capabilities using Playwright. This server enables LLMs to capture and analyze web pages through structured accessibility snapshots, network monitoring, and console message collection.
First, install the MCP Web Snapshot server with your client. A typical configuration looks like this:
{
"mcpServers": {
"mcp-web-snapshot": {
"command": "uv",
"args": [
"--directory",
"/path/to/mcp-web-snapshot",
"run",
"python",
"src/server.py"
]
}
}
}
You can install the MCP Web Snapshot server using the VS Code CLI:
# For VS Code
code --add-mcp '{"name":"mcp-web-snapshot","command":"uv","args":["--directory","/path/to/mcp-web-snapshot","run","python","src/server.py"]}'
After installation, the MCP Web Snapshot server will be available for use with your GitHub Copilot agent in VS Code.
Go to Cursor Settings
ā MCP
ā Add new MCP Server
. Name to your liking, use command
type with the command uv
and args ["--directory", "/path/to/mcp-web-snapshot", "run", "python", "src/server.py"]
.
{
"mcpServers": {
"mcp-web-snapshot": {
"command": "uv",
"args": [
"--directory",
"/path/to/mcp-web-snapshot",
"run",
"python",
"src/server.py"
]
}
}
}
git clone https://github.com/your-username/mcp-web-snapshot.git
cd mcp-web-snapshot
uv sync
uv run playwright install
uv run python src/server.py
āāā src/
ā āāā server.py # Main MCP server entry point
ā āāā registry.py # Tool registration logic
ā āāā tools/
ā āāā __init__.py
ā āāā snapshot_url.py # Web snapshot implementation
āāā tests/ # Test suite
ā āāā __init__.py
ā āāā test_snapshot_url.py # Unit tests for website_snapshot
ā āāā README.md # Test documentation
āāā pyproject.toml # Project configuration
āāā pytest.ini # Pytest configuration
āāā uv.lock # Lock file for dependencies
āāā README.md # This file
The project includes a comprehensive test suite using pytest:
# Run all tests
uv run pytest
# Run with verbose output
uv run pytest -v
# Run with coverage report
PYTHONPATH=. uv run pytest --cov=src.tools.snapshot_url --cov-report=term-missing
Test coverage currently stands at 92%, covering:
Tool: website_snapshot
Description: Take comprehensive snapshots of web pages with monitoring capabilities
Parameters:
target_url
(string): The URL to capture (must be a valid URL with protocol)Features:
Example Usage:
# Through MCP client
result = await website_snapshot("https://example.com")
Output Structure:
ā
Captured snapshot with 25 elements, 12 requests, 0 console messages
š Example Website - Home Page
š https://example.com
š Accessibility Snapshot:
- navigation "Main":
- link "Home": [ref=1]
- link "About": [ref=2]
- button "Contact" [ref=3]
- main:
- heading "Welcome to Example"
- link "Get Started": [ref=4]
š Network Requests:
š GET https://example.com
Status: 200
Response: <!DOCTYPE html><html>...
š„ļø Console:
No console messages
šÆ Element References:
[ref=1]: link "Home"
[ref=2]: link "About"
[ref=3]: button "Contact"
[ref=4]: link "Get Started"
The server can be configured through the CONFIG
dictionary in src/tools/snapshot_url.py
:
CONFIG = {
"viewport": {"width": 1920, "height": 1080},
"user_agent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36",
"timeout": 15000, # 15 seconds
}
Capture comprehensive page state for automated test generation:
"Please take a snapshot of https://myapp.com/login and help me create Page Object Model classes based on the discovered elements and structure."
Extract structured data for content analysis and monitoring:
"Take a snapshot of https://competitor.com/pricing and analyze any pricing changes or new features compared to what we discussed last week."
Leverage accessibility tree data for compliance checking:
"Please capture a snapshot of https://myapp.com and identify any accessibility issues or areas for improvement based on WCAG guidelines."
Monitor network activity to understand application behavior:
"Take a snapshot of https://dashboard.example.com after I log in and show me what API calls are being made so I can understand the data flow."
Generate test scenarios based on captured interactions:
"Snapshot https://myapp.com/checkout and help me create comprehensive test cases that cover all the interactive elements and user workflows."
The server includes comprehensive error handling:
git checkout -b feature-name
uv run pytest
PYTHONPATH=. uv run pytest --cov=src.tools.snapshot_url --cov-report=term-missing
uv run ruff check
Please ensure all tests pass and maintain or improve the current test coverage.
This project is licensed under the MIT License - see the LICENSE file for details.
A web search and content extraction tool using the Firecrawl API for advanced web scraping, searching, and content analysis.
Download video and audio from various platforms like YouTube, Facebook, and TikTok using yt-dlp.
A server for browser automation using Playwright, providing powerful tools for web scraping, testing, and automation.
Discover, extract, and interact with the web - one interface powering automated access across the public internet.
Control a browser for web automation tasks using Playwright on Cloudflare Workers.
Extracts and transforms webpage content into clean, LLM-optimized Markdown using the Readability algorithm.
Fetches cigarette data and information from Yanyue.cn.
A server for browser automation using Google Chrome, based on the MCP framework.
Web content fetching and conversion for efficient LLM usage
A browser screenshot tool to capture scrolling screenshots of webpages using Playwright, with support for intelligent section identification and multiple output formats.