13 截圖和錄頻
13.1 概述
Cypress允許在運行時,生成截圖和錄頻,方便快速問題所在原因或位置。支持cypress open、cypress run和CI。在以cypress run運行時,如果出現失敗,會自動進行截圖,並保存至默認目錄:cypress\screenshots和cypress\videos。在使用cypress open 不會自動截圖。
- 通過配置screenshotOnRunFailure:false,也可以禁用在失敗後自動截圖。
- 在每次執行cypress run,會自動清除之前保存的截圖,通過配置trashAssetsBeforeRuns:false,也可以禁用
如果需要在代碼中自定義控制截圖,可以使用screenshot命令,其基本語法如下所示:
.screenshot()
.screenshot(fileName)
.screenshot(options)
.screenshot(fileName, options)
// ---or---
cy.screenshot()
cy.screenshot(fileName)
cy.screenshot(options)
cy.screenshot(fileName, options)
主要參數如下所示:
- fileName(String)
保存的截圖文件名,圖片默認保存cypress\screenshots
- options(Object)
選項 | 默認值 | 功能描述 |
---|---|---|
log | true | 是否在命令日誌中顯示 |
capture | fullPage | 截取Test Runner的哪部分。僅對cy.生效。有效值爲 viewport: 截取範圍爲被測試程序的窗口大小 fullPage:截取範圍爲整個測試程序界面 runner:截圖範圍爲整個Tesr Runner界面 |
clip | null | 裁剪最終截圖圖像的位置和尺寸,格式爲:{ x: 0, y: 0, width: 100, height: 100 } |
disableTimersAndAnimations | true | 若爲True,則禁用JavaScript計數器(setTimeout,setInterval等)和CSS動畫運行等 |
scale | false | 是否縮放應用程序窗口以適應瀏覽器窗口,若capture爲runner時,強制爲true |
timeout | responseTimeout | 等待超時時間 |
overwrite | false | 是否覆蓋同名文件 |
13.2 示例
- 基本用法
示例代碼如下所示:
/// <reference types="cypress" />
describe('測試截圖', () => {
it('測試截圖用例-1', () => {
cy.visit("https://www.baidu.com/");
cy.get("#kw").type("Surpass");
cy.screenshot();
});
});
運行結果如下所示:
- 自定義路徑和文件名
/// <reference types="cypress" />
describe('測試截圖', () => {
it('測試截圖用例-1', () => {
cy.visit("https://www.baidu.com/");
cy.get("#kw").type("Surpass");
cy.screenshot("cypress/screenshots/surpass/surpass");
});
});
這裏路徑的前綴是\cypress\screenshots
- 裁剪截圖
/// <reference types="cypress" />
describe('測試截圖', () => {
it('測試截圖用例-1', () => {
cy.visit("https://www.baidu.com/");
cy.get("#kw").type("Surpass");
cy.screenshot(cy.screenshot({ clip: { x: 20, y: 20, width: 800, height: 600 } }));
});
});
- 對元素進行截圖
/// <reference types="cypress" />
describe('測試截圖', () => {
it('測試截圖用例-1', () => {
cy.visit("https://www.baidu.com/");
cy.get("#kw").type("Surpass");
cy.get("#su").screenshot();
});
});
運行結果如下所示:
原文地址:https://www.jianshu.com/p/84e458db3251
本文同步在微信訂閱號上發佈,如各位小夥伴們喜歡我的文章,也可以關注我的微信訂閱號:woaitest,或掃描下面的二維碼添加關注: