温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

cypress中丰富的调试工具如何使用

发布时间:2022-06-01 13:40:22 来源:亿速云 阅读:130 作者:iii 栏目:开发技术

这篇文章主要讲解了“cypress中丰富的调试工具如何使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“cypress中丰富的调试工具如何使用”吧!

cypress调试工具

Cypress附带了一系列调试工具来帮助我们弄明白测试的经过,利于我们更好的调试。
具体这些工具的能力都有啥?

  • 回到每个命令的快照。

  • 可以看到特殊的已发生的page events

  • 接收关于每个命令的额外输出。

  • 在多个命令快照之间 向前/向后 步进。

  • 暂停命令并迭代地逐步执行。

  • 当找到隐藏的或者多个元素时,展示的更形象。

来看下其中的一些具体操作。

describe('My First Test', () => {
    it('Gets, types and asserts', () => {
        cy.visit('https://example.cypress.io')
 
        cy.contains('type').click()
 
        // Should be on a new URL which includes '/commands/actions'
        cy.url().should('include', '/commands/actions')
 
        // Get an input, type into it and verify that the value has been updated
        cy.get('.action-email')
            .type('fake@email.com')
            .should('have.value', 'fake@email.com')
    })
})

一、 Time travel

姑且叫它时间穿梭吧。期初我还有点莫名其妙,后来用了才知道,确实好用。就是当你的鼠标在左侧的命令日志上悬停时,cypress会自动回到那个命令解析时的快照,于是乎,在右侧的预览窗口,就可以看到对应这个命令进行的动作。

cypress中丰富的调试工具如何使用

二、 快照

在左侧的命令行也是可以交互的,这里就可以点击click命令,点击后就发现变紫色了,说明事情有古怪。

cypress中丰富的调试工具如何使用

其实这里有3点需要大家关注到(对应图里的1,2,3标记):

  • 固定快照

可以看到有个图钉标记,表示现在锁定了这个快照。这时候鼠标移动到其他命令上,快照也不会切换。

这就方便我们在创建快照时,手动检查被测试应用程序的DOM。

  • 点击事件

由于.click()是一个操作命令,那么在事件发生的坐标处就可以看到一个红色的命中框。

  • 快照菜单面板

这是一个新的菜单面板。一些命令(如操作命令)如果使用多个快照,那么可以通过点击:beforeafter,来回的切换快照。before快照是在触发click事件之前进行的,after快照则是在点击事件发生后立即执行的。

比如现在点击type命令,单击before将以输入框之前的样子,应该显示占位符文本信息。单击after将显示TYPE命令完成后输入的样子,显示fake@email.com

cypress中丰富的调试工具如何使用

三、errors信息

调试代码,自然少不了看报错的error信息了。

cypress中丰富的调试工具如何使用

在cypress中,如果发生了错误,会打印如下的信息(对应图里标记的序号阅读):

  1. Error name:这是错误的类型,比如AssertionError, CypressError。

  2. Error message:通常会告诉我们哪里出了问题。它的长度不一,有些很短,而有些很长,可能会告诉我们应该如何准确地修正错误。

  3. Learn more:一些错误消息包含一个Learn more的链接,点击后跳转到相关的Cypress文档。

  4. Code frame file:通常是堆栈跟踪的顶部一行,显示了在下面的代码框架中突出显示的文件、行和列。

  5. Code frame:显示发生故障的代码片段,并突出显示了相关的行和列。

  6. View stack trace:单击此按钮可切换是否展示堆栈跟踪。

  7. Print to console button:单击此按钮将完整的错误打印到DevTools控制台,也就是F12的console。

四、页面事件

命令日志里还有2个看起来很有趣的日志:PAGE LOADNEW URL。这些不需要我们去加,当发生一些重要事件的时候,
cypress自己就会输出这些日志。

cypress中丰富的调试工具如何使用

具体涉及到自动输出日志的事件有如下:

  • 发送了XHR的请求。

  • url改变。

  • 页面加载

  • 表单提交。

五、控制台的输出

cypress还可以将额外的调试信息输出到控制台。

比如F12打开你的Dev Tools并点击get来获取.action-email类选择器。

cypress中丰富的调试工具如何使用

我们可以在控制台中看到Cypress输出额外的信息:

  • Command: 已发出的命令。

  • Yielded: 这个命令返回的内容。

  • Elements: 发现的元素数量。

  • Selector:使用的选择器。

六、调试专用命令

除了UI界面上的各种辅助工具之外,还有专门用于调试的命令,例如:

  • cy.pause()

  • cy.debug()

现在,在代码里加上一行cy.pause(),保存。

describe('My First Test', () => {
    it('clicking "type" shows the right headings', () => {
        cy.visit('https://example.cypress.io')
 
        cy.pause()
 
        cy.contains('type').click()
 
        // Should be on a new URL which includes '/commands/actions'
        cy.url().should('include', '/commands/actions')
 
        // Get an input, type into it and verify that the value has been updated
        cy.get('.action-email')
            .type('fake@email.com')
            .should('have.value', 'fake@email.com')
    })
})

可以看到程序运行到cy.pause()就会暂停,可以手动点击继续,进行下一步操作。

cypress中丰富的调试工具如何使用

感谢各位的阅读,以上就是“cypress中丰富的调试工具如何使用”的内容了,经过本文的学习后,相信大家对cypress中丰富的调试工具如何使用这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI