Cypress 简明教程

Cypress - Screenshots and Videos

Cypress 可以处理屏幕截图和视频。首先,让我们了解 Cypress 如何帮助捕获屏幕截图。

Screenshots

我们可以在 Cypress 中使用 screenshot 命令捕获整个页面和特定元素屏幕截图。

此外,Cypress 还具有捕获失败测试屏幕截图的内置功能。要捕获特定场景的屏幕截图,我们使用命令 screenshot。

Screenshot Implementation

在 Cypress 中实现屏幕截图命令的方式如下 −

describe('Tutorialspoint Test', function () {
   // test case
   it("Scenario 1", function () {
      //URL launched
      cy.visit("https://the-internet.herokuapp.com/javascript_alerts")
      //complete page screenshot with filename - CompletePage
      cy.screenshot('CompletePage')
      //screenshot of particular element
      cy.get(':nth-child(2) > button').screenshot()
   });
});

Execution Results

输出如下 −

click for js confirm

执行日志显示完整页面屏幕截图已捕获(文件名是 CompletePage.png),以及特定元素(“单击 JS 确认”)的屏幕截图。

这些屏幕截图在项目中 screenshots 文件夹(在 plugins 文件夹中)内部捕获。可以通过更改全局配置,修改捕获屏幕截图的位置。

为全页图像创建的 CompletePage.png 文件。

completepage

按钮“单击 JS 确认”的屏幕截图已捕获。

screenshot of the button

在“测试运行器设置”选项卡中,参数 screenshotOnRunFailure 默认设置为 true 值。因此,总是为失败测试捕获屏幕截图。

此外,screenshotsFolder 参数的值是 cypress/screenshots 值。因此,屏幕截图捕获在 screenshots 文件夹内部。

screenshots folder parameter

要禁用捕获失败屏幕截图的功能,我们必须在 cypress.json 文件中添加以下值 −

Cypress.Screenshot.defaults({
   screenshotOnRunFailure: false
})

Videos

默认情况下,Cypress 的视频录制功能对测试启用。它们存储在项目中的 videos 文件夹中。

一旦使用以下提到的命令运行 Cypress 测试 −

node_modules/.bin/cypress run

我们得到控制台消息以及视频位置、压缩详细信息等 −

location of the video

我们在项目中同一位置获取相应的视频。

video capture feature

要禁用视频捕获功能,我们必须在 cypress.json 文件中添加以下值 −

{
   "video": false
}