聊一聊UI回归测试 ｜ BackstopJs

$ npm install -g backstopjs

$ mkdir backstop-article && cd backstop-article

$ backstop init

 |- backstop_data // 数据文件
   ｜- engine_scripts // 核心配置文件
      |- puppet
        |- clickAndHoverHelper.js // 一些脚本流程操作，如：click、hover、interaction等等
        |- ignoreCSP.js // 屏蔽CSP安全策略（下方有详解）
        |- interceptImages.js // 拦截图片地址，更换图片图片执行文件。配置不在此处
        |- loadCookies.js // 加载cookie执行文件。
        |- onBefore.js // 页面加载之前执行的脚本
        |- onReady.js // 页面加载之后执行的脚本
        |- overrideCSS.js // 样式覆盖执行文件
     ｜- cookies.json // cookie配置文件
     ｜- imageStub.jpg // 图片替换的占位图
   ｜- backstop.json // backstopJs配置文件

<meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'; style-src cdn.example.org third-party.org; child-src https:">

$ backstop test

compare | Reference image not found backstop_default_BackstopJS_Homepage_0__0_phone.png
compare | Reference image not found backstop_default_BackstopJS_Homepage_0__1_tablet.png

$ backstop approve

{ 
  // ... 
  fileNameTemplate：'{scenarioIndex}_{scenarioLabel}_{selectorIndex}_{selectorLabel}_{viewportIndex}_{viewportLabel}' ，
  // ... 
}

{
  "id": "backstop_default", // 测试用例id，用于屏幕截图命名。BackstopJS将自动为您生成一个，以避免命名与BackstopJS资源的冲突。
  "viewports": [ // 将测试您的DOM的一系列屏幕尺寸对象。根据需要添加任意数量-但至少添加一个
    {
      "label": "phone", // 手机尺寸小
      "width": 320,
      "height": 480
    },
    {
      "label": "tablet", // 平板
      "width": 1024,
      "height": 768
    }
  ],
  "onBeforeScript": "puppet/onBefore.js", // 在执行脚本前的脚本
  "onReadyScript": "puppet/onReady.js", // 在执行脚本后的脚本
  "scenarios": [ // 测试用例
    {
      "label": "BackstopJS Homepage", // 测试名称
      "cookiePath": "backstop_data/engine_scripts/cookies.json", // 设置cookies 对于需要设置cookie的网址可通过此配置文件配置cookie
      "url": "https://garris.github.io/BackstopJS/", // 必需的。告诉BackstopJS您要测试的端点/文档。这可以是绝对URL，也可以是您当前工作目录的本地URL
      "referenceUrl": "", // 创建引用时指定不同的状态或环境。
      "readyEvent": "", //预定义的字符串记录到控制台来触发屏幕捕获。---实现异步交互
      "readySelector": "", // 等到此选择器存在后再继续 ---实现异步交互
      "delay": 0, // 延迟
      "hideSelectors": [], // 设置为visibility的选择器数组：hidden
      "removeSelectors": [], // 设置为display的选择器数组：none
      "hoverSelector": "", // 在截屏之前，将指针移到指定的DOM元素上
      "keyPressSelectors": "", // 接受选择器和字符串值数组-模拟多个顺序按键交互。
      "clickSelector": "", // 在屏幕截图之前单击指定的DOM元素。
      "clickSelectors": "", // *仅限Puppeteer *获取selctors数组 - 模拟多个顺序点击交互。
      "postInteractionWait": 0, // 在与hoverSelector或clickSelector交互后等待选择器（可选择接受以ms为单位的等待时间。想法用于单击或悬停元素转换。默认使用onReadyScript）
      "selectors": [], // 选择需要截图的选择器
      "selectorExpansion": true, // 定位元素
      "expect": 0, // 跟选择器配合使用,说期望找到的选择器的数量跟配置的数量是否匹配,不匹配的话表示测试失败
      "misMatchThreshold": 0.1, // 允许通过测试的不同像素的百分比
      "requireSameDimensions": true // 测试必须与参考尺寸相同
    }
  ],
  "paths": {
    "bitmaps_reference": "backstop_data/bitmaps_reference", // 存储样板图
    "bitmaps_test": "backstop_data/bitmaps_test", // 截图输出路径
    "engine_scripts": "backstop_data/engine_scripts", // js配置路径
    "html_report": "backstop_data/html_report", // 显示对比图的html
    "ci_report": "backstop_data/ci_report"
  },
  "report": [ //报告的形式，支持命令行和浏览器两种
    "browser"
  ],
  "engine": "casper", // 配置引擎属性,slimerjs(Gecko / Mozilla,需要安装),casper,chromy(webkit)
  "engineOptions": { // 配置引擎属性的默认值
    "casperFlags": [
      "--engine=slimerjs",
      "--proxy-type=http",
      "--proxy=proxyIp:port",
      "--proxy-auth=user:pass"
    ]
  },
  "asyncCaptureLimit": 5, // 一次能捕获5个屏幕
  "asyncCompareLimit": 50, // 配置测试期间所需的RAM量
  "debug": false, // 是否打印测试日志
  "debugWindow": false,
  "resembleOutputOptions": { // 比较差异输出图片的配置
    "errorColor": {
      "red": 255,
      "green": 0,
      "blue": 255
    },
    "errorType": "movement",
    "transparency": 0.3,
    "ignoreAntialiasing": true
  }
}

backstop test --config=<configFilePathStr>

module.exports = { Same object as backstop.json }