在這個各種前端框架、開發工具層出不窮、百花齊放、百鳥齊鳴的美好時代， E2E 自動化測試工具的選擇自然也很多。
今天我們會先來初步了解一下目前有哪些 E2E 自動化測試工具，讓大家在未來需要時，能夠以最短的時間找到最貼近自己需求的工具。
Selenium 是老牌的測試工具，出道已久且頗富盛名的它擁有豐富的 API 與衍生的工具軟體，可使用許多種語言撰寫，如：C#、JavaScript、Java、 Python 、 Ruby 。
主要是藉由 W3C WebDriver 所提供的 API (以前叫 Selenium WebDriver)。
TestCafe 的主打是安裝與設置快速，且可以使用相對於 Selenium 來說，較少、較簡潔的程式碼來做到相同的操作。
主要原因是因為他們並不是以 W3C WebDriver 為基底，而是基於 Node.js 之上所開發的。
最強大的地方在於他們支援幾乎是目前市面上所有的瀏覽器， Chrome 跟 Firefox 我就不提了，其他還有 IE 、 Edge 、 Safari 、 Opera ，是至是跨瀏覽器的測試工具平台 BrowserStack 與 LambdaTest 。
NightWatch 也是用 Node.js 所寫的，不過跟 TestCafe 不一樣的是，雖然是用 Node.js 所寫，但其底層還是使用 W3C WebDriver API 來驅動瀏覽器執行操作。
不過它們家也是說它們可以在一分鐘內快速完成設定並啟動服務，有興趣的朋友可以試試看。
不過它們家的貓頭鷹 Logo 很可愛！
Puppeteer 也是一個基於 Node.js 所開發的 E2E 測試工具，不過他是直接透過 Chrome 的 DevTools Protocol 來操控 Chrome 或 Chromium ，而且它預設會跑在 Headless 的模式下，非常方便。
除此之外，它所主打的功能有：
Angular 有個 SSG （Static Site Generation） 的框架 Scully 就是基於這件事情上所做出來的。
它們還有提供一個線上的 Playground ，大家有興趣可以玩玩看。
WebDriverIO 號稱是下一個世代的 E2E 測試工具，它既可以使用 WebDriver 來達到跨瀏覽器測試的功能，也能像 Puppeteer 那樣使用 Chrome DevTools Protocol ，非常厲害。
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 有一句非常有趣的標語，叫做：
Test your code, not your patience.
大概是知道大家寫 E2E 測試時都寫的滿痛苦嗎？
此外，它還有一句標語叫做：
A test runner built for humans.
這是因為它們的主張 ─ 開發者友善，不管你是 QA 還是一般工程師都是一樣。
而且它還覺得它有七個地方跟別的 E2E 自動化測試工具不一樣：
它不使用 Selenium 框架
因為它認為大多數的 E2E 測試工具都是基於 Selenium 的框架下所運作，這就是為什麼它們都會有相同的問題。
它專注於非常出色地進行 E2E 測試
因為它們只想專注地在為 Web Application 撰寫 E2E 測試時，提供做出色的開發者體驗。
它適用於任何前端框架或是網站
只要是可以在瀏覽器上跑的網頁它都可以測試。（不過我想應該是要它有支援的瀏覽器才行）。
它只用 JavaScript 來撰寫
官方的原意是，因其測試程式碼是在瀏覽器上所執行，所以除了使用 JS 外，不需和任何的語言或是驅動程式綁定。
不過我覺得這邊有一個隱含的意思，就是只要是可以編譯成 JavaScript 的，它都可以接受，就像是我個人目前是使用 TypeScript 來撰寫它，但其他的語言我就沒試過了。
它是一個 All-in-one 的框架
就像 Angular 一樣不需自己去整合各個工具或函式庫，只要安裝 Cypress ，其他的它會幫我們搞定。
它適用於開發者和 QA
它們想讓測試驅動開發這件事情變得更加容易，也意即它們的測試將會又好寫、寫得又快。
它執行地比其他框架要快的多
官網的原意我覺得跟執行速度比較有關的地方是它可以併行運作並自動負載平衡這件事情。
至於瀏覽器支援度的部份，除了 Chrome 跟 FireFox 之外，也支援 Edge 、 Brave 甚至是 Electron 。
這麼多 E2E 自動化測試工具，你有比較喜歡哪一個嗎？
除了上述介紹的這七種 E2E 自動化測試工具之外，我相信一定還有其他的 E2E 自動化測試工具是我沒有介紹到的，不過族繁不及備載，如有遺珠之憾還請多加見諒。
大家有沒有發現，其實大多數的測試框架都是透過 W3C WebDriver 來進行操作或者是驗證，比較特別一點的則是使用 Chrome 的 DevTools Protocol ，甚至是兩個都可以用。
但在這些 E2E 自動化測試工具裡，最特別的就是 Cypress ，而它其實也是我這次系列文要分享給大家的 E2E 自動化測試工具，後續的 E2E 測試也都將會分享如何使用 Cypress 來撰寫。
明天我更進一步地分享如何使用 Cypress，除了讓大家更進一步地了解這個框架之外，也讓大家如果在閱讀後續文章有任何不懂的地方可以回來複習。
如果你有任何的問題或是回饋，還請麻煩留言給我讓我知道，感謝大家！
iThome鐵人賽
看影片追技術