Cypress自动化测试系列之三

本文技术难度★★★，如果前编内容顺利执行，请继续。

如果Selenium尚无法灵活运用的读者，本文可能难度较大。

“理论联系实惠，密切联系领导，表扬和自我表扬”——我就是老司机，曾经写文章教各位怎么打拼职场的老司机。

不记得没关系，只需要知道：有这么一位IT老司机，

穿上西装，带大家打拼职场！

操起键盘，带大家打磨技术！

上一篇IT老司机带着各位已经成功安装了Cypress，并且让Cypress成功运行起来了。上篇任意门☛Cypress自动化测试系列之二

本篇，IT老司机教你写第一个Cypress测试用例。

上次说到，老司机成功带着大家完成了第一个真正意义上的测试用例，点击网页上的链接，跳转到新网页，设置断言验证结果。

当然，仅仅是这样，显然是不够的。

老司机这次带着各位继续扩展第一个测试用例，操作网页上其他元素。

上次的测试用例，看起来这样的：

describe('A real test case', function() {

it('Visits the webpage', function() {

cy.visit('https://example.cypress.io');

cy.contains('type').click();

cy.url().should('include', '/commands/actions')

})

})

默认大家已经打开了编辑js文件的IDE，并且已经启动了cypress（npx cypress open）

跟着老司机一步一步扩展。

今天讲的内容，将用一个例子教会大家：

• 怎么CSS定位到元素；

• 怎么输入内容；

• 怎么编写断言验证结果。

按照上面TestCase内容，Cypress自动打开了网页：

https://example.cypress.io/commands/actions

网页右侧有两个文本框：

打开浏览器的“开发者工具”，可以看到该DOM元素类型为“input”，class属性为：“form-control action-email”。

本次试验，我们将往input类型DOM中输入一些内容。

在Cypress框架中，用cy.get()方法选择一个DOM元素，选择方法必须是CSSSelector，跟Selenium一样的思路。

用 .type() 方法写入内容进选中的DOM。

最后用 .should()方法完成断言验证，完成TestCase过程。

加上以上三步后，测试用例看起来这样的：

describe('My First Test', function() {

it('clicking "type" navigates to a new url', function() {

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')

cy.get('.action-email')

.type('fake@email.com')

.should('have.value', ' fake@email.com')

})

})

基本可以望文生义了，对吧？

测试结果：

如果想输入完毕，让浏览器反应一会儿，怎么办？

修改 .type() 方法成：.type('fake@email.com',{ delay: 100 })

记得delay 的单位是毫秒，以上写的100，实际上让浏览器等待了 0.1 秒。

到此为止，第一个TestCase才真正完成。

总结一下：

1. cy.get() 通过 CSSSelector 方式选择DOM元素；

2. 再通过 .type()输入内容；

3. 聪明的读者，是不是可以举一反三地尝试着点出“click()”、“dbclick()”、“check()”、“uncheck()”、“select()”、“clear()”等等？

4. 如果是提交，则需要注意：cy.get('.action-form').submit() 之后，需要 .next() 再可以 .should('contain', 'Sth. You want to exam.') 断言判断。

各位读者，您们的阅读量是我的动力！

如果您觉得本文还可以一读，请不吝转发！IT老司机继续带各位一起探究Cypress！

谢谢！！

作　　者：Testfan Arthur

出　　处：微信公众号：自动化软件测试平台

版权说明：欢迎转载，但必须注明出处，并在文章页面明显位置给出文章链接