如果想從頭學起Cypress，可以看下面的系列文章哦
https://www.cnblogs.com/poloyy/category/1768839.html
背景
- 在測試執行時截圖和錄屏能夠在測試錯誤時快速定位到問題所在
- Cypress 截圖和錄屏功能強大
無須配置，自動截圖
以 cypress run 方式執行測試時，當測試發生錯誤時，Cypress 會自動截圖，並預設儲存在 cypress/screenshots 資料夾下，而錄屏會儲存在 cypress/video 資料夾下
命令列執行結果
console 會看到錯誤截圖和錄屏的生成路徑
生成截圖和錄屏的目錄
自定義截圖，.screenshot() 方法
作用
擷取被測應用程式的螢幕快照，以及 Cypress 命令日誌的螢幕快照
語法格式
.screenshot() .screenshot(fileName) .screenshot(options) .screenshot(fileName, options) // ---or--- cy.screenshot() cy.screenshot(fileName) cy.screenshot(options) cy.screenshot(fileName, options)
fileName
- 待儲存圖片的名稱
- 圖片預設儲存在 cypress/screenshots 資料夾下，可以在 cypress.json 修改預設資料夾路徑（配置項 screenshotsFolder ）
options 詳解
通過 onBeforeScreenshot、onAfterScreenshot，可以在截圖發生前或發生後應用自定義的行為
正確用法
// 直接截圖整個頁面 cy.screenshot() // 只截圖某個特定元素 cy.get('.post').screenshot()
命令返回結果
返回上一條命令相同的結果
.screenshot() 栗子
測試程式碼
it('簡單的栗子', function () {
// 截圖整個頁面
cy.screenshot()
});
測試結果
為什麼截圖這麼長呢？
因為 capture 預設值就是 fullpage，代表整個頁面
.screenshot(filename) 栗子
測試程式碼
it('檔名', function () {
cy.screenshot('檔名')
});
測試結果
.screenshot(options) 栗子
capture:viewport 的栗子
測試程式碼
cy.screenshot({ capture: 'viewport' })
測試結果
capture:runner 的栗子
測試程式碼
cy.screenshot({ capture: 'runner' })
測試結果
.screenshot() 命令日誌
可以看到各配置項（options）的預設值
onBeforeScreenshot 的栗子
截圖某個元素
測試程式碼
測試結果
$el 是當前元素
截圖結果
截圖整個頁面
測試程式碼
測試結果
$el 是頁面根標籤
onAfterScreenshot 的栗子
截圖某個元素
測試程式碼
測試結果
可以看到 props 是當前的一些屬性，後面有需要可以獲取對應的屬性值（格式：props.path）
onAfterScreenshot 原始碼
可以看到不同屬性的資料型別