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

运行结果如下所示：