浏览器测试MCP服务器-Cursor AI指令
安装说明
- 安装Python依赖项：
pip install mcp playwright python-dotenv
playwright install chromium- 保存Python文件 像
browser_testing_mcp.py
- 使其可执行：
chmod +x browser_testing_mcp.py- 在游标中配置MCP：
添加到MCP配置文件中：
{
"mcpServers": {
"browser-testing": {
"command": "python",
"args": ["/full/path/to/browser_testing_mcp.py"]
}
}
}______________________________________________________________________
Cursor AI使用说明
您可以访问浏览器测试MCP服务器，该服务器允许您控制真实的浏览器来测试web应用程序。这对于验证您创建的web应用程序是否正常运行特别有用。
可用工具
您可以使用这些工具与浏览器进行交互：
浏览器管理
launch_browser-启动浏览器实例（将headless设置为false即可查看）close_browser-完成后关闭浏览器navigate_to-转到任何URL
交互
click_element-通过CSS选择器单击任何元素type_text-在输入字段中键入fill_form-一次填写多个表单字段evaluate_javascript-执行自定义JavaScript
监控与调试
get_console_logs-查看JavaScript错误和控制台输出get_network_requests-监控API调用和响应get_page_metrics-检查性能指标take_screenshot-捕捉视觉状态
验证
wait_for_selector-等待元素出现check_element_state-验证元素状态（可见、启用等）get_local_storage-检查存储的数据get_cookies-验证身份验证Cookieget_page_content-获取HTML内容
测试工作流程示例
测试您创建的web应用程序时，请遵循以下模式：
# 1. Launch browser in visible mode to see what's happening
launch_browser(headless=False, viewport_width=1280, viewport_height=720)
# 2. Navigate to the app
navigate_to(url="http://localhost:3000", wait_until="networkidle")
# 3. Test user registration/login
fill_form(fields=[
{"selector": "#email", "value": "test@example.com", "field_type": "text"},
{"selector": "#password", "value": "SecurePass123", "field_type": "text"},
{"selector": "#agree", "value": "true", "field_type": "checkbox"}
])
click_element(selector="#submit-button")
# 4. Wait for success
wait_for_selector(selector=".dashboard", state="visible", timeout=5000)
# 5. Check for errors
get_console_logs(log_type="error") # Check for JavaScript errors
# 6. Verify API calls worked
get_network_requests(method="POST", url_pattern="/api/auth")
# 7. Check authentication state
get_local_storage(key="authToken")
get_cookies(name="session")
# 8. Test navigation
click_element(selector="a[href='/profile']")
wait_for_selector(selector=".profile-page")
# 9. Verify content loaded
check_element_state(selector=".user-data", checks=["visible", "enabled"])
# 10. Take screenshot for visual verification
take_screenshot(full_page=True)
# 11. Get performance metrics
get_page_metrics()
# 12. Close when done
close_browser()常见测试场景
测试表格验证
# Try submitting empty form
click_element(selector="#submit")
wait_for_selector(selector=".error-message")
get_page_content(selector=".error-message")测试API错误处理
# Check how app handles API failures
navigate_to(url="http://localhost:3000/users")
get_network_requests(url_pattern="/api/users")
# Check if error state is displayed properly
check_element_state(selector=".error-banner", checks=["visible"])测试身份验证流程
# Test login -> dashboard -> logout
fill_form(fields=[
{"selector": "#username", "value": "testuser"},
{"selector": "#password", "value": "password123"}
])
click_element(selector="#login-btn")
wait_for_selector(selector=".dashboard")
get_local_storage(key="auth_token") # Verify token stored
click_element(selector="#logout")
wait_for_selector(selector=".login-page")
get_local_storage(key="auth_token") # Verify token cleared测试响应式设计
# Test mobile view
launch_browser(headless=False, viewport_width=375, viewport_height=667)
navigate_to(url="http://localhost:3000")
check_element_state(selector=".mobile-menu", checks=["visible"])
check_element_state(selector=".desktop-menu", checks=["hidden"])调试提示
- 始终检查控制台日志 在交互后捕获JavaScript错误
- 监控网络请求 确保API被正确调用
- 使用屏幕截图 直观地验证UI状态
- 检查本地存储/Cookie 验证数据持久性
- 使用wait_for_selector 在与动态加载的内容交互之前
- 无头运行=False 查看调试过程中发生了什么
错误处理
如果遇到错误：
- “浏览器未启动”-呼叫
launch_browser第一 - “找不到元素”-检查选择器是否正确，使用
wait_for_selector第一 - “Timeout”-增加超时值或检查元素是否实际出现
- 网络问题-检查应用程序是否在预期端口上运行
最佳实践
- 始终关闭浏览器 测试完成后
- 使用描述性选择器 （ID或数据testid属性）
- 等待元素 在与他们互动之前
- 检查成功和错误情况
- 验证API调用 匹配预期模式
- 截图 在视觉验证的关键点
- 检查性能指标 确保应用程序高效加载
此工具允许您彻底测试您创建的任何web应用程序，确保在考虑任务完成之前所有功能都能正常工作。