引言
我们写程序、写复杂的脚本时,如果遇到问题,经常需要打断点进行调式,而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,不积跬步,无以至千里。