Open fayeah opened 5 years ago
在项目非常稳定的时候,我们前端会引入Visual Regression Test,那么使用的工具是BackstopJS。我现在的项目是因为刚刚引入了Bootstrap,为了检查是否对以前的样式有影响,在spike分支上引入了BackstopJS来做对比。基本上是按照github的readme来做的,但是也遇到了一些问题,这里做一个总结。
引入BackstopJS依赖 npm install -g backstopjs;
npm install -g backstopjs
使用命令backstop init生成配置文件'backstop.json';
backstop init
注释掉@import "bootstrap";, 使用backstop test生成一个test image,由于是第一次生成,reference是空的,所以此时需要run backstop approve将我们生成的test image作为reference;
@import "bootstrap";
backstop test
backstop approve
解注释@import "bootstrap";,再次run backstop test进行对比,会自动打开结果页面,进行对比。
先说生成的文件'backstop.json',这里是我们需要根据自己实际情况来进行一些修改的。我比较关注的参数有:
'viewports',默认会生成一个mobile和一个tablet的参数,而我们需要的是desktop的参数,根据实际情况改一下就可以了;
'url',是我们要测试的网页,还有一个'referenceUrl',没有试过,应该是在CI的时候进行一个对比,我个人认为'referenceUrl'可能是QA环境, 'url'是DEV环境,就明显知道那里的UI被break了;
'readySelector',是指我们希望哪一个选择器渲染出来才进行image的生成;
'delay',与'readySelector'功能有异曲同工之效,delay多少ms才进行image的生成,也是希望能完全渲染出来才生成;
'removeSelectors',我们不希望对比哪一个元素,或者我们不关注哪一个元素,最终生成的image是不包含这些元素的;
其他的参数有待后面慢慢挖掘,最终我们还是决定remove掉bootstrap,因为每一个页面都被影响到了,所以应该在最开始的时候引入会比较好。也是汪大师推荐我们使用bootstrap来进行UI的开发,非常的快捷方便。
example:
{ "id": "backstop_default", "viewports": [ { "label": "desktop", "width": 2880, "height": 1800 } ], "onBeforeScript": "puppet/onBefore.js", "onReadyScript": "puppet/onReady.js", "scenarios": [ { "label": "BackstopJS Homepage", "cookiePath": "backstop_data/engine_scripts/cookies.json", "referenceUrl": "", "url": "https://localhost:4200/home", "readyEvent": "", "readySelector": ".disappear", "delay": 0, "hideSelectors": [], "removeSelectors": [".loading"], "hoverSelector": [], "clickSelector": "", "postInteractionWait": 0, "selectors": [], "selectorExpansion": true, "expect": 0, "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 }
Key Words: Visual Regression Test, BackstopJS.
在项目非常稳定的时候,我们前端会引入Visual Regression Test,那么使用的工具是BackstopJS。我现在的项目是因为刚刚引入了Bootstrap,为了检查是否对以前的样式有影响,在spike分支上引入了BackstopJS来做对比。基本上是按照github的readme来做的,但是也遇到了一些问题,这里做一个总结。
引入BackstopJS依赖
npm install -g backstopjs
;使用命令
backstop init
生成配置文件'backstop.json';注释掉
@import "bootstrap";
, 使用backstop test
生成一个test image,由于是第一次生成,reference是空的,所以此时需要runbackstop approve
将我们生成的test image作为reference;解注释
@import "bootstrap";
,再次runbackstop test
进行对比,会自动打开结果页面,进行对比。先说生成的文件'backstop.json',这里是我们需要根据自己实际情况来进行一些修改的。我比较关注的参数有:
'viewports',默认会生成一个mobile和一个tablet的参数,而我们需要的是desktop的参数,根据实际情况改一下就可以了;
'url',是我们要测试的网页,还有一个'referenceUrl',没有试过,应该是在CI的时候进行一个对比,我个人认为'referenceUrl'可能是QA环境, 'url'是DEV环境,就明显知道那里的UI被break了;
'readySelector',是指我们希望哪一个选择器渲染出来才进行image的生成;
'delay',与'readySelector'功能有异曲同工之效,delay多少ms才进行image的生成,也是希望能完全渲染出来才生成;
'removeSelectors',我们不希望对比哪一个元素,或者我们不关注哪一个元素,最终生成的image是不包含这些元素的;
其他的参数有待后面慢慢挖掘,最终我们还是决定remove掉bootstrap,因为每一个页面都被影响到了,所以应该在最开始的时候引入会比较好。也是汪大师推荐我们使用bootstrap来进行UI的开发,非常的快捷方便。
example: