Cypress - 屏幕截图和视频

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

截图

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

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

截图实现

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()
   });
});

执行结果

输出如下 -

执行日志显示捕获的完整全页屏幕截图（文件名为 CompletePage.png），并且还对特定元素进行屏幕截图（单击以进行 JS 确认）。

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

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

点击 JS 确认按钮的屏幕截图已被捕获。

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

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

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

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

视频

默认情况下，Cypress 的视频捕获处于打开状态以进行测试。它们存储在项目内的视频文件夹中。

使用下面提到的命令运行Cypress测试后 -

node_modules/.bin/cypress run

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

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

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

{
   "video": false
}