⚡

BackstopJS视觉回归测试技能Skill BackstopJSVisualTesting

BackstopJS 视觉回归测试技能是一个用于自动化视觉对比的专家级工具。它支持自托管环境，无需依赖外部服务，能够配置测试场景、管理参考图像、执行视觉差异分析、处理页面交互并生成详细报告。核心功能包括网页截图对比、UI 变更检测、多视口测试和 CI/CD 集成。关键词：视觉回归测试，UI 测试自动化，网页截图对比，BackstopJS，前端测试，视觉差异检测，自托管测试。

测试 0 次安装 0 次浏览 更新于 2/25/2026

name: BackstopJS 视觉测试 description: BackstopJS 视觉回归测试，用于自托管的视觉对比 allowed-tools:

  • Bash
  • Read
  • Write
  • Edit
  • Glob
  • Grep

BackstopJS 视觉测试技能

概述

此技能提供基于 BackstopJS 的视觉回归测试专家级能力，无需外部依赖即可实现自托管的视觉对比。

能力

场景配置

  • 配置 BackstopJS 场景
  • 定义视口配置
  • 设置用于捕获的选择器
  • 配置特定场景设置

参考管理

  • 执行参考运行
  • 更新参考图像
  • 处理参考版本控制

视觉对比

  • 针对参考执行测试运行
  • 分析视觉差异报告
  • 配置差异阈值

交互处理

  • 配置点击和悬停交互
  • 处理滚动位置
  • 实现等待条件
  • 在捕获前执行自定义脚本

报告生成

  • 生成 HTML 对比报告
  • CI 友好的报告格式
  • 历史追踪

引擎配置

  • 配置 Puppeteer 引擎设置
  • Chrome 启动选项
  • 网络请求处理

目标流程

  • visual-regression.js - 视觉回归测试
  • e2e-test-suite.js - 包含视觉验证的端到端测试

依赖项

  • backstopjs - 视觉回归工具
  • Puppeteer (已捆绑)
  • Docker (可选，用于一致的渲染)

使用示例

{
  kind: 'skill',
  skill: {
    name: 'backstopjs-visual',
    context: {
      action: 'test',
      configPath: 'backstop.json',
      scenarios: ['homepage', 'dashboard'],
      viewports: ['phone', 'tablet', 'desktop']
    }
  }
}

配置

该技能使用 backstop.json 进行配置，并支持基于 Docker 的执行以获得一致的结果。