13 截图和录频
13.1 概述
Cypress允许在运行时，生成截图和录频，方便快速问题所在原因或位置。支持cypress open、cypress run和CI。在以cypress run运行时，如果出现失败，会自动进行截图，并保存至默认目录：cypress\screenshots和cypress\videos。在使用<font title="red">cypress open 不会自动截图。
- 通过配置screenshotOnRunFailure:false，也可以禁用在失败后自动截图。
- 在每次执行cypress run，会自动清除之前保存的截图，通过配置trashAssetsBeforeRuns:false，也可以禁用
如果需要在代码中自定义控制截图，可以使用screenshot命令，其基本语法如下所示：
.screenshot()
.screenshot(fileName)
.screenshot(options)
.screenshot(fileName, options)
// ---or---
cy.screenshot()
cy.screenshot(fileName)
cy.screenshot(options)
cy.screenshot(fileName, options)
主要参数如下所示：
- fileName(String)
保存的截图文件名，图片默认保存cypress\screenshots
- options(Object)
| 选项 | 默认值 | 功能描述 |
|---|---|---|
| log | true | 是否在命令日志中显示 |
| capture | fullPage | 截取Test Runner的哪部分。仅对cy.生效。有效值为<br /><font title="green">viewport: 截取范围为被测试程序的窗口大小<br /><font title="green">fullPage:截取范围为整个测试程序界面<br /><font title="green">runner:截图范围为整个Tesr Runner界面 |
| clip | null | 裁剪最终截图图像的位置和尺寸，格式为：{ x: 0, y: 0, width: 100, height: 100 } |
| disableTimersAndAnimations | true | 若为True，则禁用JavaScript计数器（setTimeout,setInterval等）和CSS动画运行等 |
| scale | false | 是否缩放应用程序窗口以适应浏览器窗口，若capture为runner时，强制为true |
| timeout | responseTimeout | 等待超时时间 |
| overwrite | false | 是否覆盖同名文件 |
13.2 示例
- 基本用法
示例代码如下所示：
/// <reference types="cypress" />
describe('测试截图', () => {
it('测试截图用例-1', () => {
cy.visit("https://www.baidu.com/");
cy.get("#kw").type("Surpass");
cy.screenshot();
});
});
运行结果如下所示：
1301截图示例-1.png
- 自定义路径和文件名
/// <reference types="cypress" />
describe('测试截图', () => {
it('测试截图用例-1', () => {
cy.visit("https://www.baidu.com/");
cy.get("#kw").type("Surpass");
cy.screenshot("cypress/screenshots/surpass/surpass");
});
});
这里路径的前缀是\cypress\screenshots
- 裁剪截图
/// <reference types="cypress" />
describe('测试截图', () => {
it('测试截图用例-1', () => {
cy.visit("https://www.baidu.com/");
cy.get("#kw").type("Surpass");
cy.screenshot(cy.screenshot({ clip: { x: 20, y: 20, width: 800, height: 600 } }));
});
});
- 对元素进行截图
/// <reference types="cypress" />
describe('测试截图', () => {
it('测试截图用例-1', () => {
cy.visit("https://www.baidu.com/");
cy.get("#kw").type("Surpass");
cy.get("#su").screenshot();
});
});
运行结果如下所示：
1302对元素进行截图.png
