WEB自动化-13-Cypress 截图和录频

13 截图和录频

13.1 概述

    Cypress允许在运行时,生成截图和录频,方便快速问题所在原因或位置。支持cypress opencypress runCI。在以cypress run运行时,如果出现失败,会自动进行截图,并保存至默认目录:cypress\screenshotscypress\videos。在使用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.生效。有效值为
viewport: 截取范围为被测试程序的窗口大小
fullPage:截取范围为整个测试程序界面
runner:截图范围为整个Tesr Runner界面
clip null 裁剪最终截图图像的位置和尺寸,格式为:
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();
    });
});

    运行结果如下所示:

  • 自定义路径和文件名
/// <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();
    });
});

    运行结果如下所示:

原文地址:https://www.jianshu.com/p/84e458db3251

本文同步在微信订阅号上发布,如各位小伙伴们喜欢我的文章,也可以关注我的微信订阅号:woaitest,或扫描下面的二维码添加关注:

posted @   Surpassme  阅读(492)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示