码迷,mamicode.com
首页 > 其他好文 > 详细

backstop样式回归测试

时间:2018-06-04 22:27:21      阅读:171      评论:0      收藏:0      [点我收藏+]

标签:cli   ons   测试的   home   ios   测试用例   hide   hover   int   

使用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

 

backstop样式回归测试

标签:cli   ons   测试的   home   ios   测试用例   hide   hover   int   

原文地址:https://www.cnblogs.com/139199228-haicao/p/9135737.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!