WEB自動化-12-Cypress 調試

12 調試

    Cypress的測試代碼和被測試程序在同一生命週期中的瀏覽器中，也就是意味着，可以使用瀏覽器的開發者工具直接參與調試。Cypress提供了幾種調試方法，分別爲：debugger、debug、pause和開發者工具

12.1 使用debugger

    我們先來看看一份代碼：

describe('驗證測試Debugger', () => {
    it('測試debugger調試', () => {
        cy.visit("http://www.baidu.com/")
        cy.get("#kw")
        debugger // 這裏的調試不會運行
    });
});

    以上代碼並沒有滿足你的期望，因爲Cypress的命令是異步執行，所以並不會立即執行。針對這種情況，我們只需要將debugger命令和放入then命令中就可以了。示例代碼如下所示：

/// <reference types="cypress" />

describe('驗證測試Debugger', () => {
    it('測試debugger調試', () => {
        cy.visit("https://www.baidu.com/")
        cy.get("#kw").type("Surpass").then((item)=>{
            debugger // 這裏的調試會運行
        })
    });
});

    運行結果如下所示：

在運行測試腳本時，需要打開開發者工具窗口，否則遇到dubugger時不會暫停

12.2 使用debug

    除了使用dubugger之外，Cypress還提供另一個調試方法debug。示例代碼如下所示：

/// <reference types="cypress" />

describe('驗證測試Debugger', () => {
    it('測試debugger調試', () => {
        cy.visit("https://www.baidu.com/")
        cy.get("#kw").type("Surpass").debug();
    });
});

    運行結果如下所示：

12.3 使用pause

    使用pause可以實現逐步執行命令，示例代碼如下所示：

/// <reference types="cypress" />

describe('驗證測試Debugger', () => {
    it('測試debugger調試', () => {
        cy.visit("https://www.baidu.com/")
        cy.get("#kw").type("Surpass").pause();
    });
});

    運行結果如下所示：

12.4 使用開發者工具

    在調試的過程，我們也可以藉助開發者工具選項，通過控制檯輸入一些命令，來達到調試的效果，如下所示：

也可以直接在Console直接輸入相應的Cypress命令

原文地址：https://www.jianshu.com/p/6214b31404dd

本文同步在微信訂閱號上發佈，如各位小夥伴們喜歡我的文章，也可以關注我的微信訂閱號：woaitest，或掃描下面的二維碼添加關注：