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

1. 访问 /posts/new 页面.
2. 找到类为 post-title 的输入框.
3. 输入”My First Post”.
4. 找到类为 post-body 的输入框.
5. 输入”Hello, world!”.
6. 找到含有 Submit 文本的元素.
7. 点击.
8. 获取浏览器地址，确保地址里含有 /posts/my-first-post.
9. 找到 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开发人员熟悉和查找元素。