浅谈backstop.js

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":