backstop样式回归测试

使用backstop进行样式回归测试

//全局安装backstop
npm install backstop -g

//安装完成使用
backstop init

生成backstop.json配置如下

{
  "id": "baidu",//项目的名字
  "viewports": [{
      "label": "iphone6",//测试的手机ipone6
      "width": 375,
      "height": 667
    },
    {
      "label": "tablet",
      "width": 1024,
      "height": 768
    }
  ],
  "onBeforeScript": "puppet/onBefore.js",//项目前的script在那
  "onReadyScript": "puppet/onReady.js",//项目准备的script在哪
  "scenarios": [{
    "label": "BackstopJS Homepage",//首页的截图
    "cookiePath": "backstop_data/engine_scripts/cookies.json",//cookie的json
    "url": "https://garris.github.io/BackstopJS/",//项目地址
    "referenceUrl": "",
    "readyEvent": "",
    "readySelector": "",
    "delay": 0,
    "hideSelectors": [],
    "removeSelectors": [],
    "hoverSelector": "",
    "clickSelector": "",
    "postInteractionWait": 0,
    "selectors": [
      ".class",
      "#id"
    ],
    "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": "./docs/backstop_data/html_report",//html报表
    "ci_report": "backstop_data/ci_report"//ci的报告
  },
  "report": ["browser"],
  "engine": "phantomjs",
  "engineFlags": [],
  "asyncCaptureLimit": 5,
  "asyncCompareLimit": 50,
  "debug": false,
  "debugWindow": false
}

使用 bakstop reference  会生成要匹配的图片文件夹（bitmaps_reference）、以及图片

命名分别是测试名字_测试用例ID_选择器_屏幕尺寸

//使用进行回归测试
backstop test