Labsco
gustavo-meilus logo

Website Snapshot

★ 6

from gustavo-meilus

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.

🔥🔥🔥✓ VerifiedFreeQuick setup
#automation#social-media#scraping#browser#git#monitoring

MCP Web Snapshot

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.

Key Features

  • 🚀 Fast and lightweight: Uses Playwright's accessibility tree for efficient snapshots
  • 🎯 LLM-optimized: Structured data output designed specifically for AI consumption
  • 📊 Comprehensive monitoring: Captures network requests, responses, and console messages
  • 🔍 Element references: Adds unique identifiers to interactive elements for precise targeting
  • 🛡️ Production-ready: Built-in error handling, resource limits, and timeout management
  • ✅ Well-tested: Comprehensive test suite with code coverage

Available Tools

Website Snapshot

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:

  • 🎭 Accessibility Snapshot: Captures the complete accessibility tree structure
  • 🌐 Network Monitoring: Records all network requests and responses during page load
  • 🖥️ Console Messages: Captures client-side console output (logs, warnings, errors)
  • 🎯 Element References: Adds unique reference IDs to interactive elements
  • 📊 Performance Metrics: Provides summary of captured elements and network activity

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"

Use Cases

LLM-Guided Testing

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."

Web Content Analysis

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."

Accessibility Auditing

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."

API Integration Analysis

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."

Cross-Browser Testing Setup

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."

Error Handling

The server includes comprehensive error handling:

  • Invalid URLs: Returns helpful error messages for malformed URLs
  • Network Timeouts: Configurable timeout limits with graceful fallbacks
  • Browser Crashes: Automatic cleanup and resource management
  • Content Limits: Smart filtering of large response bodies to prevent memory issues

Contributing

  1. Fork the repository
  2. Create a feature branch: git checkout -b feature-name
  3. Make your changes and add tests
  4. Run tests: uv run pytest
  5. Check test coverage: PYTHONPATH=. uv run pytest --cov=src.tools.snapshot_url --cov-report=term-missing
  6. Ensure code style compliance: uv run ruff check
  7. Submit a pull request

Please ensure all tests pass and maintain or improve the current test coverage.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

Related Projects