如何调试cypress脚本？

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第30天，点击查看活动详情

大家好，我是阿萨。昨天我们学习了[Cypress默认文件结构]了解了一个cypress 自动化测试项目主要的文件结构，知道了什么内容应该放到什么位置了。也学会了写第一条测试脚本。但是实际的测试过程中，经常会写脚本的时候无法一次完成脚本。写脚本很简单，但是调试脚本让其达到自己的想要的效果，也非常重要，它比我们怎么写脚本更重要。类似我们会用工具很重要，但是工具没有按照我们期待的方式工作时，会调试工具，让其为我们服务才是更关键的本领。今天就给大家讲解下如何调试我们的脚本。今天主要给大家讲解2个关键字 pause 和debug.

一.pause

还是使用我们之前的login 页面。如果脚本老是失败，我们想看下提交之前用户名和密码都输入了吗，怎么办？先添加下pause\

describe('Login', function(){const username='Sarah'const password ='changeme_123'    

context('Test HTML Login Form',function(){  

it('Login success',function(){  

cy.visit('http://localhost:7077/login') 
cy.get('input[name=username]').type(username) 
cy.get('input[name=password]').type(password)
//pause            
cy.pause()            
cy.get('form').submit()     

cy.url().should('include','/dashboard') 

cy.get('h1').should('contain',username)        })    })})

然后运行下Runner. 右上角上显示 Resume 和NextResume就是 执行完后续的所有脚本。
Next 类似单步调试，一步一步地去执行所有脚本。可以单独调用pause。

cy.pause()

也可以命令行后面调用。

 cy.get('form').pause().submit()

二. debug

我们还是拿之前的login的脚本来看。比如我们写的脚本,想要打印login 信息。

describe('Login', function(){    
const username='Sarah'    
const password ='changeme_123'
context('Test HTML Login Form',function(){  
it('Login success',function(){            
cy.visit('http://localhost:7077/login')       
cy.get('input[name=username]').type(username)  
cy.get('input[name=password]').type(password)       
//debug            
cy.debug()           
cy.get('form').submit()
cy.url().should('include','/dashboard')     
cy.get('h1').should('contain',username)  
})
    })})

打开console，可以看到下方有debug Info
运行前打开 Console ，可以直接debug 我们的程序。\

可以单独调用

cy.debug()

也可以在某一个命令之后写。

cy.get('a').debug().should('have.attr', 'href')

昨天的思考题答案：

1. 在Support 文件夹里
2. 在Fixture 的json 文件里。

今天的思考题：

1. 单步执行脚本该怎么操作？
2. 调试脚本该如何操作？

你学会了吗？如果觉得阿萨的内容对你有帮助，欢迎围观点赞。