backstopjs
什么是backstop
BackstopJS就是一个能够实现css自动化回归测试的工具,BackstopJS是一个基于比较网站快照的变化的回归测试工具,非常适合给项目中的样式做回归测试,可以确保我们在重构网站样式的时候样式不发生变化,而且他支持设置多种浏览器尺寸,可以测试响应式布局。
比较下resemble.js 和phantomCss,backstop算是比较容易上手使用的,方便配置,phantomCss配合casper进行截图回归测试还是挺不错的,但是两张图diff的话不是很稳定,并且慢,目前phantomCss已经不维护了,不再支持最新phantomjs,resemblejs呢,入手困难,文档不容易理解,网络上只有英文文档,国内介绍resemblejs的文章很少.
安装方法:
npm i backstopjs -g
输入
backstop -v //显示版本号标明安装成功
目录介绍
├── backstop_data
│ └── bitmaps_reference //存储样板图的地方
│ └── bitmaps_test //截图存储的地方
│ └── engine_scripts //配置静态服务器,自定义脚本casper/puppet/chromy
│ └──clickAndHoverHelper
│ └──loadCookies
│ └──onBefore
│ └──onReady
│ └──waitForHelperHelper
│ └── html_report //执行test后弹出的html界面
├── backstop.json //backstop的配置文件
配置文件介绍 ----连蒙带猜
{
//测试用例id,用于屏幕截图命名。BackstopJS将自动为您生成一个,以避免命名与BackstopJS资源的冲突。
"id": "backstop_default",
//测试视口,就是配置各种分辨率
"viewports": [{
"label": "phone", // iphone
"width": 320,
"height": 480
},
{
"label": "phone", // iphone
"width": 750,
"height": 960
},
{
"label": "tablet", //平板
"width": 1024,
"height": 768
}
],
//在执行所有脚本前、页面加载后执行的脚本。通过他我们可以执行用express做一个静态服务器 支持casper chromy puppet
"onBeforeScript": "puppet/onBefore.js",
"onReadyScript":