Cypress - 螢幕截圖和影片

Cypress 可以處理螢幕截圖和影片。首先，讓我們瞭解 Cypress 如何幫助捕獲螢幕截圖。

螢幕截圖

我們可以使用 Cypress 中的截圖命令捕獲整個頁面和特定元素的截圖。

除此之外，Cypress 還具有內建功能，可以捕獲失敗測試的螢幕截圖。要捕獲特定場景的螢幕截圖，我們使用命令 screenshot。

螢幕截圖實現

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 Confirm）。

這些螢幕截圖被捕獲到專案中的 screenshots 資料夾（在 plugins 資料夾中）。螢幕截圖捕獲的位置可以透過更改全域性配置來修改。

為全頁面影像建立了 CompletePage.png 檔案。

捕獲了按鈕“點選 JS Confirm”的螢幕截圖。

在“測試執行器設定”選項卡中，引數 screenshotOnRunFailure 預設設定為 true 值。因此，始終為失敗測試捕獲螢幕截圖。

此外，screenshotsFolder 引數的值為 cypress/screenshots。因此，螢幕截圖將捕獲到 screenshots 資料夾中。

要停用捕獲失敗螢幕截圖的功能，我們必須在 cypress.json 檔案中新增以下值：

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

影片

預設情況下，Cypress 的影片捕獲功能對測試處於開啟狀態。它們儲存在專案中的 videos 資料夾中。

一旦使用以下命令執行 Cypress 測試：

node_modules/.bin/cypress run

我們將獲得控制檯訊息以及影片位置、壓縮詳細資訊等：

我們在專案中的同一位置獲得相應的影片。

要停用影片捕獲功能，我們必須在 cypress.json 檔案中新增以下值：

{
   "video": false
}