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