Cypress--调试

不言

cypress

发布于：2020年4月2日

次浏览

说明

开头说过，cypress的自动筛选非常舒服，基本上90%的场景可以一键复制过来。同时基于真实的快照页面，在进行回放的时候，每一步都可以重现当时的场景，假如你想看console，是非常方便的。

自动筛选说明

打开开关

变成下面这个样子

然后鼠标在页面上滑动，可以看到上面属性在不断变换，焦点持续跟踪。

Jietu20200402-150735-HD.mp4

视频中我点击了搜索框，可以看到上面语句变了，变成了，cy.get('#sb_form_q')。

这个时候直接到编译器里，ctrl+v就好了，语句就复制过来了。

Console查看

在上文查看的时候，可以点击Pring to console，可以看到，Elements为1，找到了符合条件的元素1个。

在左侧执行历史中，每一步如click, type等操作，都可以回看，当你鼠标点击，console里一样会打印当时执行内容的结果，如下。

Debug

除了这种被动式在console里打印，cypress还支持debug模式，可以在代码里需要调试的地方加一个cy.debug(),设置debugger并记录上一个命令产生的内容。

例如打开bing,我在debug下去输入内容搜索。

1
2
3
4
5
6
7

describe('调试说明',function(){

    it('测试', () => {
        cy.visit('http://bing.com').wait(4000)
        cy.debug()
    })
})

自动执行到以下场景。

在console里输入内容

可以看到，临时在console下执行的指令，执行了。

Pause

debug侧重于调试， 开发者工具右边那些内容可以看出来，跟平时调试js差不多，pause突出的是暂停操作，这个时候可以自己写一些命令，与正在测试的应用程序进行交互。然后可以点“恢复”运行所有命令，或者选择从命令日志中逐步执行“下一步”命令。

如下

1
2
3
4
5
6

describe('调试说明',function(){
    it('测试', () => {
        cy.visit('http://bing.com').wait(4000)
        cy.pause()
    })
})

运行一下

在console里执行

可以看到，输入的两条指令都执行了，case也结束了。

更新于：2025年6月17日

cypress

UI自动化

test