Cypress系列(60)- 运行时的截图和录屏
时间:2022-07-26
本文章向大家介绍Cypress系列(60)- 运行时的截图和录屏,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
如果想从头学起Cypress,可以看下面的系列文章哦
https://www.cnblogs.com/poloyy/category/1768839.html
背景
- 在测试运行时截图和录屏能够在测试错误时快速定位到问题所在
- Cypress 截图和录屏功能强大
无须配置,自动截图
以 cypress run 方式运行测试时,当测试发生错误时,Cypress 会自动截图,并默认保存在 cypress/screenshots 文件夹下,而录屏会保存在 cypress/video 文件夹下
命令行运行结果
console 会看到错误截图和录屏的生成路径
生成截图和录屏的目录
自定义截图,.screenshot() 方法
作用
截取被测应用程序的屏幕快照,以及 Cypress 命令日志的屏幕快照
语法格式
.screenshot()
.screenshot(fileName)
.screenshot(options)
.screenshot(fileName, options)
// ---or---
cy.screenshot()
cy.screenshot(fileName)
cy.screenshot(options)
cy.screenshot(fileName, options)
fileName
- 待保存图片的名称
- 图片默认保存在 文件夹下,可以在 cypress.json 修改默认文件夹路径(配置项 screenshotsFolder )
cypress/screenshots
options 详解
通过 onBeforeScreenshot、onAfterScreenshot,可以在截图发生前或发生后应用自定义的行为
正确用法
// 直接截图整个页面
cy.screenshot()
// 只截图某个特定元素
cy.get('.post').screenshot()
命令返回结果
返回上一条命令相同的结果
.screenshot() 栗子
测试代码
it('简单的栗子', function () {
// 截图整个页面
cy.screenshot()
});
测试结果
为什么截图这么长呢?
因为 capture 默认值就是 fullpage,代表整个页面
.screenshot(filename) 栗子
测试代码
it('文件名', function () {
cy.screenshot('文件名')
});
测试结果
.screenshot(options) 栗子
capture:viewport 的栗子
测试代码
cy.screenshot({
capture: 'viewport'
})
测试结果
capture:runner 的栗子
测试代码
cy.screenshot({
capture: 'runner'
})
测试结果
.screenshot() 命令日志
可以看到各配置项(options)的默认值
onBeforeScreenshot 的栗子
截图某个元素
测试代码
测试结果
$el 是当前元素
截图结果
截图整个页面
测试代码
测试结果
$el 是页面根标签
onAfterScreenshot 的栗子
截图某个元素
测试代码
测试结果
可以看到 props 是当前的一些属性,后面有需要可以获取对应的属性值(格式:props.path)
onAfterScreenshot 源码
可以看到不同属性的数据类型
- 5.如何为Impala配置OpenLDAP认证
- 传统Spring项目使用FeignClient组件访问微服务
- 4. 如何为Hive配置OpenLDAP认证
- 3.如何实现OpenLDAP的主主同步
- 2.OpenLDAP集成SSH登录并使用SSSD同步用户
- 1.如何在CentOS6.5安装OpenLDAP并配置客户端
- PHP 面试知识梳理
- 如何修改CM及CDH元数据库配置
- 如何实现CDH元数据库MySQL的高可用
- 如何实现CDH元数据库MySQL的主主互备
- 在Kerberos环境使用Hue通过Oozie执行Sqoop作业报错异常分析
- 如何在Hue中配置已启用SSL的HttpFS服务
- 如何使用Nginx实现CDSW的跨网段访问
- 7.如何在OpenLDAP中实现将一个用户添加到多个组
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 新手怎么学JS?JavaScript基础入门
- 纯CSS制作加<div>制作动画版哆啦A梦
- Ubuntu 18.04 安装使用 Supervisor 进程守护并设置开机自动启动
- AWS CLI version 2 在 Windows 下的安装
- Vue事件绑定原理
- 组合
- 用navicat进行身份验证连接出现cannot connect to Mongodb authentication failed
- three.js中的矩阵计算
- ASP.NET Core 3.x Razor视图运行时刷新实时编译
- 线段树详解分析
- Centos 网卡命名规范及信息查看(物理网卡,虚拟网卡)
- 个人账号密码管理体系(账号篇)
- 当年偶然发现的 Java Bug(JDK 9及之前仍未修复)
- 干货 | 45张图庖丁解牛18种Queue,你知道几种?
- Linux/Unix 效率工具:快速路径切换 z 命令