cypress前端自动化测试工具——(1)简介与selenium争天下
Cypress是什么？
为现代网络打造的下一代前端测试工具。我们解决了开发人员和QA工程师在测试现代应用程序时面临的关键难点问题。
我们很容易的能够做下面的事情:
通常大家都会以为Cypress就是Selenium；
Cypress从底层和结构上都不同于Selenium。Cypress能够突破很多Selenium上的限制。
这将让你能够编写更快、更简单和更可靠的测试。
Cypress允许你编写所有类型的测试：
- 端到端测试
- 集成测试
- 单元测试
Cypress可以测试任何在浏览器中运行的内容。
特性
Cypress就像一个完整的烘烤箱，他还自带电池。 下面是一些其它测试框架无法做到的事情：
- 时间旅行： Cypress在你运行测试的时候拍摄快照。 只要将鼠标悬停在 命令日志 上就能够清楚的了解到每一步发生了什么。
- 可调式能力： 你再也不需要去猜测测试为什么失败了。 调试工具 和Chrome的调试工具差不多。 清晰的错误原因和堆栈跟踪让调试能够更加快速。
- 自动等待： 在你的测试中不再需要添加等待或睡眠函数了。在执行下一条命令或断言前Cypress会 自动等待 异步将不再是问题.
- Spies, Stubs, and Clocks: 验证和 控制 函数、服务器响应或者计时器的行为。你喜欢的单元测试的功能都掌握在你的手中。
- 网络流量控制： 非常容易的进行 控制、保存和边缘测试，而这并不需要涉及到你的服务。你可以根据需要保留网络流量。
- 一致的结果： 我们的架构不需要Selenium或者WebDriver。向快速，一致和可靠的无侵入测试看齐。
- 屏幕截图和视频： 可以查看测试失败时候系统自动截取的图片，或者整个测试的录制视频。
简介入门
describe('Post Resource', function() {
it('Creating a New Post', function() {
cy.visit('/posts/new') // 1.
cy.get('input.post-title') // 2.
.type('My First Post') // 3.
cy.get('input.post-body') // 4.
.type('Hello, world!') // 5.
cy.contains('Submit') // 6.
.click() // 7.
cy.url() // 8.
.should('include', '/posts/my-first-post')
cy.get('h1') // 9.
.should('contain', 'My First Post')
})
})
- 访问
/posts/new页面. - 找到类为
post-title的输入框. - 输入”My First Post”.
- 找到类为
post-body的输入框. - 输入”Hello, world!”.
- 找到含有
Submit文本的元素. - 点击.
- 获取浏览器地址，确保地址里含有
/posts/my-first-post. - 找到
h1标签, 确保内容里含有”My First Post”.
查询元素
Cypress很像jQuery
如果你之前使用过 jQuery , 你可能习惯于这样查询元素:
$('.my-selector')
在Cypress,查询元素的方式是相同的:
cy.get('.my-selector')
事实上,Cypress 捆绑了jQuery并向你公开其许多DOM遍历方法，以便你可以轻松使用你已熟悉的API来处理复杂的HTML结构。
// 每个方法都等同于它的jQuery对应方法。用你所知道的！
cy.get('#main-content')
.find('.article')
.children('img[src^="/static"]')
.first()
Cypress利用jQuery强大的选择器引擎帮助现代Web开发人员熟悉和查找元素。
