前端-UI自动化(css 回归测试)

本文档介绍了如何使用BackstopJS进行前端UI自动化测试,特别是针对CSS的回归测试。首先,通过`npm install -g backstopjs`全局安装BackstopJS,接着使用`backstop init`初始化项目,然后运行`backstop test`执行测试。在测试过程中,可以设置不同的视口、执行自定义脚本,并通过`backstop reference`保存UI设计作为基准。在backstop.json配置文件中,详细定义了测试场景,包括URL、选择器、分辨率等参数,确保测试覆盖全面。最后,测试结果会被保存在指定路径,便于比较和报告。
摘要由CSDN通过智能技术生成

backstop文档地址:https://github.com/garris/BackstopJS

1.安装包

npm install -g backstopjs

2、初始化

backstop init

3、运行命令

backstop test

4、准备样板图(存放UI设计图)

backstop reference

存放UI设计图 到 bitmaps_reference指定的路径下

 

 

backstop.json文件详解如下:

{

//测试用例id,用于BackstopJS管理和为文件命名

"id": “backstop_prod_test",

//测试视口,就是配置各种分辨率

"viewports": [

{

"name": "phone",

"width": 320,

"height": 480

}],

//在执行所有脚本前、页面加载后执行的脚本。通过他我们可以执行用express做一个静态服务器

"onBeforeScript": "onBefore.js",

"onReadyScript": “onReady.js",

//测试用例

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值