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开发人员熟悉和查找元素。

原文：https://www.cnblogs.com/baihuitestsoftware/p/12887385.html