近两年有一款 UI 测验东西非常火爆，名字叫 cypress, 官方声称超越 selenium, 是面向下一代的测验东西。

那 cypress 到底要不要学呢？学起来容易吗？咱们一同来看一下。

材料传送门：《软件测验全套根底/进阶/转行材料》

装置

cypress 是运用 nodejs 开发的一款东西，所以需求先下载 nodejs。进入官网下载 LTS 长期支撑版。

下载好 nodejs 之后在指令行输入 node 指令和 npm 指令承认是否正确装置。 npm 是一款包办理东西，类似于 python 中的 pip。

当 nodejs 和 npm 都正确装置好后，就能够经过 npm 装置 cypress 了。

在需求创立工程的目录下装置，比方我需求在 CypressNotes 下装置。先进入目录，再运转 npm install cypress, 最好是初始化要给 package.json 办理，先履行 npm init -y 运用默认值得到 package.json, 再装置 cypress 。

 cd CypressNotes
 npm init -y
 npm install cypress

需求留意的是，npm 有时候装置比较慢。假如呈现网速慢无法装置成功，能够先经过 npm 装置 cnpm, 再经过 cnpm 装置 cypress。 cnpm 是国内镜像版，下载速度非常快。

 npm install -g cnpm --registry=https://registry.npm.taobao.org
 cnpm install cypress

解压装置需求等候一段时间，耐心点。

打开 Cypress 工程

装置好 cypress 以后，能够经过 cypress open 指令打开项目。 cypress 指令是没有直接添加到体系变量当中的，需求进入 node_modules 目录下去手工发动：

 ./node_modules/.bin/cypress open

体系会打开一个类似于编辑器的 cypress 界面：

一切的测验用例存放在 integration tests 中，cypress 会默认生成一些 examples 示例，假如需求编写其他的测验用例，在 integration 目录下建立 js 文件就能够了。

运转能够点击单个文件运转，也能够运转一切的。

默认用例看效果，左面能够点击查看运转步骤，右边是屏幕显示：

cypress 的其他指令能够经过 –help 查看：

 ./node_modules/.bin/cypress --help

npx 运转

npx 能够更加方便的运转 cypress 指令，首先承认 npx 有没有装置，没有装置的话经过 npm install -g npx 装置。 装置完结后能够经过 npx cypress 直接运转 cypress 指令。

还有一种方式是再 package.json 装备 npm 指令。

 "scripts": {
     "cy": "node_modules/.bin/cypress"
 },

能够经过 npm run cy 运转了。

Cypress 的代码结构阐明

编写第一个测验用例

打开 vscode， 在 interation 目录下创立一个 hello.js 文件。 在 cypress 的交互界面点击这个文件就能够运转。

运转结果会报错 No tests found in your file, 因为咱们还没有编写任何的测验步骤。

在 hello.js 中编写测验代码：

 describe('这是我的第一条用例', () => {
     it('1等于1', () => {
         assert(1==1, "1 not equal to 1")
     });
     it('1不等于2', () => {
         assert(1 != 2, "1 not equal to 2")
     });
 })

• describe 表示测验用例场景
• it 表示具体的测验点
• assert 是断语
• 这里用到了 es6 的箭头函数，也能够写成 function() 的方式

这些语法是 JavaScript 中的测验框架 Mocha 的用法。 Mocha 除了能够用 describe 这些 bdd 的方式，还能够用 suite 和 test 这样的 tdd 方式，但是在 Cypress 中不直接支撑。

断语运用的是 Chai, 同样支撑 bdd 和 tdd, 现在暂且用这种断语，后边能够换用其他的方式。

编写代码完结以后，再次点击 cypress 界面中的 hello.js， 就能够呈现测验页面了。

再编写一个断语不成功的情况：

 it('1等于3', () => {
         assert(1==3, "1 not equal to 3")
     });

则断语失败的部分会用赤色标明：

728 x 415 1164 x 664

代码提示

cypress 封装的方法默认是没有代码提示的。假如需求代码提示，最简单的方式是在文件的最初加一个特别注释：

 /// 

这时候就能够看到 cy 下面的 API 了哦：

在 vscode 里面，假如你不想每次都在文件最初加注释，能够新建一个 jsconfig.json 文件，加上以下装备，效果是相同的。

 {
     "include": [
         "/node_modules/cypress",
         "cypress/**/*.js"
     ]
 }

你也能够在 vscode 中装置 cypress snippets 插件，安上以后，能够主动完结 it 等语法规则：

总结

现在咱们已经能够经过 cypress 编写测验用例了，后边咱们再介绍 cypress 的特色功用。赶紧装置好用起来吧。