Browser Testing MCP Server

浏览器测试MCP服务器-Cursor AI指令

安装说明

1. 安装Python依赖项：

pip install mcp playwright python-dotenv
playwright install chromium

1. 保存Python文件 像 browser_testing_mcp.py

1. 使其可执行：

chmod +x browser_testing_mcp.py

1. 在游标中配置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 -验证身份验证Cookie
• get_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"])

调试提示

1. 始终检查控制台日志 在交互后捕获JavaScript错误
2. 监控网络请求 确保API被正确调用
3. 使用屏幕截图 直观地验证UI状态
4. 检查本地存储/Cookie 验证数据持久性
5. 使用wait_for_selector 在与动态加载的内容交互之前
6. 无头运行=False 查看调试过程中发生了什么

错误处理

如果遇到错误：

• “浏览器未启动”-呼叫 launch_browser 第一
• “找不到元素”-检查选择器是否正确，使用 wait_for_selector 第一
• “Timeout”-增加超时值或检查元素是否实际出现
• 网络问题-检查应用程序是否在预期端口上运行

最佳实践

1. 始终关闭浏览器 测试完成后
2. 使用描述性选择器 （ID或数据testid属性）
3. 等待元素 在与他们互动之前
4. 检查成功和错误情况
5. 验证API调用 匹配预期模式
6. 截图 在视觉验证的关键点
7. 检查性能指标 确保应用程序高效加载

此工具允许您彻底测试您创建的任何web应用程序，确保在考虑任务完成之前所有功能都能正常工作。