vibetesting - 浏览器自动化测试技能

一个面向 OpenClaw 的综合性浏览器自动化测试技能，可执行功能、UI、无障碍访问、性能和视觉回归测试。

概述

此技能使 OpenClaw 能够启动浏览器并对 Web 应用程序执行全面的测试。它支持多种测试类型并提供详细报告。

核心能力

🧪 测试类型

1. 功能测试

   • 表单验证
   • 按钮交互
   • 链接导航
   • API 交互
   • 数据输入与验证

2. UI 测试

   • 元素可见性
   • 响应式设计检查
   • 布局验证
   • 颜色对比度检查
   • 排版验证

3. 无障碍访问测试

   • WCAG 2.1 合规性检查
   • ARIA 标签验证
   • 键盘导航
   • 屏幕阅读器兼容性
   • 替代文本验证

4. 性能测试

   • 页面加载时间
   • 资源计时
   • Lighthouse 指标
   • 核心 Web 指标 (LCP, FID, CLS)
   • JavaScript 执行时间

5. 视觉回归测试

   • 截图对比
   • 布局偏移检测
   • 视觉差异生成
   • 基于阈值的验证

6. 安全测试

   • HTTPS 验证
   • 内容安全策略检查
   • XSS 漏洞扫描
   • 表单安全验证

7. 端到端测试

   • 用户旅程测试
   • 结账流程验证
   • 身份验证流程
   • 多步骤表单测试

使用方法

基础测试

[VibeTesting]
目标 URL: https://example.com
测试类型: functional

综合测试

[VibeTesting]
目标 URL: https://myapp.com
测试类型: comprehensive
包含: functional, accessibility, performance
报告格式: html

指定测试类型

[VibeTesting]
目标 URL: https://example.com
测试类型: accessibility
WCAG 等级: AA

参数说明

测试类型详解

quick

快速冒烟测试 (5-10 秒)
* 基本页面加载
* 主要元素存在性
* 无 JavaScript 错误

functional

完整功能测试 (30-60 秒)
* 表单测试
* 按钮交互
* 导航流程
* API 验证

comprehensive

完整测试套件 (2-5 分钟)
* 所有功能测试
* 无障碍访问审计
* 性能指标
* 视觉回归
* 安全检查

accessibility

专项无障碍访问测试 (1-2 分钟)
* WCAG 合规性
* ARIA 标签
* 键盘导航
* 屏幕阅读器文本

performance

性能专项测试 (30-60 秒)
* 页面加载时间
* 核心 Web 指标
* 资源计时
* Lighthouse 评分

visual

视觉回归测试 (1-2 分钟)
* 全页面截图
* 布局对比
* 视觉差异生成

security

安全专项测试 (30-60 秒)
* HTTPS 检查
* CSP 验证
* 基础漏洞扫描

e2e

端到端用户旅程测试 (时间可变)
* 多步骤流程
* 身份验证
* 结账流程
* 用户场景

使用示例

测试简单页面

[VibeTesting]
target_url: https://example.com
testing_type: quick

运行完整无障碍访问审计

[VibeTesting]
target_url: https://myapp.com
testing_type: accessibility
wcag_level: AA
report_format: detailed

自定义视口的性能测试

[VibeTesting]
target_url: https://myapp.com
testing_type: performance
viewport: 390x844
performance_threshold: 2000
headless: true

视觉回归测试

[VibeTesting]
target_url: https://myapp.com
testing_type: visual
screenshot_baseline: baseline.png
visual_threshold: 0.05

端到端结账流程测试

[VibeTesting]
target_url: https://myshop.com
testing_type: e2e
steps:
  - add_item_to_cart
  - proceed_to_checkout
  - fill_shipping
  - fill_payment
  - complete_order
auth:
  user: test@example.com
  pass: testpass123

针对特定元素的自定义测试

[VibeTesting]
target_url: https://myapp.com
testing_type: functional
elements:
  validate:
    - selector: "#login-form"
      fields: ["email", "password"]
    - selector: "#submit-btn"
      action: click
  expect:
    - selector: ".success-message"
      visible: true

输出结果

控制台输出

实时测试进度和结果

HTML 报告

详细的交互式报告，包含：
* 测试摘要
* 通过/失败明细
* 性能指标
* 无障碍访问评分
* 视觉差异（如适用）
* 截图
* 改进建议

JSON 导出

机器可读的结果，便于 CI/CD 集成

集成方案

CI/CD 流水线

- name: 浏览器测试
  uses: openclaw/vibetesting
  with:
    target_url: https://staging.example.com
    testing_type: comprehensive
    report_format: json

GitHub Actions

- name: VibeTesting
  run: |
    npx vibetesting \
      --url ${{ env.URL }} \
      --type comprehensive \
      --output results/

最佳实践

1. 测试环境

   • 使用预发布/开发环境 URL 进行测试
   • 未经许可避免测试生产环境
   • 必要时设置测试账户

2. 性能

   • 在 CI/CD 中使用无头模式
   • 设置合适的超时时间
   • 不要对目标服务器造成过大负载

3. 安全

   • 切勿提交凭据
   • 使用环境变量
   • 验证 SSL 证书

4. 视觉测试

   • 建立基准截图
   • 设计变更后更新基准
   • 设置合适的阈值

5. 无障碍访问

   • 使用真实的屏幕阅读器测试
   • 检查键盘导航
   • 验证颜色对比度比例

故障排除

浏览器无法启动

• 确保已安装 Chrome/Chromium
• 检查端口可用性
• 确认无冲突进程

元素未找到

• 检查页面是否完全加载
• 验证选择器是否正确
• 等待动态内容加载

超时错误

• 增加超时设置
• 检查网络连接
• 确认服务器响应性

内存问题

• 在无头模式下运行
• 关闭其他浏览器实例
• 增加系统资源

系统要求

• 浏览器：Chrome/Chromium（推荐）
• OpenClaw：运行并支持浏览器的网关
• 网络：访问外部 URL 的互联网连接
• 权限：无需特殊系统权限

高级配置

自定义视口

viewports:
  desktop: 1920x1080
  tablet: 768x1024
  mobile: 390x844

等待策略

wait:
  network: idle  # 等待网络空闲
  dom: stable   # 等待 DOM 稳定
  selector: "#loaded"  # 等待特定元素
  timeout: 30

重试配置

retry:
  attempts: 3
  delay: 1000  # 毫秒
  selectors:
    - ".loading-spinner"
    - "#async-content"

报告内容

报告章节

1. 执行摘要

   • 总体评分
   • 测试统计
   • 关键问题

2. 功能测试结果

   • 测试用例
   • 通过/失败详情
   • 错误信息

3. 无障碍访问报告

   • WCAG 合规性
   • 按严重程度分类的问题
   • 改进建议

4. 性能指标

   • 加载时间细分
   • 核心 Web 指标
   • Lighthouse 评分

5. 视觉对比

   • 基准 vs 当前
   • 视觉差异高亮
   • 变更检测

6. 安全发现

   • 漏洞
   • 改进建议
   • 风险等级

已知限制

• 无法测试支付处理（需要真实凭据）
• 仅限于可见内容（无法绕过身份验证屏障）
• 视觉测试依赖于渲染一致性
• 性能指标在不同运行间可能有所差异

未来增强计划

• [ ] 多浏览器支持 (Firefox, Safari)
• [ ] 云浏览器集成 (BrowserStack, Sauce Labs)
• [ ] AI 驱动的测试生成
• [ ] 自定义测试脚本 (JavaScript/Python)
• [ ] 测试录制器（记录交互）
• [ ] 与测试框架集成 (Playwright, Cypress)
• [ ] 并行测试执行
• [ ] 跨节点分布式测试

支持

• 问题反馈：报告错误和功能请求
• 文档：参见 OpenClaw 文档
• 示例：查看示例目录

版本信息

• 当前版本：1.0.0
• 最后更新：2026-02-05
• 作者：OpenClaw 社区

测试愉快！ 🧪🔍✨