Cypress学习笔记6——Debugging调试代码

　　引言

　　我们写程序、写复杂的脚本时，如果遇到问题，经常需要打断点进行调式，而Cypress提供了很好的debug命令——debugger

　　debugger调试器

　　Cypress测试代码在与应用程序相同的运行循环中运行。这意味着您可以访问在页面上运行的代码，以及浏览器提供给您的内容，如document, window, and debugger。

　　基于这些语句，您可能会试图在测试中添加调试器，如下所示:

/* __author__ = \'Leo\' */



it(\'let me debug like a fiend\', function() {
  cy.visit(\'https://www.baidu.com/\')

  cy.get(\'#s-top-left\')

  debugger // Doesn\'t work
})

　　但是上面的代码并不会运行。Cypress 的文档里面介绍，cy命令是以队列的形式添加到列表里，最后才执行的。
　　debugger 将在 cy.visit() and cy.get() 之前执行，如下图。

　　Let’s use .then() to tap into the Cypress command during execution and add a debugger at the appropriate time:

　　让我们使用then()在执行过程中点击Cypress命令，并在适当的时候添加调试器:

it(\'let me debug when the after the command executes\', () => {
  cy.visit(\'https://www.baidu.com/\')

  cy.get(\'#s-top-left\')
    .then(($selectedElement) => {
      // Debugger is hit after the cy.visit
      // and cy.get command have completed
      debugger
    })
})

　　这样就可以先运行代码，在 debugger 位置暂停:

上面的代码整个工作流程如下

cy.visit()访问页面，Cypress等待加载
查询该元素，如果没有立即找到它，Cypress会自动等待并重试一会儿。
将执行传递给.then（）的函数，并将找到的元素传递给它。
在.then（）函数的上下文中，调用 debugger 调试器，停止浏览器并调用 Developer Tools 的焦点。
检查应用程序的状态，执行 debugger

　　`使用cy.debug()`

　　Cypress还公开了用于调试命令的快捷方式.debug()。让我们用这个帮助器方法重写上面的测试:

it(\'let me debug like a fiend\', function() {
  cy.visit(\'https://www.baidu.com/\')

  cy.get(\'#s-top-left\')
      .debug()
})

　　此时 cy.get() 会生成一个 subject 变量，在 Developer Tools 里面可以直接使用 console 调试

代码格式化一下：

it(\'let me debug like a fiend\', function() {
  cy.visit(\'https://www.baidu.com/\')
  cy.get(\'#s-top-left\').debug()

})

在测试期间，使用.debug()快速检查应用程序的任何(或许多)部分。您可以将它附加到任何Cypress命令链上，以查看此时系统的状态。

　　使用cy.pause()

　　在调试代码时，除了用debug()，我们还有一个命令就是.pause()命令:

it(\'let me debug like a fiend\', function() {
  cy.visit(\'https://www.baidu.com/\')
    cy.pause()
    cy.get(\'#s-top-left\')

})

　　运行后:

　　左上角有两个按钮，从左往右分别是

Resume：继续执行测试用例并运行到结束
Next:get：测试会变成逐步运行，点一下执行下一个命令

　　总结

　　如果对python测试开发相关技术感兴趣的伙伴，欢迎加入测试开发学习交流QQ群:696400122，不积跬步，无以至千里。