志佳先生说话了一个自动化的家伙,backstopjs,可以自动的对比UI出之觊觎跟前者写好之图,不相同的地方会标明,挺好用之,但是写的过程遭到也会赶上一些题材,现在描绘出来,记录转

率先,要优先安装backstop,

<pre style=”font-family: “Microsoft YaHei”; padding: 5px; max-width:
680px !important; background-color: rgb(246, 246, 246); border: 1px
dotted rgb(170, 170, 170); white-space: pre-wrap; word-wrap:
break-word;”>npm install -g backstopjs</pre>

装着然后,在适合的位置新建文件夹,执行

<pre style=”font-family: “Microsoft YaHei”; padding: 5px; max-width:
680px !important; background-color: rgb(246, 246, 246); border: 1px
dotted rgb(170, 170, 170); white-space: pre-wrap; word-wrap:
break-word;”> backstop init</pre>

初始化之后

技巧分享图片

点开backstop_data文件夹

艺分享图片

打开package.json

<pre style=”font-family: “Microsoft YaHei”; padding: 5px; max-width:
680px !important; background-color: rgb(246, 246, 246); border: 1px
dotted rgb(170, 170, 170); white-space: pre-wrap; word-wrap:
break-word;”>{ “id”: “backstop_default”, “viewports”: [ //viewports
为浮动的截图的格式,可以描绘多只,至少为一个
{ “label”: “phone”, //手机 “width”: 320, “height”: 480 },
{ “label”: “tablet”, //平板 “width”: 1024, “height”: 768 }
], “onBeforeScript”: “chromy/onBefore.js”, “onReadyScript”:
“chromy/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”: “”, “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”: “chrome”, “engineFlags”: [],
“asyncCaptureLimit”: 5, “asyncCompareLimit”: 50, “debug”: false,
“debugWindow”: false }</pre>

现咱们盖百度地图的为条例,即把 scenarios的url 改也
https://map.baidu.com/mobile/webapp/index/index/

把导出ipone的格式为根基,将富改呢375 高改吧667

此时,执行backstop test

会晤活动打开一个页面

技术分享图片

啊测试网址的无绳电话机与机械的截图

此时的backstop_data文件夹为

艺分享图片

接下来再次实行 backstop approve
,此时见面将正生成的图样作为标准,然后我们更将网址改也
https://map.baidu.com/mobile/webapp/index/index/qt=cur&wd=%E4%B8%8A%E6%B5%B7%E5%B8%82&from=maponline&tn=m01&ie=utf-8=utf-8/tab=line

重新实行backstop test ,经过实践下会将个别独页面的不同标注出来

技巧分享图片

艺分享图片

此时之结果虽是对待之后的结果,就足以以比的例外进行转移。

此时的backstop_data 的里来多出bitmaps_reference

术分享图片

小结:在实行backstop approve的时,也足以实施backstop reference
,是将目前获的图片作为参照,

也可拿温馨定义bitmaps_reference的图样,即于定义参照图片,就是,把UI的觊觎,直接在立其中,但是发生少数得留意的凡,图片的命名需要准守backstop的起名规则,即好,把test之后转的图片名直接复制命名就实施

还有即使是,我最初就导师敲的时刻,就是无能为力生成手机端的相片,

艺分享图片

自身以翻资料,发现有人拿label写成name

本人又往返测试了产,竟然就是哼了,无论是label还是name都是可的

现就算是对待网页了

自身现形容的独自是无比基本的用法,在github上有那个详尽的用法,需要之时光,可以去github上查看。

相关文章

网站地图xml地图