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

昨天跟大家初步地分享了 Cypress 怎麽安装、 Cypress 的资料夹结构 、 Cypress Test Runner 有哪些功能、和 Cypress 提供的强大 Dashboard 的服务之後，大家有试着自己玩玩看吗？

今天我想要分享给大家的是 Cypress 在执行测试时提供的功能。

可能有人会觉得，执行测试就执行测试，哪有什麽功能好分享的？

别急，且听我娓娓道来。

The Test Runner

昨天介绍到这个 Test Runner 开启的小视窗，我们可以直接点击列表中的某个档案来执行该档案的测试。

今天我们就来先点击第一个 todo.spec.js 以执行这个档案的测试，点击该档案之後你会发现， Cypress 用你所指定的浏览器打开了一个视窗，接着大家会看到这个画面：

Cypress 咻咻咻地就把事情做完了，是不是超快的？！

没错，Cypress Test Runner 後来开的这个浏览器里面其实是有玄机的，他不仅仅只是把结果显示出来而已。

Application Under Test

Cypress Test Runner 後来开的这个浏览器里其实是一个互动介面，右边这个区块是实际受测的页面，官方将其称作为 AUT。

这个画面不仅仅只是显示而已，它是真实的页面，所以我们一样可以打开控制台、检查元素与查看 CSS 设定。

不过 Cypress 其实是使用 iframe 的方式将其嵌在这个互动介面里，也因此可能会遇到一些问题，官方有将可能的问题统整在这个文件里，大家如果有遇到类似的问题可以到这个文件里查询。

而如果测试的语法有误，它也会直接将错误讯息显示在同一个地方：

网址列

在 AUT 的上方的网址列显示的是当然是 AUT 的网址，不过该网址列是不能输入的，点击只会直接开新页面以浏览该网页而已。

Viewport

右上方所显示的则是当前这个 AUT 所使用的视窗大小，单位是 px 。

而大小旁边的 % 数指的是当前我们所看到的大小是实际受测大小的缩放比例。

如果想知道更多细节的话可以直接点它，它会跟你说要怎麽设置：

The Selector Playground

再来要介绍的是一个非常好用的功能，在网址列左方有一颗 icon 是准心的按钮：

点下去之後会出现这一列工具列：

并且整个 AUT 会进入一个像是平常我们滑鼠右键检查元素的模式，只要我们鼠标指到 AUT 任一元素上面，该元素就会变成蓝色，并且会有个小小的 tooltip 跟你说这个元素的 CSS Selector 是什麽：

点击下去之後你会发现，上面的输入框会变成你刚刚点击的元素的 CSS Selector ：

这时我们可以点选右边的复制按钮以直接复制 cy.get('[data-test=new-todo]') 这一串文字：

而复制按钮旁边的按钮叫做 Print to console ：

点击这颗按钮可以将被选取元素的资讯印到控制台里面，印出来的资料长得会像是这样：

输入框左边的 cy.get 其实是可以切换的，点击它会出现另外一个选项 cy.contains ：

cy.contains 的功用是透过直接比对元素内是否有该字串来找寻元素，我们如果直接在输入框输入 Walk ，就会看到 Cypress 直接帮我们选取了 Walk the dog 这个代办事项的元素：

而输入框右边的数字也会让我们知道该选择器一共选取到了多少个元素：

是不是非常地方便？我觉得这个工具会让我们在撰写测试案例的时候轻松许多，尤其如果你是需要撰写 E2E 测试的 QA ，这个工具对你的帮助真的非常巨大，再也不用缠着前端工程师问该元素要怎麽选取，直接用这个工具就能轻松搞定！

而且这个工具所提供的 CSS Selector 可是有玄机在里头的！

Cypress 预设会照着以下顺序的优先权来提供 CSS Selector 给我们：

1. 是否拥有属性 ─ data-cy
2. 是否拥有属性 ─ data-test
3. 是否拥有属性 ─ data-testid （ i 真的是小写！，不是我打错噢！）
4. 是否拥有属性 ─ id
5. 是否拥有属性 ─ class
6. tag 名称（该元素的名称，如 input 、 div ）
7. 其他属性名称
8. 伪元素选择器 ─ nth-child

因此，只要该元素有优先权比较高的选择器，不用担心你会得到像是 div > div > div > div > p 之类的 CSS Selector ，只要前端工程师在开发时有加上高优先权选取器，都会有着事半功倍的效果。

讲到这里其实一定会有人担心：这样不就要每个元素都加？这样不就会需要加很多？

其实:

1. 只要关键元素有加，让写 E2E 测试的人方便选取并与页面互动即可。
2. 如果写 E2E 测试是必然，那增加方便选取的属性名称也是必然的。

谜之声：不然你来写 E2E 测试阿？！

不过这个优先权，官方其实是有提供 API 以供我们在有需要的时候加以调整，虽然我觉得并不是很必要，但有需要的人可以参考官方的 Selector Playground API 文件。

而基於这个优先权，官方也提供 Best Practice Guide - Selecting Elements 给大家，希望大家未来在实作时能尽量照这个方式实作。

Command Log

接下来是左半边的重点 ─ Command Log ：

同样地，这边所显示的东西也不仅仅只是单纯的显示结果，它一样是个可以互动的介面。

上方蓝色的连结是受测档案的位置，我们可以直接点击它， Cypress 会帮我们用我们设定的 File Opener 来打开它。

如果想知道怎麽设定 File Opener 的话，我昨天其实有介绍过，大家可以回头看一下昨天的文章。

图中列表里，黑字且可点击收合的项目，是我们在 .spec.js 里所写的 describe 或是 context 。

context 在 cypress 里的功用与 describe 等同，唯一不同的大概就是在语意上，官方范例中的 context 会在 describe ，但 describe 不会在 context 里。

而每个前面有勾勾 icon 的项目，则是我们在 .spec.js 里所写的每一个 it ，也就是每一个测试案例。

点击任一个测试案例後，我们可以在它展开的区块中看到该测试案例的所执行的 Command ：

而且你会发现，Cypress 还会告诉你这些 Command 是在 before 、 beforeEach 、 afterEach 和 after 这些 Hooks 中执行的，还是在 it 中执行的（ TEST BODY 指的就是在 it 中执行的 Command ）：

此外，当我们的滑鼠游标滑到任一 Command 上，或是点击任一 Command 时， Cypress 会直接帮我们还原在执行该 Command 时，页面当前的状况（ DOM Snapshot ）：

就像坐上了时光机一样！

Cypress 预设会帮我们每个测试案例都保留 50 笔的 DOM Snapshot 以供我们进行时空旅行。

不过一旦测试案例一多，这其实是件很吃记忆体的事情。

因此， Cypress 也有提供设定让我们可以调整保留的笔数，透过在 cypress.json 或者是 cypress.env.json 将 numTestsKeptInMemory 调小即可。

想调大当然也是没有问题的！（笑）

还有，大家有没有发现在滑鼠游标滑过每一个 Command 的时候，每一行 Command 开头的数字会变成一颗图钉？

这是因为 Cypress 有提供钉选的功能。

当我们想透过时空旅行去观看某一个 Command 执行时的状况，除了将滑鼠游标滑到该 Command 上之外，点击该 Command 会将当前 AUT 的内容钉选在当下的那个状况：

同时， Cypress 也会帮我们资讯印出来，以供我们使用：

如果觉得蓝蓝的很碍事，我们可以点击这颗按钮把它关掉：

如果要恢复则再点击一次即可。

而如果要解除钉选，则可以按旁边这颗按钮：

也可以透过再次点击当前钉选的 Command 或者是钉选其他的 Command 来解除对当前 Command 的钉选。

此外，如果钉选到的 Command 是有状态切换效果的，像是 Checkbox 、 Radio button ，还会有 Before / After 的 Toggle Button ：

如此一来我们就可以知道在该行 Command 执行完之後，状态有没有如我们所预期的改变：

Test Status Menu

最後，则是左上方的这个 Status Menu。

最左边 < Test 的部分按下去之後，会把一开始的那个小视窗叫出来，这时我们可以再选择其他的测试档案来执行。

不过 Cypress 在这个模式下，一次只能执行一个档案噢！

而旁边这个勾勾跟叉叉应该不用我说大家应该都知道，是指通过测试跟没通过测试的数量，右边那个灰色圈圈则是指略过的测试数量。

再旁边的数字则是执行完这个档案的所有测试所耗费的时间，相信大家也都知道。

右边这个橘色有上下箭头的 icon ，可以用来切换在执行测试时，如果测试案例已经长到超过萤幕高度，是否要自动 Scroll 的功能：

最右边的则是是重新执行所有测试案例的按钮，没什麽特别的：

不过，其实还有一个小秘密不知道大家有没有发现，其实 View All Test 跟 Disabled Auto-scrolling 和 Run All Tests 这三个按钮是有快捷键的！

虽然不是什麽大不了的事情，但我觉得 Cypress 在很多小细节都很细心、很贴心，所以 Cypress 这个 E2E 自动化测试工具才会这麽好用！

本日小结

今天的重点主要是想让大家清楚地知道和了解这个 Cypress Test Runner 提供了些什麽功能，相信之後在後续使用 Cypress 写 E2E 测试的时候，大家会比较知道怎麽 debug 、或者是比较知道我在做什麽，而且使用上也一定会比较熟悉且顺手。

明天我们就要开始正式用 Cypress 写 E2E 测试罗，敬请期待！

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