🧪 网络测试仪MCP
🇫🇷 法语 | 🇬🇧 英语
一个MCP（模型上下文协议）服务器，允许Claude像人类一样测试网站：点击、填写表单、截图和分析性能。
🎯 这是什么？
WebTester是Claude（人工智能）和Playwright（浏览器自动化）之间的桥梁。这允许Claude浏览任何网站并进行自动测试。
批发 ：你问克劳德“去测试这个网站”，他真的是在一个真正的浏览器中！
✨ 他能做什么
- 🖼️ 截图 -完整屏幕截图或特定元素
- 🖱️ 集装箱运输用计算机连接信息 -点击任何按钮/链接
- 📝 形式 -自动填写字段（文本、选择、复选框等）
- ⏱️ 等待 -等待条件（可见/隐藏元素、导航、超时）
- 📄 提取HTML -获取完整的HTML或特定元素
- 🔧 JS执行 -在浏览器中运行自定义JavaScript
- 🐛 控制台 -查看所有JavaScript错误
- 🌐 网络 -分析所有HTTP请求（速度、错误、大小）
- ⚡ 演出 -测量FCP、TTI、加载时间
- 🧹 会话 -清理Cookie、缓存和本地存储
🚀 安装
先决条件
- Node.js>=18
- npm
快速设置
# 1. Clone le projet
cd /path/to/Website_tester
# 2. Installe les dépendances
npm install
# 3. Installe le navigateur Chromium
npm run install-browsers
# 4. Compile le code
npm run build⚙️ 配置
对于Claude代码（CLI）
claude mcp add --scope user --transport stdio webtester -- node /path/to/Website_tester/dist/index.js检查是否已安装：
claude mcp list对于Claude Desktop
将其添加到 ~/Library/Application Support/Claude/claude_desktop_config.json :
{
"mcpServers": {
"webtester": {
"command": "node",
"args": ["/path/to/Website_tester/dist/index.js"]
}
}
}🎮 用户评论
示例1：简单测试
Utilise webtester pour :
1. Aller sur https://example.com
2. Prendre un screenshot
3. Me dire s'il y a des erreurs JavaScript示例2：测试表单
Teste le formulaire de contact sur https://monsite.com :
1. Remplis le champ "nom" avec "Test"
2. Remplis "email" avec "test@example.com"
3. Clique sur le bouton "Envoyer"
4. Prends un screenshot avant et après示例3：分析性能
Analyse les perfs de https://monsite.com :
- Temps de chargement
- Requêtes lentes (> 1 seconde)
- Erreurs réseau
- Core Web Vitals🛠️ 可用工具（共12个）
| 输出 | 描述 |
|---|---|
navigate 转到URL | |
screenshot | 截图 |
click | 点击一个项目 |
fill_form 填写表格 | |
get_page_info | 页面信息（标题、URL、元） |
wait_for | ⭐ 新 -参与une状态（选择器、导航、超时、网络空闲） |
get_html | ⭐ 新 -提取HTML（完整页面、内部HTML、外部HTML） |
execute_js | ⭐ 新 -在浏览器上下文中执行JavaScript |
get_console | 获取控制台日志 |
get_network | 列出网络请求 |
get_performance | 测量性能 |
clear_session | Nettoie cookies/缓存/日志 |
📁 项目结构
Website_tester/
├── src/ # Code source TypeScript
├── dist/ # Code compilé (prêt à l'emploi)
├── screenshots/ # Screenshots sauvegardés ici
├── CLAUDE.md # Doc technique détaillée
└── package.json # Config npm🔧 有用的命令
# Rebuild après modifications
npm run build
# Mode dev (auto-reload)
npm run dev
# Lister les serveurs MCP
claude mcp list
# Supprimer le serveur
claude mcp remove webtester -s user🐛 常见问题
服务器未启动
# Vérifie que le build est OK
npm run build
# Réinstalle les navigateurs
npm run install-browsers屏幕截图无法保存
# Crée le dossier manuellement
mkdir -p screenshots
chmod 755 screenshots克劳德看不到服务器
# Vérifie la config
claude mcp list
# Redémarre Claude Desktop (si tu l'utilises)🤝 贡献
这个项目简单而开放。如果你想改进一些东西：
- 分叉回购
- 创建您的分支
- 做你的修改
- 发送PR
📄 许可证
麻省理工学院-用它做你想做的，它是开源的！
💡 实际使用示例
- 测试正在开发的站点（本地主机）
- 检查表单是否有效
- 检测生产中的JS错误
- 优化前/优化后的性能测量
- 自动化非回归测试
🙏 致谢
- 剧作家 用于浏览器自动化
- Anthropic 对于MCP协议
- 莫纳米迪亚 为了发展
______________________________________________________________________
用制造❤️ 使每个人都可以访问Web测试