mcpField
B
browser-testing

browser-testing

github.com/serkan-ozal测试与质量776 次安装34 周前更新
代码仓库

关于 browser-testing

面向网页开发者和测试人员的浏览器测试技能，通过 Browser DevTools CLI 自动执行导航、交互和表单检查。还可捕获页面内容，并模拟或拦截 HTTP 请求。

主要功能

  1. 01浏览器导航与交互
  2. 02填写表单并检查验证
  3. 03捕获截图、HTML、文本和 PDF
  4. 04模拟与拦截 HTTP 响应
  5. 05基于会话进行多步测试

适用场景

  1. 01测试登录和注册流程
  2. 02检查表单验证与向导步骤
  3. 03捕获交互后的页面状态
  4. 04使用模拟 HTTP 响应测试页面

MCP 相关

它使用 Browser DevTools CLI 自动化浏览器测试和交互。输入未说明 MCP 服务或客户端连接。

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/serkan-ozal/browser-devtools-skills --skill browser-testing

安装后在 Claude Code 中输入/browser-testing确认已加载。

详细介绍

浏览器测试技能

使用 Browser DevTools CLI 进行自动化浏览器测试、交互自动化和表单测试。

适用场景

当用户：

  • 要求测试网页或应用程序时
  • 希望自动执行浏览器交互时
  • 需要验证 UI 行为时
  • 希望自动提交表单时
  • 需要测试表单验证时
  • 提到多步表单或向导时
  • 希望测试登录/注册流程时

功能

导航
browser-devtools-cli navigation go-to --url "https://example.com"
browser-devtools-cli navigation go-back-or-forward --direction back
browser-devtools-cli navigation go-back-or-forward --direction forward
browser-devtools-cli navigation reload
交互

所有命令均接受 CSS 选择器或 ARIA 快照中的 ref（e1、@e1）。

browser-devtools-cli interaction click --selector "#button"
browser-devtools-cli interaction click --selector "e1"   # ref from a11y take-aria-snapshot
browser-devtools-cli interaction fill --selector "#input" --value "text"
browser-devtools-cli interaction select --selector "#dropdown" --value "option"
browser-devtools-cli interaction hover --selector "#element"
browser-devtools-cli interaction press-key --key "Enter"
browser-devtools-cli interaction scroll --mode bottom
browser-devtools-cli interaction drag --source-selector "#drag" --target-selector "#drop"
内容捕获
browser-devtools-cli content take-screenshot --name "screenshot"
browser-devtools-cli content get-as-html
browser-devtools-cli content get-as-text
browser-devtools-cli content save-as-pdf --name "page"
同步
browser-devtools-cli sync wait-for-network-idle
模拟与桩
browser-devtools-cli stub mock-http-response --pattern "**/api/**" --response '{"status":200}'
browser-devtools-cli stub intercept-http-request --pattern "**/api/**" --modifications '{"headers":{}}'
browser-devtools-cli stub list
browser-devtools-cli stub clear

基本测试工作流

  1. 导航：前往待测试页面
  2. 等待：确保页面已完全加载
  3. 快照（可选）：运行 a11y take-aria-snapshot，获取用于稳定定位元素的 ref（e1、e2）
  4. 交互：点击、填写、滚动（对 ref 使用 --selector "e1"，也可使用 CSS 选择器）
  5. 验证：检查页面状态并截取屏幕截图
  6. 记录：报告结果

表单自动化模式

填写基本表单
# Fill text input
browser-devtools-cli interaction fill \
  --selector "#email" \
  --value "[email protected]"

# Fill password
browser-devtools-cli interaction fill \
  --selector "#password" \
  --value "SecurePass123"

# Click submit
browser-devtools-cli interaction click \
  --selector "button[type=submit]"
选择下拉选项
browser-devtools-cli interaction select \
  --selector "#country" \
  --value "US"
复选框/单选按钮
# Check checkbox
browser-devtools-cli interaction click \
  --selector "#terms-checkbox"

# Select radio option
browser-devtools-cli interaction click \
  --selector "input[name=plan][value=premium]"
多步向导
SESSION="--session-id wizard-test"

# Step 1: Personal Info
browser-devtools-cli $SESSION interaction fill --selector "#name" --value "John Doe"
browser-devtools-cli $SESSION interaction fill --selector "#email" --value "[email protected]"
browser-devtools-cli $SESSION interaction click --selector "#next-step"

# Wait for step 2
browser-devtools-cli $SESSION sync wait-for-network-idle

# Step 2: Address
browser-devtools-cli $SESSION interaction fill --selector "#address" --value "123 Main St"
browser-devtools-cli $SESSION interaction select --selector "#state" --value "CA"
browser-devtools-cli $SESSION interaction click --selector "#next-step"

# Step 3: Confirm
browser-devtools-cli $SESSION sync wait-for-network-idle
browser-devtools-cli $SESSION interaction click --selector "#submit"

验证测试

测试必填字段
# Submit empty form
browser-devtools-cli interaction click --selector "button[type=submit]"

# Check for error messages
browser-devtools-cli content get-as-text --selector ".error-message"
测试无效输入
# Invalid email
browser-devtools-cli interaction fill --selector "#email" --value "not-an-email"
browser-devtools-cli interaction click --selector "button[type=submit]"

# Check validation error
browser-devtools-cli content get-as-html --selector ".email-error"

基于会话的测试

SESSION="--session-id my-test"

# Navigate
browser-devtools-cli $SESSION navigation go-to --url "https://example.com"

# Interact
browser-devtools-cli $SESSION interaction click --selector ".login-btn"
browser-devtools-cli $SESSION interaction fill --selector "#email" --value "[email protected]"

# Verify
browser-devtools-cli $SESSION content take-screenshot --name "after-login"

# Cleanup
browser-devtools-cli session delete my-test

最佳实践

  1. 多步流程使用会话
  2. 导航和操作后等待网络空闲
  3. 重要操作后截取屏幕截图以便验证
  4. 使用具体的选择器，避免选错元素
  5. 测试验证时先尝试提交空表单
  6. 填写前清空字段（使用会先清空字段的 interaction fill）
  7. 使用等待策略处理动态字段
  8. 出错后截取屏幕截图以供记录
  9. 适时批量执行步骤：对于较长的流程，使用 run execute --code "..." 和 callTool() 可减少往返次数（参见 browser-devtools-cli execute 参考文档）。

评论

支持 Markdown