Cypress

Cypress是什么？

Cypress是为现代Web构建的下一代前端测试工具。它解决了开发人员和QA工程师在测试应用程序时面临的关键痛点。Cypress提供了完整的端到端测试体验，允许您使用简单而强大的API直接在浏览器中编写、运行和调试测试。与其他框架不同，它与您的应用程序在同一个运行循环中直接操作，使其能够原生访问每一个对象，从而实现更可靠、更快速的测试。

主要特点

• 时间旅行 (Time Travel): Cypress在测试运行时会拍摄快照。将鼠标悬停在命令日志中的命令上，可以确切地看到每一步发生了什么。
• 可调试性: 不用再猜测测试失败的原因。直接使用熟悉的工具（如Chrome开发者工具）进行调试。可读的错误和堆栈跟踪使调试变得轻松。
• 自动等待: Cypress在继续执行之前会自动等待命令和断言完成。再也没有异步地狱了。
• 侦测、存根和时钟 (Spies, Stubs, and Clocks): 验证和控制函数、服务器响应或计时器的行为。
• 网络流量控制: 无需涉及服务器，即可轻松控制、存根和测试边缘情况。您可以存根网络请求来控制应用程序接收的数据。
• 结果一致: Cypress的架构使其具有确定性和可靠性，消除了其他测试框架常有的不稳定性。
• 截图和视频: 自动查看失败时的截图，或整个测试套件运行的视频。

使用案例

• 端到端 (E2E) 测试: 模拟从头到尾的真实用户旅程，例如登录、将商品添加到购物车和结账。
• 组件测试: 独立测试单个组件，以确保它们在集成到更广泛的应用程序之前能正常工作。
• API测试: 使用 cy.request() 向您的后端发出HTTP请求并对响应进行断言，从而直接测试您的API端点。
• 跨浏览器测试: 在Chrome、Firefox和Edge等多个浏览器上运行测试，以确保一致的用户体验。
• 可视化回归测试: 与可视化测试工具集成，以捕捉意外的UI更改。

入门指南

这是一个Cypress的简单“Hello World”风格的测试。此测试访问一个页面，找到包含文本“type”的元素，然后单击它。

1. 安装Cypress:

   npm install cypress --save-dev
   

2. 在 cypress/e2e/simple_spec.cy.js 创建一个测试文件:

   describe('我的第一个测试', () => {
     it('找到内容 "type"', () => {
       cy.visit('https://example.cypress.io')
   
       cy.contains('type').click()
   
       // 应该在一个新的URL上，该URL包含 '/commands/actions'
       cy.url().should('include', '/commands/actions')
   
       // 获取一个输入框，输入内容并验证值已更新
       cy.get('.action-email')
         .type('[email protected]')
         .should('have.value', '[email protected]')
     })
   })
   

3. 运行测试:

   npx cypress open
   

   这将打开Cypress测试运行器，您可以在其中实时看到测试的执行情况。

定价

Cypress是一个开源项目（MIT许可证），可免费用于本地测试。他们提供名为 Cypress Cloud 的付费服务，该服务提供了在CI/CD管道中运行测试的功能，包括并行化、高级分析、视频回放以及与源代码控制的集成。它采用免费增值模式，提供慷慨的免费套餐以及针对大型团队和更广泛测试需求的付费计划。