此库会自动比对ui的图和前端做出的页面的差别并标出来
1.安装包
npm install -g backstopjs
2.执行
backstop init
3.打开backstop.json
{
"id": "test", //项目名称
"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",
"cookiePath": "backstop_data/engine_scripts/cookies.json",
"url": "https://garris.github.io/BackstopJS/", //要测试的页面网址
"referenceUrl": "",
"readyEvent": "",
"readySelector": "",
"delay": 0,
"hideSelectors": [],
"removeSelectors": [],
"hoverSelector": "",
"clickSelector": "",
"postInteractionWait": 0,
"selectors": [],
"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": "backstop_data/html_report",
"ci_report": "backstop_data/ci_report"
},
"report": ["browser"],
"engine": "puppeteer",
"engineFlags": [],
"asyncCaptureLimit": 5,
"asyncCompareLimit": 50,
"debug": false,
"debugWindow": false
}
4.执行
会自动打开一个页面backstop test
image.png
这就是比对完项目后的结果页面，并没有完 ，我们注意到图片下面有一行红字，意思是我们在backstop_data下缺少文件夹bitmaps_reference
5.我们在bitmaps_reference下新建文件夹bitmaps_reference，并把ui做的图放进去，这里我们放一个图片
backstop_default_BackstopJS_Homepage_0_document_0_iphone6.png
6.重新执行
弹出页面backstop test
image.png
这里我们做的页面和ui给的的差距就出来了。
