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();
    });
});

? ? 運行結果如下所示：