Back to Details

browser-testing

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Browser Testing Skill

浏览器测试技能

Automated browser testing, interaction automation, and form testing using Browser DevTools CLI.
使用Browser DevTools CLI实现自动化浏览器测试、交互自动化及表单测试。

When to Use

适用场景

This skill activates when:
  • User asks to test a web page or application
  • User wants to automate browser interactions
  • User needs to verify UI behavior
  • User wants to automate form submission
  • User needs to test form validation
  • User mentions multi-step forms or wizards
  • User wants to test login/signup flows
当出现以下情况时可激活本技能：
  • 用户要求测试网页或应用程序
  • 用户希望自动化浏览器交互操作
  • 用户需要验证UI行为
  • 用户希望自动化表单提交
  • 用户需要测试表单验证功能
  • 用户提及多步骤表单或向导
  • 用户希望测试登录/注册流程

Capabilities

功能特性

Navigation

导航

bash
browser-devtools-cli navigation go-to --url "https://example.com"
browser-devtools-cli navigation go-back
browser-devtools-cli navigation go-forward
browser-devtools-cli navigation reload
bash
browser-devtools-cli navigation go-to --url "https://example.com"
browser-devtools-cli navigation go-back
browser-devtools-cli navigation go-forward
browser-devtools-cli navigation reload

Interaction

交互操作

bash
browser-devtools-cli interaction click --selector "#button"
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"
bash
browser-devtools-cli interaction click --selector "#button"
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"

Content Capture

内容捕获

bash
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"
bash
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"

Synchronization

同步操作

bash
browser-devtools-cli sync wait-for-network-idle
bash
browser-devtools-cli sync wait-for-network-idle

Mocking & Stubbing

模拟与存根

bash
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 --all
bash
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 --all

Code Execution

代码执行

bash
browser-devtools-cli run js-in-browser --script "document.title"
browser-devtools-cli run js-in-sandbox --code "return await page.title()"
bash
browser-devtools-cli run js-in-browser --script "document.title"
browser-devtools-cli run js-in-sandbox --code "return await page.title()"

Basic Testing Workflow

基础测试流程

  1. Navigate: Go to the page under test
  2. Wait: Ensure page is fully loaded
  3. Interact: Click, fill, scroll as needed
  4. Verify: Check page state, take screenshots
  5. Document: Report results
  1. 导航：前往待测试页面
  2. 等待：确保页面完全加载
  3. 交互：根据需要点击、填写、滚动等
  4. 验证：检查页面状态，截取屏幕截图
  5. 记录：报告测试结果

Form Automation Patterns

表单自动化模式

Basic Form Fill

基础表单填写

bash
undefined
bash
undefined

Fill text input

填写文本输入框

browser-devtools-cli interaction fill
--selector "#email"
--value "test@example.com"
browser-devtools-cli interaction fill
--selector "#email"
--value "test@example.com"

Fill password

填写密码

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

Click submit

点击提交按钮

browser-devtools-cli interaction click
--selector "button[type=submit]"
undefined
browser-devtools-cli interaction click
--selector "button[type=submit]"
undefined

Select Dropdown

选择下拉菜单

bash
browser-devtools-cli interaction select \
  --selector "#country" \
  --value "US"
bash
browser-devtools-cli interaction select \
  --selector "#country" \
  --value "US"

Checkbox/Radio

复选框/单选框

bash
undefined
bash
undefined

Check checkbox

勾选复选框

browser-devtools-cli interaction click
--selector "#terms-checkbox"
browser-devtools-cli interaction click
--selector "#terms-checkbox"

Select radio option

选择单选选项

browser-devtools-cli interaction click
--selector "input[name=plan][value=premium]"
undefined
browser-devtools-cli interaction click
--selector "input[name=plan][value=premium]"
undefined

Multi-Step Wizard

多步骤向导

bash
SESSION="--session-id wizard-test"
bash
SESSION="--session-id wizard-test"

Step 1: Personal Info

步骤1：个人信息

browser-devtools-cli $SESSION interaction fill --selector "#name" --value "John Doe" browser-devtools-cli $SESSION interaction fill --selector "#email" --value "john@example.com" browser-devtools-cli $SESSION interaction click --selector "#next-step"
browser-devtools-cli $SESSION interaction fill --selector "#name" --value "John Doe" browser-devtools-cli $SESSION interaction fill --selector "#email" --value "john@example.com" browser-devtools-cli $SESSION interaction click --selector "#next-step"

Wait for step 2

等待步骤2加载

browser-devtools-cli $SESSION sync wait-for-network-idle
browser-devtools-cli $SESSION sync wait-for-network-idle

Step 2: Address

步骤2：地址信息

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"
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

步骤3：确认提交

browser-devtools-cli $SESSION sync wait-for-network-idle browser-devtools-cli $SESSION interaction click --selector "#submit"
undefined
browser-devtools-cli $SESSION sync wait-for-network-idle browser-devtools-cli $SESSION interaction click --selector "#submit"
undefined

Validation Testing

验证测试

Test Required Fields

测试必填字段

bash
undefined
bash
undefined

Submit empty form

提交空表单

browser-devtools-cli interaction click --selector "button[type=submit]"
browser-devtools-cli interaction click --selector "button[type=submit]"

Check for error messages

检查错误提示信息

browser-devtools-cli content get-as-text --selector ".error-message"
undefined
browser-devtools-cli content get-as-text --selector ".error-message"
undefined

Test Invalid Input

测试无效输入

bash
undefined
bash
undefined

Invalid email

输入无效邮箱

browser-devtools-cli interaction fill --selector "#email" --value "not-an-email" browser-devtools-cli interaction click --selector "button[type=submit]"
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"
undefined
browser-devtools-cli content get-as-html --selector ".email-error"
undefined

Session-Based Testing

基于会话的测试

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

Navigate

导航

browser-devtools-cli $SESSION navigation go-to --url "https://example.com"
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 "test@example.com"
browser-devtools-cli $SESSION interaction click --selector ".login-btn" browser-devtools-cli $SESSION interaction fill --selector "#email" --value "test@example.com"

Verify

验证

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

Cleanup

清理

browser-devtools-cli session delete my-test
undefined
browser-devtools-cli session delete my-test
undefined

Best Practices

最佳实践

  1. Use sessions for multi-step flows
  2. Wait for network idle after navigation and actions
  3. Take screenshots after important actions for verification
  4. Use specific selectors to avoid wrong elements
  5. Test empty submission first for validation testing
  6. Clear fields before filling (use 
    interaction fill
    which clears first)
  7. Handle dynamic fields with wait strategies
  8. Screenshot after errors for documentation
  1. 使用会话处理多步骤流程
  2. 等待网络空闲在导航和操作之后
  3. 截取屏幕截图在重要操作之后用于验证
  4. 使用特定选择器避免选中错误元素
  5. 先测试空提交用于验证测试
  6. 填写前清空字段（使用
    interaction fill
    命令，该命令会先清空字段）
  7. 使用等待策略处理动态字段
  8. 错误发生后截图用于记录文档