Angular 深入浅出三十天：表单与测试 Day18 - 与 Cypress 的初次见面（上）

昨天跟大家分享了 Cypress 有多厉害之後，大家有没有很期待呢？

这两天就让我来跟大家介绍 Cypress 到底有多厉害吧！

由於 Cypress 的功能非常地丰富且强大，所以我打算分成两篇来介绍它，希望可以让大家感受到它的魅力。

安装 Cypress

要开始使用它之前，当然要先安装它罗！

首先，我们新增一个空的资料夹，然後在终端机中输入以下指令以进入该资料夹：

$ cd /your/project/path

接着输入以下指令以完成初始化：

$ npm init

大家也可以选择现有的专案，只要有 package.json 这个档案即可。

然後输入以下指令以安装

$ npm install cypress --save-dev

安装完成之後，你会发现你的专案除了 package.json 有变动之外，就没有其他变动了。

别担心！这不是因为你做错了什麽，纯粹就是 Cypress 刚安装完就是这样，接着我们可以先打开 package.json ，并且在 scripts 的区段加上这个指令：

{
  "scripts": {
    "cy:open": "cypress open"
  }
}

大家不一定要像我一样叫 cy:open ，可以自己取自己想要的名字，只要後面的 cypress open 不变即可。

修改好并储存後，我们就可以在终端机里以下指令以启动 Cypress ：

$ npm run cy:open

或者是

$ yarn cy:open

初次执行时，Cypress 会知道你这个专案第一次执行它：

然後帮你产生出 cypress.json 与名为 cypress 的资料夹，并帮你开启一个长这样的小视窗：

这就表示我们顺利完成 Cypress 的安装罗！是不是超简单的呢？！

资料夹结构介绍

接下来我们先来看看 Cypress 到底帮我们产生了些什麽档案。

cypress.json

当大家点开它的时候应该会吓一跳，因为刚开始时，它里面就只有这样：

{}

第一次使用 Cypress 的朋友应该会多少觉得有点错愕，不知道这个档案到底要用来干嘛。

其实这个档案是 Cypress 的设置档，有关 Cypress 全局的配置都会在这里设定。

那到底有哪些设定可以配置呢？

关於这点大家其实可以看官方的 Configuration 文件，里面写得非常清楚，我就不再赘述。

而且里面的设定非常地多，虽然不一定都会用到，但也由此可见 Cypress 的功能是多麽地强大。

接下来，点开 cypress 资料夹後你会发现里面还有四个名为 fixtures 、 integration 、 plugins 、 supports 的资料夹。

fixtures

这个资料夹主要是用来放一些在撰写测试案例时，可能会常用到或共用的资料。例如：固定会输入的帐密、固定会验证的使用者资讯等等，并以 JSON 的形式存在。

後续使用时，大多会在 .spec.js 里用像这样子的方式直接引用：

const requiredExample = require('../../fixtures/example');

integration

这个资料夹是我们用来摆放 .spec.js 的地方。

比较值得一提的是，由於 Cypress 可以平行地执行多个不同的 .spec.js，所以我们在写测试案例时可以善加利用此点，将不同系统或不会有依赖的测试分成不同的 .spec.js 来撰写。

不过要反向思考的是，不同的测试档之间就更不可以有依赖关系了。

plugins

这个资料夹里有一个 index.js ，当我们需要用到一些外挂模组的时候，就会需要到这里面来设定，例如我们可能会需要在验证重设密码这个功能时，要到信箱里去确认是否有收到信、点开重设密码的连结等等。

这点如果真的要仔细介绍起来可能会需要花一到两篇的篇幅，所以如果大家有兴趣的话，可以直接看官网的 Write a Plugin 来学习怎麽样撰写与使用 Plugin。

此外，官方也有列出它们精选的 Plugin 供大家参考与使用。

support

在 Cypress 里，我们都是使用 cy.xxx 的方式来操作 Cypress 提供的 API ，而这些 API 在 Cypress 我们叫做 Command 。

虽然 Cypress 有提供许多的 Command 让我们使用，不过我们其实也可以自定我们想要的 Command ，令我们在写测试时更加地方便与轻松。

而这个资料夹就是用来摆放这些我们自定 Command 的地方。

打开资料夹後我们会看到里面有两个档案 ─ index.js 与 commands.js ，其中的 commands.js 里就是我们自定 Command 的地方。

而 index.js 则是用来 import 我们自定 Command 的档案，执行时 Cypress 会自己从这里去找到测试案例所需要用到的 Command ，不用特别在测试案例里 import 。

在档案命名上，当然也不一定要叫 commands.js ，你可以自己取你想要的档名，只要记得在 index.js 里 import 即可。

除了自定 Command 外，其实我们还可以覆写既有的 Command ，语法大家可以参考官方的 Custom Commands 文件，後续我也会再分享给大家。

介绍完 Cypress 的资料夹结构後，我们回头来看看 Cypress 打开的小视窗是什麽玩意儿吧！

Cypress Test Runner

这个小视窗其实是 Cypress Test Runner 所开启的一个小视窗，一般开发时我们会使用 cypress open 的指令来启动这个 Test Runner 的小视窗以便开发。

现在大家看到画面中会有许多档案，而这些档案其实都是位於 /cypress/integration 之中， Test Runner 启动时会帮我们把它们抓出来并显示在上图的列表中。

当我们想要测试某一个档案里的测试案例时，就只要点击该档案的名称即可。

大家可以先点点看、玩玩看，点击之後会做的事情我会在明天将它们更仔细地介绍给大家。

而这个 Test Runner 的小视窗其实有满多满强大的功能，例如在小视窗的右上角有个下拉选单可以选择想要测试的浏览器：

这些浏览器是 Cypress 自动从你的作业系统中抓取的，只要你的作业系统有安装 Cypress 所支援的浏览器，它就会成为这个下拉选单的选项。

想知道更多更详细的资讯可以参考官方的 Launching Browsers 文件。

此外， 小视窗的上方有三个页签： Tests 、 Runs 、 Settings ，当前的画面所显示的是 Tests 的页签，我们点击 Settings 的页签之後会看到以下画面：

这边比较重要且常用的会是 Configuration 的区块，我们一样点开它之後会看到许多设定：

我觉得这个功能非常地方便，因为这边所显示的设定是我们可以在 cypress.json 或者是 cypress.env.json 里配置的所有设定。

有了这个之後，不用再为了找有哪些设定可以使用去看官网文件，甚至也透过不同颜色来得知当前的配置是来自於哪里，非常地贴心！

至於 Configuration 後面的区块， Node.js Version 是可以显示目前所执行的 node 的版本：

细节可参考官方的 Configuration - Node Version 文件。

Proxy Settings 则是显示目前的 Proxy 相关设定：

想知道如何设定 Proxy 可参考官方的 Proxy Configuration 文件。

File Opener Preference 则是可以设定你想要用什麽软件来开启测试档（因为在测试中可以透过点击档名来开启该档案）：

详细请参考官方的 IDE Integration - File Opener Preference 文件。

最後 Experiments 则是显示目前尚在实验阶段的设定：

详细请参考官方的 Experiments 文件。

那 Runs 是做什麽用的呢？

这边是如果你有使用它们家的 Dashboard 服务的话，可以直接在这边看到历史的执行结果。

Dashboard 服务？这又是什麽东西？

Cypress Dashboard

Cypress Dashboard 是 Cypress 它们家所提供的服务，主要是方便我们在使用 Cypress 来执行完自动化的 E2E 的测试後，把结果上传到这里来，已供後续观测与整合第三方工具所用。

这又是一个很强大的工具，如果要介绍它又得花一整篇的文章，不过由於官网其实有非常详尽的说明与影片，而且大家其实可以自己登入进去玩玩看，连结在这里：https://dashboard.cypress.io/login 。

至於这个服务的收费方式，大家可以看这边：https://dashboard.cypress.io/organizations/48db8376-6414-489b-b988-92233f50e335/pricing 。

想知道更详细的资讯可以看官方的 Dashboard Introduction 文件。

不过值得一提的是，其实有个开源的工具叫做 Sorry Cypress ，它可以说是免费版的 Cypress Dashboard ，主要的核心功能如平行执行测试、储存历史执行结果等都有，不过在介面的设计上比较阳春一些些、最重要的是需要自己架设、自己设定。

我觉得这就像我们自己架设 Jenkins 与使用别人所提供的 CI 工具如 Circle CI 的概念很像，就看我们的需求来决定要选择哪一种工具罗！

本日小结

今天主要是跟大家介绍 Cypress 的基础功能面，我想让大家在对它有个基本的了解之後，接下来我们在使用时会比较知道它在干嘛、有哪些功能，不会忽然讲到一个功能之後要忽然中断原本的进度来解释它。

而明天的文章会着重在 Cypress 的 Test Runner 上（今天只有介绍到一小部分的功能），敬请期待！！

如果你有任何的问题或是回馈，还请麻烦留言给我让我知道，感谢大家！