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
出 处：微信公众号：自动化软件测试平台
版权说明：欢迎转载，但必须注明出处，并在文章页面明显位置给出文章链接
