【Cypress】cy.screenshot()和 cy.compareSnapshot()的区别

2024-08-21 06:52

本文主要是介绍【Cypress】cy.screenshot()和 cy.compareSnapshot()的区别,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

 `cy.screenshot()`
功能: `cy.screenshot()` 方法用于捕获当前页面的截图并保存到指定目录。这是在 Cypress 中生成截图的基本方法。
用途: 它可以用于生成测试报告中的截图、记录测试过程中的页面状态,或者为手动分析保存截图。你可以通过传入参数来指定截图的文件名或者指定截取整个页面、某个元素或者视口。
保存路径: 截图会默认保存到 `cypress/screenshots` 目录下。如果你传递了文件名作为参数,例如 `cy.screenshot('my_screenshot')`,截图会以指定的文件名保存。

`cy.compareSnapshot()`
功能: `cy.compareSnapshot()` 是一个来自 `cypress-image-snapshot` 插件的方法,用于执行视觉回归测试。它会将当前页面的截图与之前保存的基准截图进行对比,检测两者之间的视觉差异。
用途: 主要用于自动化检测页面在不同时间点、不同测试环境中是否发生了预期之外的视觉变化。适用于检测 CSS 样式的变化、UI 元素的偏移或其他导致页面外观变化的原因。
保存路径: 它生成并保存基准截图到 `cypress/snapshots` 目录中,在后续运行中,它会将新的截图与基准截图进行比较,如果有差异,则会生成差异截图。

区别总结
目的不同: `cy.screenshot()` 用于简单地保存当前页面的截图,而 `cy.compareSnapshot()` 用于执行视觉回归测试,通过比较当前截图和基准截图检测页面是否发生了意外的视觉变化。
输出不同: `cy.screenshot()` 生成单独的截图文件,而 `cy.compareSnapshot()` 则是生成并比较截图,并在发现差异时生成差异截图以供分析。
应用场景: `cy.screenshot()` 适用于保存测试过程中的截图,`cy.compareSnapshot()` 则用于确保页面的视觉外观在不同测试运行之间保持一致。

这篇关于【Cypress】cy.screenshot()和 cy.compareSnapshot()的区别的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1092435

相关文章

SpringBoot项目中报错The field screenShot exceeds its maximum permitted size of 1048576 bytes.的问题及解决

《SpringBoot项目中报错ThefieldscreenShotexceedsitsmaximumpermittedsizeof1048576bytes.的问题及解决》这篇文章... 目录项目场景问题描述原因分析解决方案总结项目场景javascript提示:项目相关背景:项目场景:基于Spring

go 指针接收者和值接收者的区别小结

《go指针接收者和值接收者的区别小结》在Go语言中,值接收者和指针接收者是方法定义中的两种接收者类型,本文主要介绍了go指针接收者和值接收者的区别小结,文中通过示例代码介绍的非常详细,需要的朋友们下... 目录go 指针接收者和值接收者的区别易错点辨析go 指针接收者和值接收者的区别指针接收者和值接收者的

售价599元起! 华为路由器X1/Pro发布 配置与区别一览

《售价599元起!华为路由器X1/Pro发布配置与区别一览》华为路由器X1/Pro发布,有朋友留言问华为路由X1和X1Pro怎么选择,关于这个问题,本期图文将对这二款路由器做了期参数对比,大家看... 华为路由 X1 系列已经正式发布并开启预售,将在 4 月 25 日 10:08 正式开售,两款产品分别为华

kotlin中const 和val的区别及使用场景分析

《kotlin中const和val的区别及使用场景分析》在Kotlin中,const和val都是用来声明常量的,但它们的使用场景和功能有所不同,下面给大家介绍kotlin中const和val的区别,... 目录kotlin中const 和val的区别1. val:2. const:二 代码示例1 Java

CSS Padding 和 Margin 区别全解析

《CSSPadding和Margin区别全解析》CSS中的padding和margin是两个非常基础且重要的属性,它们用于控制元素周围的空白区域,本文将详细介绍padding和... 目录css Padding 和 Margin 全解析1. Padding: 内边距2. Margin: 外边距3. Padd

Springboot @Autowired和@Resource的区别解析

《Springboot@Autowired和@Resource的区别解析》@Resource是JDK提供的注解,只是Spring在实现上提供了这个注解的功能支持,本文给大家介绍Springboot@... 目录【一】定义【1】@Autowired【2】@Resource【二】区别【1】包含的属性不同【2】@

Java中的String.valueOf()和toString()方法区别小结

《Java中的String.valueOf()和toString()方法区别小结》字符串操作是开发者日常编程任务中不可或缺的一部分,转换为字符串是一种常见需求,其中最常见的就是String.value... 目录String.valueOf()方法方法定义方法实现使用示例使用场景toString()方法方法

分辨率三兄弟LPI、DPI 和 PPI有什么区别? 搞清分辨率的那些事儿

《分辨率三兄弟LPI、DPI和PPI有什么区别?搞清分辨率的那些事儿》分辨率这个东西,真的是让人又爱又恨,为了搞清楚它,我可是翻阅了不少资料,最后发现“小7的背包”的解释最让我茅塞顿开,于是,我... 在谈到分辨率时,我们经常会遇到三个相似的缩写:PPI、DPI 和 LPI。虽然它们看起来差不多,但实际应用

GORM中Model和Table的区别及使用

《GORM中Model和Table的区别及使用》Model和Table是两种与数据库表交互的核心方法,但它们的用途和行为存在著差异,本文主要介绍了GORM中Model和Table的区别及使用,具有一... 目录1. Model 的作用与特点1.1 核心用途1.2 行为特点1.3 示例China编程代码2. Tab

Nginx指令add_header和proxy_set_header的区别及说明

《Nginx指令add_header和proxy_set_header的区别及说明》:本文主要介绍Nginx指令add_header和proxy_set_header的区别及说明,具有很好的参考价... 目录Nginx指令add_header和proxy_set_header区别如何理解反向代理?proxy