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，或掃描下面的二維碼添加關注：
作者： Surpassme
來源： http://www.jianshu.com/u/28161b7c9995/
http://www.cnblogs.com/surpassme/
宣告：本文著作權歸作者所有，歡迎轉載，但未經作者同意必須保留此段宣告，且在文章頁面明顯位置給出 原文鏈接 ，否則保留追究法律責任的權利，如有問題，可發送郵件 聯系，讓我們尊重原創者著作權，共同營造良好的IT朋友圈，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/513707.html
標籤：其他
上一篇：代碼隨想錄 | 二叉樹
下一篇：2022美團CTF個人決賽WP