Web UI回归测试 -- BackstopJS 入门

BackstopJS是一个测试工具，用于测试ui图和实际项目是否偏差。

话不多说，直接启动一个项目吧测试吧。

1.首先全局安装BackstopJS

npm install -g backstopjs

安装过程有一点慢，需要耐心的等待把所有依赖下载成功，否则可能使用一些Backstop命令会失败。

2.创建一个文件夹，进入该文件夹。使用npm init 生成一个Package.json （可以忽略这步) ，接着使用backstop init命令生成一个backstop的初始项目

backstop init

3.这时候根目录会生成一个文件夹叫做 backstop_data 以及一个 backstop.json的配置文件（这个文件很重要）。

4.打开backstop.json文件，得到大概如下面图所示的数据

{"id": "qqmap","viewports": [{"label": "phone","width": 375,"height": 667},{"label": "tablet","width": 1024,"height": 768}],"onBeforeScript": "puppet/onBefore.js","onReadyScript": "puppet/onReady.js","scenarios": [{"label": "mapindex","cookiePath": "backstop_data/engine_scripts/cookies.json","url": "https://map.qq.com/m/","referenceUrl": "","readyEvent": "","readySelector": "","delay": 0,"hideSelectors": [],"removeSelectors": [],"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
}

里面的id是测试截图的别名，随便取什么名字都行，重要的是配置"viewports"下面环境的尺寸

scenarios[n].label也是配置别名,这是必须的

scenarios[n].url 您想要测试的端点/文档。它可以是一个绝对URL，也可以是当前工作目录的本地URL。

这几个基础的配置完成过后，就可以测试了。（骗你的）

5.现在还不能测试，因为现在只有测试的真实项目，并没有ui对比图，所以现在需要在backstop_data里面创建一个文件夹 backstop_reference,在这个里面放入ui 图片，要和生成的截图命名一样。（等等，我不知道最后截图生成的名字是什么，好吧）

还是在根目录输入命令： backstop test

backstop test

此时backstop会开始编译运行，打开一个网页，并会生成截图，对比页面与ui图的差异。这时候因为还没有对比图，因为页面无法比较。但是你此刻会发现 backstop_data文件夹里面会生成一个测试文件夹叫做 bitmaps_test。打开里面的文件夹，找到一个你在backstop.json 配置的id + scenarios.label 命名开头图片，这就是你需要对比的文件名。复制这个名字出来。现在你可以在backstop_reference文件夹里面把ui 设计的图命名为刚才复制的名字了，并且把 bitmaps_test文件夹全部删除。

6.重新使用 backstop test命令

现在自动打开的网页就会生成对比图片

已经对比成功了，更多查看更多的配置请参考github 文档

点击访问 -> github 地址

转载于:https://www.cnblogs.com/zzd0916/p/10076552.html

Web UI回归测试 -- BackstopJS 入门相关推荐

.Net Telerik Web UI 安装和使用入门
一安装双击Telerik.Web.UI_2013_2_611_Dev.msi进行安装: 二关于resx 文件看下安装目录下,有很多个resx文件:看上去和telerik web ui 的控件对 ...
基于Selenium与Pytest框架的Web UI自动化测试系统的设计与实现
摘要随着互联网的高速发展,软件技术日新月异,产品更新换代的加快等,始终都离不开一个最核心的要素就是保证产品的质量,测试人员则在其中担任着不可或缺的角色.测试人员的主要工作职责就是通过各种测试手段去发 ...
UI设计师培训入门都需要学习什么技术?
UI设计在如今的IT行业是非常火热的,它的发展前景是非常可观的,想要进入到这个行业的小伙伴越来越多,那么UI设计师培训入门都需要学习什么技术呢?小编下面为大家做下详细的介绍. UI设计师培训入门都需要 ...
15 个 JavaScript Web UI 库
新闻来源:speckboy.com 几乎所有的富 Web 应用都基于一个或多个 Web UI 库或框架,这些 UI 库与框架极大地简化了开发进程,并带来一致,可靠,以及高度交互性的用户界面.本文介绍了 ...
推荐10款优秀的JavaScript Web UI库框架和套件
在进行Web开发时,并非所有的库都适合你的项目,但真正开发的时候,你任然需要依赖一款UI框架.特别在你时间紧迫的时候,它是你忠实的朋友. 他们都是些广泛使用包含不同语言实现的WEB UI框架.今天我就 ...
15 个 JavaScript Web UI 库（转）
几乎所有的富 Web 应用都基于一个或多个 Web UI 库或框架,这些 UI 库与框架极大地简化了开发进程,并带来一致,可靠,以及高度交互性的用户界面.本文介绍了 15 个非常强大的 JavaScr ...
专刊文章 - Web UI框架引领J2EE新开发模式(代码生成器+手工merge半智能开发)
前言:随着WEB UI框架(EasyUI/Jquery UI/ExtJS/DWZ)等的逐渐成熟,系统界面逐渐实现统一化,代码生成器也可以生成统一规范的界面!代码生成+手工MERGE半智能开发将是新的趋 ...
16个Javascript的Web UI库、框架及工具包
目前,几乎所有的富Web应用程序都依赖一套UI管理,程序库或框架(或工具包),他们不仅简化了应用程序开发,他们还提供兼容的.可靠的及很强交互性的用户界面.除此之外您会请求哪些呢? 当前,广泛应用的We ...
Web UI自动化框架大比拼
引子对于测试从业者来说,手工测试是一个绕不过去的坎.当年我校招毕业以测试工程师岗位进了一家互联网公司.入职第一天就被师父"拉去干活",至今印象深刻,是一个投顾管理平台(投资顾问管 ...

Web UI回归测试 -- BackstopJS 入门

Web UI回归测试 -- BackstopJS 入门相关推荐

最新文章

热门文章