1. Cypress 介绍

1.1 Cypress 简介

    Cypress是一款基于 JavaScript 的下一代前端测试工具。可以对浏览器中运行的任何内容进行快速、简单和可靠的测试。
    Cypress是 自集成 的，提供了一套完整的 端到端测试 ，无须借助其他外部工具，安装后即可快速地创建、编写、运行测试用例，且对每一步操作都 支持回看 。另外Cypress也支持 集成测试 、 单元测试 。

Cypress 底层协议不采用 WebDriver

1.2 Cypress 原理

    大多数测试工具（Selenium/Webdriver）通过在浏览器外部启动一个代理客户端，再通过网络向代理客户端发送命令来运行。而Cypress则刚好相反，其与应用程序在同一个生命周期里执行。

Webdriver底层通信协议基于JSON Wire Protocol，运行需要网络通信。

    Cypress 的运行流程如下所示：

• 1.在运行测试程序后，Cypress会首先使用webpack将测试代码中的所有模块放入一个js文件中
• 2.再启动浏览器，并将测试代码注入到一个空白页面，然后在在浏览器中运行

1.3 Cypress架构图

    Cypress官方并未提供其架构图，根据网络资料整理如下所示：

0101Cypress架构图.png

1.4 Cypress 特性

    Cypress主要特性如下所示：

• 时间穿梭

    Cypress在测试代码运行时会自动进行截图拍照。待测试运行结束后，用户可以其提供的Test Runner里，将鼠标悬停命令日志中的命令上，查看每一步具体的操作

• 实时加载

    在测试代码修改后，Cypress可以自动加载改动并重新运行测试

• Spies/stubs/clocks

    Cypress允许验证和控制测试函数的行为，Mock服务器响应或更改系统时间等

• 运行结果一致性

    可以保证每次运行的测试结果都一样

• 可调试性

    在测试结果为失败时，可以直接通过开发者工具进行调试

• 自动等待

    在使用Cypress时，无需在测试代码中添加wait或sleep等。Cypress会自动等待元素至可操作状态才执行命令或断言。

• 网络流量控制

    Cypress可以Mock服务器返回结果。无需连接后端服务器即可实现轻松控制。模拟网络请求。

• 截图和视频

    在测试结果为失败时，Cypress会自动截图，在无GUI界面运行时，会建制整个测试套件的视频，从而可以轻松掌握测试运行情况。