e2e 测试框架之 Cypress

谈起 web 自动化测试，大家首先想到的是 Selenium！随着近几年前端技术的发展，出现了不少前端测试框架，这些测试框架大多并不依赖于 Selenium，这一点跟后端测试框架有很大不同，如 Robot Framework 做 Web 自动化测试本质上还是使用的 Selenium，包括各语言的 xUnit 单元测试框架。

多吧！这还只是一部分呢？你以为这些都是不知名的小项目？错了！

我特地把 Selenium 加了进来，其中 mocha 和 jtest 在 Github 上的 stats 是多于 Selenium 的，剩下的其它项目也都不弱。

本文要介绍的是 Cypress 测试框架! why? 因为人家的文档都是带视频的。

看一下人家官方的文档，像这样的视频还有好几段，简直是对新手的宠爱。

看到这么好的教程，不学一学感觉都对不起人家，是的！这就是我选择了解一下 Cypress 的原因。

### 官网：

https://docs.cypress.io

The web has evolved. Finally, testing has too.

Web 已经进化了，最后，测试也有。

这类测试框架统称为 e2e 测试，即 end to end（端到端）测试。理论上前端页面由前端框架来测试确实更为合适。这几天我在搭建 UI 自动化测试框架，顺便封装了一些元素定位，随着对前端技术的了解，我几乎将所有元素定位都换成了 CSS，配合 JS 处理一些 Selenium 很难操作的元素，确实效率提高了很多，页面元素也没那么难操作了，包括学了点 Jenkins 的配置，当然，这个话题会放到下一次来分享。

### 安装：

安装很简单，首先你要安装 node.js。

创建 cypress_sample 练习目录：

> mkdir cypress_sample
> cd cypress_sample

安装 cypress：

cypress_sample > npm install cypress --save-dev

启动 cypress：

cypress_sample > ./node_modules/.bin/cypress open

第一次启动 Cypress，它已经为我们准备了丰富的例子。

通过 vs code 打开 cypress_sample 项目。

在 examples / 目录下面创建 baidu.spec.js 文件，代码如下：

describe('My First Test', function () {
    it('Does not do much!', function () {
        cy.visit("https://www.baidu.com")

        cy.get("#kw", {timeout: 2000}).type("cypress test")
       
        cy.wait(100)
       
        cy.get("#su", { timeout: 2000 }).click()

    })
})

上上图，找到在 Tests 列表中找到 baidu.spec.js 文件，点击运行。

在 VS code 中编辑保存脚本后，上图的窗口会自动执行，速度上比 selenium 快多了，Selenium 启动浏览器怎么着也得 3~5 秒吧，上面的脚本不到 2 秒就跑完了，元素定位主要以 CSS 为主，这其实不是问题，CSS 本来就很强大的说。

也许，这是未来前端测试的方向，至少对于前端人员来说，快速验证界面功能，我想不到有什么理由不选择它，而是 Selenium。当然，对于测试人员，脚本的可维护性，报告的生成，以及与持续集成的结合都有一整套成熟的方案。对于 Cypress 来说（其它前端测试框架不了解），整合能力还不够强，可能 JavaScript 也是一个门槛。毕竟，这两年，大家刚学会 Python。