Cypress 简明教程

Cypress - Screenshots and Videos

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

Cypress can work on screenshots and videos. First, let us understand how Cypress can help in capturing the screenshot.

Screenshots

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

We can capture both the complete page and particular element screenshot with the screenshot command in Cypress.

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

In addition to that Cypress has the in-built feature to capture the screenshots of failed tests. To capture a screenshot of a particular scenario, we use the command screenshot.

Screenshot Implementation

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

The implementation of the screenshot commands in Cypress is as follows −

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

输出如下 −

The output is given below −

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

The execution logs show that complete full page screenshot captured (with filename as CompletePage.png) and also screenshot a particular element (Click for JS Confirm).

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

These screenshots got captured inside the screenshots folder (in the plugins folder) within the project. The location where the screenshots got captured, can be modified by changing the Global configurations.

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

CompletePage.png file created for full page image.

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

The screenshot of the button Click for JS Confirm got captured.

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

In the Test Runner Settings tab, the parameter screenshotOnRunFailure, set to true value by default. Due to which, the screenshots are always captured for failure tests.

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

Also, the screenshotsFolder parameter has the value cypress/screenshots value. So, the screenshots are captured within the screenshots folder.

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

To disable feature of capturing failed screenshots, we have to add the below values in the cypress.json file −

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

Videos

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

The video capturing of Cypress is turned on for tests, by default. They are stored in the videos folder within the project.

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

Once a Cypress test is run with the below mentioned command −

node_modules/.bin/cypress run

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

We get the console message along with the location of the video, compression details, and so on −

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

We get the corresponding video in the same location within the project.

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

To disable the video capture feature, we have to add the below value in the cypress.json file −

{
   "video": false
}