1. 介绍

Backstopjs 是借助一个新的无头浏览器实现的（puppet），用于 UI 自动化还原测试，可以帮助我们将页面与 UI 设计图自动进行对比，标记出差异位置并生成可视化报表。

2. 安装

$ npm i backstopjs
$ yarn add backstopjs -D

3. 初始化

$ backstop init

然后会生成一个文件夹（backstop_data）和一个配置文件（backstop.json）

我们先来看一下配置文件 backstop.json

{
    // 项目的名称
    "id": "backstop_default",
    // 要测试的尺寸
    "viewports": [
        {
        "label": "phone",
        "width": 320,
        "height": 480
        },
        {
        "label": "tablet",
        "width": 1024,
        "height": 768
        }
    ],
    "onBeforeScript": "puppet/onBefore.js",
    "onReadyScript": "puppet/onReady.js",
    // 要测试的项目
    "scenarios": [
        {
            // 页面名称（不能用中文）
            "label": "BackstopJS Homepage",
            // 模拟 cookie 信息
            "cookiePath": "backstop_data/engine_scripts/cookies.json",
            // 项目地址
            "url": "https://garris.github.io/BackstopJS/",
            "referenceUrl": "",
            // 直到控制台打印某字符才截屏
            "readyEvent": "",
            // 等待页面中出现某个元素时才截屏
            "readySelector": "",
            // 延时指定时间后截屏（毫秒），可以和 readyEvent 同时使用
            "delay": 0,
            // 要隐藏的元素（比如广告、通知类的元素）
            "hideSelectors": [],
            // 删除元素
            "removeSelectors": [],
            // 鼠标 hover
            "hoverSelector": "",
            // 鼠标 点击
            "clickSelector": "",
            "postInteractionWait": 0,
            "selectors": [],
            "selectorExpansion": true,
            "expect": 0,
            // 允许的偏差度（百分比0.00％-100.00％）
            "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": "backstop_data/html_report",
        "ci_report": "backstop_data/ci_report"
    },
    "report": ["browser"],
    "engine": "puppeteer",
    "engineOptions": {
        "args": ["--no-sandbox"]
    },
    "asyncCaptureLimit": 5,
    "asyncCompareLimit": 50,
    "debug": false,
    "debugWindow": false
}

详细的配置说明可以参考开头的链接

4. 例子

下面我们拿腾讯地图为例，做一个简单的例子🌰

配置要测试的响应式尺寸及项目地址

"viewports": [
    {
        "label": "phone",
        "width": 375,
        "height": 667
    },
    {
        "label": "tablet",
        "width": 1024,
        "height": 768
    }
],
...
"scenarios": [
    {
        "label": "home",
        // 项目地址
        "url": "https://map.qq.com/m/",
    }
]