WEB自動化-13-Cypress 截圖和錄頻

13 截圖和錄頻

13.1 概述

    Cypress允許在運行時,生成截圖和錄頻,方便快速問題所在原因或位置。支持cypress opencypress runCI。在以cypress run運行時,如果出現失敗,會自動進行截圖,並保存至默認目錄:cypress\screenshotscypress\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,或掃描下面的二維碼添加關注:

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章