自动化 End-End 测试 Nightwatch.js 之踩雷笔记：前言

大家好，我是 Dennis，今年三月底变成了前端打工仔，公司的大大们为了让我对专案的理解程度更高，於是有了 E2E 的任务。半年过去全站的覆盖率已经超过 80% 了，也遇到了一些困难。因此希望这篇系列文可以给未来也想碰 E2E 并使用 Nightwatch.js 这个框架的人，减少在 github/Stack Overflow 爬文跟测试的时间 ;)

何谓测试？

测试无所不在，并且任何人都可能接触过测试。
可能是人工手动的测试，也可能是针对单一元件的 unit test。或是，本系列的主题 E2E testing

Unit test

Unit test 着重在呼叫一个单一的工作单元，并验证单一结果，可能小到一个方法，或大到一个类别
此外，unit test 必须具备

• 容易自动化、执行
• 不相依真实物件
• 不是临时性、结一致
• 可完全掌握、可清楚知道原因

例如：

• Pure function (no side effect)
• ui component
• reducer

常见的工具们：

• cli api
• chrome dev tool
• redux dev tool
• console.log

关於更多有关 unit test 可以参考「单元测试的艺术」

E2E testing

E2E 或 End-End，与 unit test 不同的地方是，重点为达到「整合测试」
E2E 是一个速度不快、结果不稳定且测试东西过多，难以找出来源的测试
但因为具有

• 一个/多个相依真实物件
• 确认完整 scope 的特性
  因此也是产品开发中重要的一环，透过完整性的测试，建立反馈循环。

E2E 的建立方法

假设我们今天要测试 Nightwatch 的 Develop guide 连结正不正确，我们会需要：

1. 进入 https://nightwatchjs.org/
2. 点击选单按钮
3. 点击 Develop guide
4. 检查网址正确性

确认流程之後就可以把上面的文字转为程序码：

以上就是使用 Nigthwatch.js 执行後产生的截图，并根据我们所写的「动作」完成截图，分别为「进入」、「点击」、「点击」。

关於本系列文

蛮幸运能到目前的地方实习，却也是从 0 开始接触 E2E 测试，很多东西随着前端技术的演进、效能优化等，其实也会影响 E2E 的友善程度。这半年中遇到了很多很奇妙的问题，不论是跨浏览器的部分、前端框架或是一些不单纯只是点来点去的操作。而这些奇妙的问题解法散落在各种地方，有的可用有的不行，因此也累积了一些心得，看看能不能写完 30 天，把奇妙的问题研究一下，顺便附上解决方法，让未来的人比较好找XD

然而，这个系列文并不是着重在如何建立 E2E 环境，也不是手把手教学，对於如何建立的同学们可以参考 Nightwatch 官网。这里的环境是用 Nightwatch 搭配 BrowserStack 完成的。