UI自动化测试工具：backstopjs

  此库会自动比对ui的图和前端做出的页面的差别并标出来
1.安装包

npm install -g backstopjs

2.执行

backstop init

3.打开backstop.json

{
  "id": "test",    //项目名称
  "viewports": [      //生成的截图的格式，可以写多个，至少为一个
    {
      "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",
      "url": "https://garris.github.io/BackstopJS/",    //要测试的页面网址
      "referenceUrl": "",
      "readyEvent": "",
      "readySelector": "",
      "delay": 0,
      "hideSelectors": [],
      "removeSelectors": [],
      "hoverSelector": "",
      "clickSelector": "",
      "postInteractionWait": 0,
      "selectors": [],
      "selectorExpansion": true,
      "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",
  "engineFlags": [],
  "asyncCaptureLimit": 5,
  "asyncCompareLimit": 50,
  "debug": false,
  "debugWindow": false
}

4.执行

backstop test

会自动打开一个页面 image.png

这就是比对完项目后的结果页面，并没有完 ，我们注意到图片下面有一行红字，意思是我们在backstop_data下缺少文件夹bitmaps_reference

5.我们在bitmaps_reference下新建文件夹bitmaps_reference，并把ui做的图放进去，这里我们放一个图片 backstop_default_BackstopJS_Homepage_0_document_0_iphone6.png

6.重新执行

backstop test

弹出页面 image.png

这里我们做的页面和ui给的的差距就出来了。