Enhanced Web Scraper MCP Server

增强型网络爬虫MCP服务器

一个专业的模型上下文协议（MCP）服务器，用于使用Playwright进行web抓取、React应用程序测试和React Native web应用程序检查。 完全向后兼容 使用常规网站和标准React应用程序。

🚀 最新改进

• 🔥 上下文优化的屏幕截图 -截图只返回文件路径和分析文本（没有base64数据）
• 📊 增强的页面分析 -详细的元素计数、内容结构分析和页面状态检查
• 🔍 综合比较工具 -具有布局、颜色和排版检测的视觉相似性分析
• 💾 基于文件的输出 -所有截图保存到 /tmp/ 具有结构化分析数据
• 🎯 智能内容检测 -自动检测空状态、加载指示器和内容可用性
• 增强的错误处理 -全面的输入验证和错误报告
• 优化性能 -减少代码重复，提高效率
• 标准化超时 -可配置的超时常数，以提高可靠性
• 专业代码结构 -ES6+最佳实践和可维护架构

🔄 向后兼容

此增强型服务器维护 100%兼容性 与：

• ✅ 常规网站 （HTML、CSS、JavaScript）
• ✅ 标准React应用程序 （创建React应用程序、Next.js等）
• ✅ 传统网络抓取 工作流
• ✅ 现有CSS选择器 以及互动

此外，还新增了对以下功能的增强支持：

• 🆕 React原生web应用程序
• 🆕 世博会网络项目
• 🆕 移动视口仿真
• 🆕 高级React组件检查

📋 工具概述

AI视觉分析的关键特征

🔥 上下文无关设计

• 无Base64数据：屏幕截图仅返回文件路径和分析文本
• 最小化上下文使用：大幅减少每张截图的代币消耗
• 基于文件的存储：所有图像保存到 /tmp/ 用于外部访问
• 结构化分析：无大量图像数据的富文本分析

🔍 智能内容检测

• 空状态检测：自动识别页面何时没有有意义的内容
• 表人口验证：统计表行数以验证数据是否实际显示
• 加载状态识别：检测并等待加载指示器消失
• 内容结构分析：提供页面元素的详细细分

📁 基于文件的输出

每个可视化工具都提供：

1. 📊 分析文本：元素计数、文本内容、结构分析
2. 📁 文件路径：已保存截图位置以供外部查看
3. 🎯 通过/失败状态：自动化工作流程的内置成功标准

🎯 迁移和测试支持

非常适合：

• UI迁移验证：比较源实现与目标实现
• 模拟数据验证：验证模拟数据是否实际显示
• 视觉回归测试：确保UI更改不会破坏布局
• 组件测试：验证React组件是否正确呈现

📊 成功指标集成

• 可配置的相似性阈值：用于视觉比较的内置通过/失败标准
• 填充数据要求：检测阻止有意义比较的空状态
• 综合报告：调试视觉差异的详细分析

可用工具

1. take_screenshot -无上下文截图

通过全面分析捕获屏幕截图，同时尽量减少上下文使用。

{
  url: "https://example.com",
  browser: "chromium",
  device: "iPhone 12", // Optional device emulation
  fullPage: true,
  waitForSPA: true // Auto-detects and waits for React/Vue/Angular apps
}

退货：

• 📊 综合分析：元素计数、页面结构、内容预览
• 📁 文件路径：屏幕截图保存到 /tmp/screenshot-[timestamp].png
• 🎯 内容状态：填充数据的通过/失败指示器

输出示例：

📸 Screenshot saved to: /tmp/screenshot-1234567890.png

📄 Page Analysis:
- Title: "My React App"
- Has Content: ✅
- Visible Elements: 247

📊 Content Elements:
- Headings: 3
- Paragraphs: 12
- Buttons: 8
- Tables: 1
- Table Rows: 15  ← Indicates populated data!

📝 Page Content Preview:
Welcome to our service platform. Here you can find contractors...

2. compare_screenshots -无上下文视觉比较

在保持最小上下文使用的同时，对两个页面进行全面分析比较。

{
  urlA: "https://source-design.com", // Source/reference
  urlB: "https://your-implementation.com", // Target/implementation
  browser: "chromium",
  threshold: 0.1, // Similarity threshold (0-1)
  analyzeLayout: true, // Detect alignment differences
  analyzeColors: true, // Exact color comparison
  analyzeTypography: true, // Font size/weight analysis
  waitForSPA: true // Smart SPA detection
}

退货：

• 📊 视觉相似性得分：与通过/失败状态的匹配百分比
• 🏗️ 结构比较：元素计数、表行、内容结构
• 🎨 布局分析：对齐差异、定位问题
• 📁 文件路径：两个屏幕截图都保存到 /tmp/ 用于外部查看

输出示例：

📸 Screenshots saved:
- Source: /tmp/compare-source-1234567890.png
- Target: /tmp/compare-target-1234567891.png

📊 VISUAL SIMILARITY: 87.3% ✅ PASS

🏗️ Structural Comparison:
- Tables: 1 → 1
- Table Rows: 0 → 8  ← Target has populated data!
- Buttons: 12 → 12

📋 Layout Analysis:
- 2 regions with significant layout differences
- Content appears centered in source but left-aligned in target

🎨 Color Analysis:
- Minor color differences detected
- Example: rgb(229, 122, 68) → rgb(225, 118, 64)

3. scrape_page -通用Web剪贴

适用于 任何网站 -常规HTML、React应用程序或React Native web。

常规网站示例：

{
  url: "https://example.com",
  selector: ".article-title", // Standard CSS selector
  screenshot: true
}

React Native web示例：

{
  url: "http://localhost:8081",
  selector: "login-button", // Will try testID, aria-label fallbacks
  mobileViewport: true,
  device: "iPhone 12"
}

4. test_react_app -通用反应测试

适用于 任何React应用程序 -标准React或React Native web。

标准React应用程序示例：

{
  url: "http://localhost:3000",
  waitForHydration: false, // Optional for regular React apps
  actions: [
    { type: "click", selector: "#submit-button" },
    { type: "fill", selector: "input[name='email']", value: "test@example.com" }
  ]
}

React Native web示例：

{
  url: "http://localhost:8081",
  device: "iPhone 12",
  waitForHydration: true, // Recommended for RN web
  actions: [
    { type: "tap", selector: "login-button" },
    { type: "swipe", selector: "scroll-view", value: "up" }
  ]
}

5. get_page_info -增强的页面分析

为任何具有React特定见解的网页提供全面的信息。

{
  url: "https://any-website.com", // Works with any URL
  includePerformance: true
}

6. extract_content -清洁内容提取

从没有HTML/CSS混乱的网页中提取干净、可读的内容。非常适合文档、文章和结构化内容消费。

{
  url: "https://docs.example.com/api-guide",
  includeLinks: true,    // Extract and categorize hyperlinks
  format: "markdown"     // Output format: 'markdown' or 'text'
}

输出示例：

# API Documentation

## Authentication
You need to obtain an API key [1] from the developer portal [2].

### Rate Limits
See the rate limiting guide [3] for details.

---
## Links Found:
[1] https://example.com/api-keys (internal)
[2] https://developer.example.com (external) 
[3] https://example.com/docs/rate-limits (internal)

特征：

• 清洁结构 -保留标题、段落、列表、代码块
• 链接提取 -将链接分类为内部、外部、锚定或下载
• 内容过滤 -自动删除导航、广告和侧边栏
• 多种格式 -Markdown或纯文本输出

7. wait_for_element -智能元件等待

具有自动选择策略的智能元件等待回退。

{
  url: "https://example.com",
  selector: ".loading-spinner", // CSS selector with RN fallbacks
  timeout: 10000
}

React Native Web专用工具

8. inspect_react_app -反应组件分析

对React应用程序的深入检查（最适合React Native web）。

9. wait_for_react_state -React状态管理

等待React特定的条件，如水合作用、导航、数据加载。

10. execute_in_react_context -JavaScript执行

在React上下文中执行JavaScript以进行高级检查。

11. check_expo_dev_server -世博会开发工具

检查Expo/Metro捆绑器状态以了解开发工作流程。

选择策略优先级

服务器使用智能选择器策略：

1. 主要的，重要的：直接CSS选择器（例如。， #button, .class, input[name='email'])
2. 回退1：TestID属性([data-testid="button"])
3. 回退2：无障碍标签([aria-label="Button"])
4. 回退3：无障碍标签([accessibilityLabel="Button"])

这确保了 常规CSS选择器正常工作 同时提供React Native web兼容性。

使用示例

无上下文视觉验证

// Verify data is actually displaying without burning context
{
  url: "http://localhost:3000/data-table",
  fullPage: true,
  waitForSPA: true
}
// Returns: File path + "Table Rows: 8" ← Confirms data is populated!

无上下文迁移比较

// Compare source vs target implementation efficiently
{
  urlA: "http://localhost:3001/page", // Source
  urlB: "http://localhost:3000/page", // Target
  threshold: 0.05, // High similarity requirement
  analyzeLayout: true,
  analyzeColors: true
}
// Returns: File paths + "VISUAL SIMILARITY: 96.2% ✅ PASS"

定期网站抓取

// Works exactly like before
{
  url: "https://news.ycombinator.com",
  selector: ".storylink",
  screenshot: false
}

标准React应用程序测试

// Standard React app (Create React App, Next.js, etc.)
{
  url: "http://localhost:3000",
  actions: [
    { type: "click", selector: "button.login" },
    { type: "fill", selector: "#username", value: "testuser" }
  ]
}

React原生Web应用程序测试

// React Native web with enhanced features
{
  url: "http://localhost:8081",
  device: "iPhone 12",
  waitForHydration: true,
  actions: [
    { type: "tap", selector: "login-button" }, // Uses testID
    { type: "swipe", selector: "scroll-view", value: "up" }
  ]
}

清洁内容提取

// Extract clean content from documentation
{
  url: "https://docs.react.dev/learn",
  includeLinks: true,
  format: "markdown"
}

安装

npm install
npx playwright install

使用Amazon Q Developer

# Take a context-free screenshot and analyze content
q chat "Take a screenshot of localhost:3000/data-page and analyze the content"

# Compare pages efficiently without context bloat
q chat "Compare the page between localhost:3001 and localhost:3000"

# Mock data verification with minimal context usage
q chat "Verify that the data table is populated at localhost:3000"

# Works with any website
q chat "Scrape the headlines from https://news.ycombinator.com"

# Works with React apps
q chat "Test the login flow on my React app at localhost:3000"

# Enhanced React Native web support
q chat "Inspect the React Native web app at localhost:8081"

# Extract clean content for reading
q chat "Extract the main content from https://docs.react.dev/learn"

上下文无关设计的好处

🔥 大幅减少上下文使用

• 之前：每个屏幕截图50-200KB base64数据
• 之后：仅文本分析（每张截图约1-2KB）
• 结果：上下文消耗减少50-100倍

📁 基于文件的工作流

• 屏幕截图保存到 /tmp/ 带有时间戳
• 外部工具可以直接访问图像
• 图像数据不会造成上下文污染
• 结构化分析数据仍在讨论中

🎯 更好的AI工作流程

• 每个对话可能有更多截图
• 专注于分析而非数据传输
• 更清晰的对话历史
• 更快的响应时间

故障排除

错误处理

• 输入验证 -服务器验证所需参数并提供明确的错误消息
• 超时配置 -默认超时已优化，但可以根据请求进行调整
• 浏览器清理 -自动资源清理可防止内存泄漏

常规网站

• 使用标准CSS选择器(.class, #id, tag[attribute])
• 集 mobileViewport: false （默认）用于桌面网站
• 集 waitForHydration: false （默认）适用于非React网站

React应用程序

• 集 waitForHydration: true 为了提高可靠性
• 尽可能使用语义选择器
• 检查浏览器控制台是否存在React错误

React原生Web

• 使用 testID 组件中的属性
• 启用 mobileViewport 或指定 device
• 集 waitForHydration: true
• 使用 inspect_react_app 查看可用元素

许可证

麻省理工学院

______________________________________________________________________

12. duckduckgo_search -Web搜索集成

搜索DuckDuckGo并提取带有标题和片段的结果链接，以进行进一步的内容提取。

参数

• query （必填）：搜索查询字符串
• maxResults （可选）：返回的最大结果数（1-10，默认值：5）

示例用法

# Search for React documentation
q chat "Search DuckDuckGo for 'React hooks documentation'"

# Get more results
q chat "Search DuckDuckGo for 'Node.js best practices' with maxResults=8"

# Combine with content extraction
q chat "Search for 'AWS Lambda tutorials' then extract content from the top 2 results"

用例

• 研究：查找用于内容提取的相关URL
• 文档发现：查找官方文档和教程
• 内容管道：搜索→ 提取→ 分析工作流程
• 发展研究：查找代码示例和解决方案

与其他工具集成

非常适合与 extract_content:

1. 使用 duckduckgo_search 查找相关URL
2. 使用 extract_content 在顶部结果
3. 获取任何主题的全面信息

为什么选择DuckDuckGo？

• 无机器人检测：在自动请求方面比谷歌更宽松
• 免费&无限：不需要API密钥或速率限制
• 注重隐私：不跟踪用户或请求
• 可靠的结果：发展主题的高质量搜索结果

备注：此工具仅提取公共搜索结果（完全合法）。DuckDuckGo比谷歌对自动化更友好，在没有反机器人措施的情况下提供可靠的结果。