BackstopJS 教程

BackstopJS 教程

BackstopJSCatch CSS curve balls.项目地址:https://gitcode.com/gh_mirrors/ba/BackstopJS

1. 项目目录结构及介绍

BackstopJS 的典型项目结构如下：

├── backstop.json          # 配置文件
├── fixtures                # HTML fixture 文件夹（可选）
├── reports                  # 报告输出文件夹
├── test                    # 测试用例文件夹
│   └── scenarios.js        # 更复杂的场景定义（可选）
└── test-config              # 额外的测试配置文件夹（可选）

• backstop.json: 该项目的核心配置文件，包含了所有关于测试的设置。
• fixtures: 可选的HTML文件，用于模拟被测网页的内容。
• reports: 存储每次测试后的可视化报告。
• test: 包含了测试场景定义，通常为简单的CSS选择器。
• test-config: 可以存放额外的测试配置。

2. 项目启动文件介绍

BackstopJS 没有特定的启动文件，因为它通过命令行接口（CLI）进行操作。你可以通过全局或局部安装的backstopjs命令来执行不同任务，如初始化、测试和批准变更。

例如：

• 初始化新项目：backstop init
• 运行测试：backstop test
• 批准当前测试结果：backstop approve

这些命令会依据你的backstop.json配置文件进行相应的操作。

3. 项目配置文件介绍

backstop.json

backstop.json是BackstopJS的主配置文件，用于定义测试场景、浏览器行为等。下面是一些基本配置项的说明：

{
  "paths": {
    "bitmaps_reference": "bitmaps_reference",
    "bitmaps_test": "bitmaps_test",
    "engine_scripts": "engine_scripts"
  },
  "asyncCaptureLimit": 5,
  "asyncCompareLimit": 5,
  "viewports": [
    { "name": "phone", "width": 320, "height": 480 },
    { "name": "tablet", "width": 768, "height": 1024 }
  ],
  "scenarios": [
    {
      "label": "Home page",
      "url": "http://localhost:3000/",
      "delay": 1000,
      "selectors": ["#header", ".main-content"]
    }
  ]
}

• paths: 定义截图参考和测试文件的存储路径以及引擎脚本的位置。
• asyncCaptureLimit: 并发捕获屏幕快照的限制。
• asyncCompareLimit: 并发比较屏幕快照的限制。
• viewports: 定义不同的视口尺寸，用于多设备兼容性测试。
• scenarios: 对每个要测试的页面的详细描述，包括URL、延迟时间、选择器等。

更高级的配置，比如使用JavaScript配置文件或自定义交互，可以通过设置backstop.config.js实现，并在运行时使用--config=your_config_file.js参数指定。

有了以上信息，你应该能开始使用BackstopJS进行视觉回归测试了。如果你遇到任何问题或者想要了解更多，可以查阅官方GitHub仓库上的更多文档和示例。

BackstopJSCatch CSS curve balls.项目地址:https://gitcode.com/gh_mirrors/ba/BackstopJS