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":
今天的文章浅谈如何培养孩子的注意力_js的reverse函数分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/89038.html