backstop样式回归测试

Posted 139199228-haicao

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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

 

以上是关于backstop样式回归测试的主要内容,如果未能解决你的问题,请参考以下文章

回归 | js实用代码片段的封装与总结(持续更新中...)

回归测试是什么?(基线版本基线测试包代码相依性回归测试包软件操作剖面)

Gamma阶段第二次Scrum Meeting

软件测试之回归测试

什么是软件回归测试,如何进行回归测试,进行回归测试时有哪些常用的方法?

关于自动化测试的一些认识