51Testing软件测试论坛

标题: 如何在WEB自动化中对Cypress进行调试？ [打印本页]
作者: 海鸥一飞    时间: 2022-10-8 13:26
标题: 如何在WEB自动化中对Cypress进行调试？
调试
    Cypress的测试代码和被测试程序在同一生命周期中的浏览器中，也就是意味着，可以使用浏览器的开发者工具直接参与调试。Cypress提供了几种调试方法，分别为：debugger、debug、pause和开发者工具
1 使用debugger
    我们先来看看一份代码：
  1. <font size="3">describe('验证测试Debugger', () => {
  2.     it('测试debugger调试', () => {
  3.         cy.visit("http://www.baidu.com/")
  4.         cy.get("#kw")
  5.         debugger // 这里的调试不会运行
  6.     });
  7. });
  8. </font>
复制代码
以上代码并没有满足你的期望，因为Cypress的命令是异步执行，所以并不会立即执行。针对这种情况，我们只需要将debugger命令和放入then命令中就可以了。示例代码如下所示：
  1. <font size="3">/// <reference types="cypress" />

  3. describe('验证测试Debugger', () => {
  4.     it('测试debugger调试', () => {
  5.         cy.visit("https://www.baidu.com/")
  6.         cy.get("#kw").type("Surpass").then((item)=>{
  7.             debugger // 这里的调试会运行
  8.         })
  9.     });
  10. });
  11. </font>
复制代码
运行结果如下所示：
[attach]143579[/attach]
在运行测试脚本时，需要打开开发者工具窗口，否则遇到dubugger时不会暂停
2 使用debug
    除了使用dubugger之外，Cypress还提供另一个调试方法debug。示例代码如下所示：
  1. <font size="3">/// <reference types="cypress" />

  3. describe('验证测试Debugger', () => {
  4.     it('测试debugger调试', () => {
  5.         cy.visit("https://www.baidu.com/")
  6.         cy.get("#kw").type("Surpass").debug();
  7.     });
  8. });
  9. </font>
复制代码
运行结果如下所示：
[attach]143580[/attach]
3 使用pause
    使用pause可以实现逐步执行命令，示例代码如下所示：
  1. <font size="3">/// <reference types="cypress" />

  3. describe('验证测试Debugger', () => {
  4.     it('测试debugger调试', () => {
  5.         cy.visit("https://www.baidu.com/")
  6.         cy.get("#kw").type("Surpass").pause();
  7.     });
  8. });
  9. </font>
复制代码
运行结果如下所示：
[attach]143581[/attach]
4 使用开发者工具
    在调试的过程，我们也可以借助开发者工具选项，通过控制台输入一些命令，来达到调试的效果，如下所示：
[attach]143582[/attach]
也可以直接在Console直接输入相应的Cypress命令





欢迎光临 51Testing软件测试论坛 (http://bbs.51testing.com/) Powered by Discuz! X3.2