Angular 深入浅出三十天：表单与测试 Day17 - E2E 自动化测试工具简介

在这个各种前端框架、开发工具层出不穷、百花齐放、百鸟齐鸣的美好时代， E2E 自动化测试工具的选择自然也很多。

今天我们会先来初步了解一下目前有哪些 E2E 自动化测试工具，让大家在未来需要时，能够以最短的时间找到最贴近自己需求的工具。

Selenium

Selenium 是老牌的测试工具，出道已久且颇富盛名的它拥有丰富的 API 与衍生的工具软件，可使用许多种语言撰写，如：C#、JavaScript、Java、 Python 、 Ruby 。

主要是藉由 W3C WebDriver 所提供的 API (以前叫 Selenium WebDriver)。

TestCafe

TestCafe 的主打是安装与设置快速，且可以使用相对於 Selenium 来说，较少、较简洁的程序码来做到相同的操作。

主要原因是因为他们并不是以 W3C WebDriver 为基底，而是基於 Node.js 之上所开发的。

最强大的地方在於他们支援几乎是目前市面上所有的浏览器， Chrome 跟 Firefox 我就不提了，其他还有 IE 、 Edge 、 Safari 、 Opera ，是至是跨浏览器的测试工具平台 BrowserStack 与 LambdaTest 。

NightWatch

NightWatch 也是用 Node.js 所写的，不过跟 TestCafe 不一样的是，虽然是用 Node.js 所写，但其底层还是使用 W3C WebDriver API 来驱动浏览器执行操作。

不过它们家也是说它们可以在一分钟内快速完成设定并启动服务，有兴趣的朋友可以试试看。

不过它们家的猫头鹰 Logo 很可爱！

Puppeteer

Puppeteer 也是一个基於 Node.js 所开发的 E2E 测试工具，不过他是直接透过 Chrome 的 DevTools Protocol 来操控 Chrome 或 Chromium ，而且它预设会跑在 Headless 的模式下，非常方便。

除此之外，它所主打的功能有：

• 可以产生出所测试页面的萤幕撷图和 PDF
• 可以抓取 SPA （Single Page Application） 并将其元素都渲染出来

Angular 有个 SSG （Static Site Generation） 的框架 Scully 就是基於这件事情上所做出来的。

• 自动化表单送出、UI测试、键盘输入等事件
• 使用最新版本的自动化测试环境、 JavaScript 并直接在最新版本的 Chrome 里执行测试
• 提供 Timeline trace 的功能以帮助诊断效能问题
• 可以用来测试 Chrome 的 Extension

它们还有提供一个线上的 Playground ，大家有兴趣可以玩玩看。

WebDriverIO

WebDriverIO 号称是下一个世代的 E2E 测试工具，它既可以使用 WebDriver 来达到跨浏览器测试的功能，也能像 Puppeteer 那样使用 Chrome DevTools Protocol ，非常厉害。

Protractor

Protractor 是为 Angular 量身打造的 E2E 测试工具，而其根本也是使用 WebDriver 来驱动浏览器。

身为 Angular 御用的 E2E 测试工具以及 Angular 生态圈的一员，它的方便之处在於新增 Angular 专案时，一定也会连带地将 Protractor 也给配置妥当。

不过随着 Angular 征战多年，Angular 在今年五月於 Angular v12 版本推出时宣布， 在 Angular v12 之後，Protractor 将不会再内建在新专案中，而预计将会在 Angular v15 时（大概是 2022 年尾）， Angular 团队会正式终结 Protractor 。

而目前 Angular 的官方团队正在积极寻找其他的 E2E 测试框架夥伴，像上面有介绍到的 TestCafe 、 WebDriverIO 与稍後会介绍的 Cypress 都名列其中。

关於 Angular E2E 与 Protractor 的计画，想要知道详细情况的朋友可以阅读官方的 RFC（请求意见稿）

想要知道 Angular v12 更新了什麽，可以参考我的部落格文章

Cypress

Cypress 有一句非常有趣的标语，叫做：

Test your code, not your patience.

大概是知道大家写 E2E 测试时都写的满痛苦吗？

此外，它还有一句标语叫做：

A test runner built for humans.

这是因为它们的主张 ─ 开发者友善，不管你是 QA 还是一般工程师都是一样。

而且它还觉得它有七个地方跟别的 E2E 自动化测试工具不一样：

1. 它不使用 Selenium 框架

   因为它认为大多数的 E2E 测试工具都是基於 Selenium 的框架下所运作，这就是为什麽它们都会有相同的问题。

2. 它专注於非常出色地进行 E2E 测试

   因为它们只想专注地在为 Web Application 撰写 E2E 测试时，提供做出色的开发者体验。

3. 它适用於任何前端框架或是网站

   只要是可以在浏览器上跑的网页它都可以测试。（不过我想应该是要它有支援的浏览器才行）。

4. 它只用 JavaScript 来撰写

   官方的原意是，因其测试程序码是在浏览器上所执行，所以除了使用 JS 外，不需和任何的语言或是驱动程序绑定。

   不过我觉得这边有一个隐含的意思，就是只要是可以编译成 JavaScript 的，它都可以接受，就像是我个人目前是使用 TypeScript 来撰写它，但其他的语言我就没试过了。

5. 它是一个 All-in-one 的框架

   就像 Angular 一样不需自己去整合各个工具或函式库，只要安装 Cypress ，其他的它会帮我们搞定。

6. 它适用於开发者和 QA

   它们想让测试驱动开发这件事情变得更加容易，也意即它们的测试将会又好写、写得又快。

7. 它执行地比其他框架要快的多

   官网的原意我觉得跟执行速度比较有关的地方是它可以并行运作并自动负载平衡这件事情。

至於浏览器支援度的部份，除了 Chrome 跟 FireFox 之外，也支援 Edge 、 Brave 甚至是 Electron 。

这麽多 E2E 自动化测试工具，你有比较喜欢哪一个吗？

除了上述介绍的这七种 E2E 自动化测试工具之外，我相信一定还有其他的 E2E 自动化测试工具是我没有介绍到的，不过族繁不及备载，如有遗珠之憾还请多加见谅。

本日小结

大家有没有发现，其实大多数的测试框架都是透过 W3C WebDriver 来进行操作或者是验证，比较特别一点的则是使用 Chrome 的 DevTools Protocol ，甚至是两个都可以用。

但在这些 E2E 自动化测试工具里，最特别的就是 Cypress ，而它其实也是我这次系列文要分享给大家的 E2E 自动化测试工具，後续的 E2E 测试也都将会分享如何使用 Cypress 来撰写。

明天我更进一步地分享如何使用 Cypress，除了让大家更进一步地了解这个框架之外，也让大家如果在阅读後续文章有任何不懂的地方可以回来复习。

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