【框架/库】初识BackstopJS

Key Words: Visual Regression Test, BackstopJS.

在项目非常稳定的时候，我们前端会引入Visual Regression Test，那么使用的工具是BackstopJS。我现在的项目是因为刚刚引入了Bootstrap，为了检查是否对以前的样式有影响，在spike分支上引入了BackstopJS来做对比。基本上是按照github的readme来做的，但是也遇到了一些问题，这里做一个总结。

引入BackstopJS依赖 npm install -g backstopjs；
使用命令backstop init生成配置文件'backstop.json'；
注释掉@import "bootstrap";，使用backstop test生成一个test image，由于是第一次生成，reference是空的，所以此时需要run backstop approve将我们生成的test image作为reference；
解注释@import "bootstrap";，再次run backstop test进行对比，会自动打开结果页面，进行对比。

先说生成的文件'backstop.json'，这里是我们需要根据自己实际情况来进行一些修改的。我比较关注的参数有：

'viewports'，默认会生成一个mobile和一个tablet的参数，而我们需要的是desktop的参数，根据实际情况改一下就可以了；
'url'，是我们要测试的网页，还有一个'referenceUrl'，没有试过，应该是在CI的时候进行一个对比，我个人认为'referenceUrl'可能是QA环境， 'url'是DEV环境，就明显知道那里的UI被break了；
'readySelector'，是指我们希望哪一个选择器渲染出来才进行image的生成；
'delay'，与'readySelector'功能有异曲同工之效，delay多少ms才进行image的生成，也是希望能完全渲染出来才生成；
'removeSelectors'，我们不希望对比哪一个元素，或者我们不关注哪一个元素，最终生成的image是不包含这些元素的；

其他的参数有待后面慢慢挖掘，最终我们还是决定remove掉bootstrap，因为每一个页面都被影响到了，所以应该在最开始的时候引入会比较好。也是汪大师推荐我们使用bootstrap来进行UI的开发，非常的快捷方便。

example：

{
  "id": "backstop_default",
  "viewports": [
    {
      "label": "desktop",
      "width": 2880,
      "height": 1800
    }
  ],
  "onBeforeScript": "puppet/onBefore.js",
  "onReadyScript": "puppet/onReady.js",
  "scenarios": [
    {
      "label": "BackstopJS Homepage",
      "cookiePath": "backstop_data/engine_scripts/cookies.json",
      "referenceUrl": "",
      "url": "https://localhost:4200/home",
      "readyEvent": "",
      "readySelector": ".disappear",
      "delay": 0,
      "hideSelectors": [],
      "removeSelectors": [".loading"],
      "hoverSelector": [],
      "clickSelector": "",
      "postInteractionWait": 0,
      "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",
    "html_report": "backstop_data/html_report",
    "ci_report": "backstop_data/ci_report"
  },
  "report": ["browser"],
  "engine": "puppeteer",
  "engineOptions": {
    "args": ["--no-sandbox"]
  },
  "asyncCaptureLimit": 5,
  "asyncCompareLimit": 50,
  "debug": false,
  "debugWindow": false
}

fayeah / blogs

【框架/库】初识BackstopJS #1

Key Words: Visual Regression Test, BackstopJS.