使用Taiko + Gauge進行自動化測試（一）
目錄
- 初識Taiko
- 環境安裝
- 嘗試Taiko
- taiko 執行過程
- 結合Gauge編寫用例
- 使用Gauge
- 總結
初識Taiko
先來了解一下什麼是Taiko：“Taiko是一個免費的開源瀏覽器自動化工具，由ThoughtWorks開發。它是一個node的庫，Taiko使用Chrome Devtools API，它是為測試現代web應用程式而構建的。”
所以對於Taiko來說： 1、它是為測試Web應用而生 2、它基於Chrome瀏覽器
關於Taiko簡介中所提到的ThoughtWorks，如果有不瞭解的同學可以跳轉至此進行了解（開發團隊可能也將成為您框架選型評估的決策項）。
環境安裝
在安裝Taiko之前，請確保您已經安裝了NodeJs環境。如果您還沒有安裝nodejs，請跳轉至Node官網 進行安裝。
對於開發工具，這裡強烈推薦您使用 VS Code（超強開發工具之一，不做解釋）。若您還未安裝VS Code，請跳轉至VS Code官網進行下載安裝。
在確保安裝完成前兩項基本支援環境之後，我們就需要來安裝Taiko了。
可以在桌面新建一個資料夾，比如“Taiko Demo”。開啟 VS Code，點選左上角的“檔案”，選擇“開啟資料夾”，並且選擇剛才建立的檔案。
在VS Code中開啟“終端”。終端是VS Code 對命令控制檯的整合，比如CMD,Powershell等，可以讓您不離開IDE就完成一系列操作。 選擇VS Code上方的 “終端”，選擇“新建終端”，當然您也可以使用快捷鍵（ctrl + shift + `）。
新建完成後，您將看到這樣的視窗。（後續的操作將頻繁用到此操作，請進行熟悉）。
接下來，在終端輸入該命令:
npm install -g taiko
該內容為向全域性環境安裝taiko Node包。安裝時間可能會有點久，因為taiko裡面內建了一個100MB+的Chromium瀏覽器。
嘗試Taiko
在終端輸入 taiko ，就可以進入taiko的命令控制檯。
如果您在VS Code終端得到錯誤提示:"因為在此係統上禁止執行指令碼。有關詳細資訊，請參閱 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。" 請使用該方法進行處理：《Powershell 無法執行指令碼的處理方法》。
進入taiko後您將得到這樣的顯示:
Version: 1.0.4 (Chromium:81.0.3994.0)
Type .api for help and .exit to quit
>
接下來輸入 openBrowser()，您將看到taiko會開啟一個瀏覽器。 然後執行 goto("baidu.com"),瀏覽器將跳轉到百度首頁。然後再次執行 write("部落格園 句幽")，瀏覽器將在輸入框內填充對於的內容。最後執行click("百度一下")，將模擬操作點選一下搜尋。
接下來輸入 .code ，您將看到剛才操作步驟的程式碼。 這是taiko為您自動生成的。
在VS Code中新建檔案“first-case.js”。然後將剛才taiko為我們生成的程式碼拷貝下來，複製到檔案中。
此時該檔案中的內容就相當於完成了我們第一個Case： “開啟瀏覽器，輸入內容，點選搜尋”。
taiko 執行過程
那麼現在您可能會問，taiko是怎麼執行的呢？ 如果我要擴充套件一個用例該如何擴充套件呢？
先來看看我們最開始輸入的幾個命令： openBrowser、goto、write、click。 這些都是taiko為我們提供的內建命令。
也就是說 taiko 其實就是為咱們提供了這些基於瀏覽器的基礎操作指令，而我們就可以用這些各種命令進行排列組合，完成對應的操作。比如 “點選”、“按壓”、“輸入”、“選擇元素”等等操作，而這些所有的操作命令都在 taiko 官網 為我們標註出來了。我們只需要選取需要的命令進行操作就可以了。
比如咱們更改一下操作:
await openBrowser();
await goto("baidu.com");
await write("句幽 部落格園");
await link('句幽- 部落格園').exists();
await click(link('句幽- 部落格園'));
這樣將會在百度搜索句幽的部落格園，然後在點選跳轉到句幽的部落格園。
而這每一個步驟都將會有一個驗證，比如await link('句幽- 部落格園').exists();，如果該頁面沒有獲取到名稱為"句幽- 部落格園"的元素，將會驗證失敗。
而將這些步驟都轉換為js程式碼，放置在咱們的first-demo.js 檔案中，然後在終端執行:
taiko first-demo.js
您將看到這樣的結果:
[PASS] Browser opened
[PASS] Navigated to URL http://baidu.com
[PASS] Wrote taiko test automation into the focused element.
[PASS] Clicked element matching text "百度一下" 1 times
[PASS] Browser closed
成功和失敗都可以直觀的顯示。 這些用例步驟放置到對應的檔案中，最後再執行就可以得到測試結果啦。
結合Gauge編寫用例
現在咱們已經瞭解到了 taiko 是怎麼使用的，它提供了各類操作瀏覽器的命令，供我們排列組合完成模擬操作，最終得到自動化測試結果。
那麼您覺得它夠簡單嗎？如果要和團隊一同維護和編輯用例，它很方便嗎？ 顯然不太好用。
所以此刻我們將介紹另外的一個工具：Gauge。 它將以 taiko 提供的命令操作為基礎，用更自然的操作方式來完成對應的操作。
在vs code的終端中輸入這樣的命令:
npm install -g @getgauge/cli
執行完成之後就完成了Gauge的安裝。當然在Gauge的官網，它還提供了一個安裝包。 以何種方式安裝取決於你，不過此處我強烈建議您使用 npm的安裝方式。
Gauge還提供了vs code的擴充套件支援，您可以在VS Code的擴充套件中（最左側按鈕）進行安裝。
接著，在桌面新建一個資料夾gauge-demo，然後在vscode中開啟。
在終端中輸入：
gauge init js
執行完成後，將會得到Gauge的初始化專案。（vs code的擴充套件也提供了建立的命令，不過由於相容問題經常會出現延遲，所以我建議您使用命令來初始化專案）。
初始化之後的專案如圖。
使用Gauge
在使用之前，先為大家說明一下，Gauge它充當著一個什麼樣的角色： 首先要明白，taiko為我們操作瀏覽器提供了便捷的指令，它使用js來編寫。但是這就為咱們測試團隊建立了一個障礙，首先全員都得熟悉JS的寫法，比如await等關鍵字等等，這無形提高了技術操作門檻。還有一點，我們所有的案例都將已大量js片段程式碼來維護，無疑增大了維護成本。
那麼gauge幹了一個什麼操作呢？ 它建立於taiko之上，允許測試人員將某某關鍵詞與某段JS相對應,比如（"跳轉" 對應 taiko 的Goto）。 這樣有什麼好處呢？ 團隊並不需要全員掌握JS了。頻繁的操作用例可以統一為共同的指令，增加可維護性。
所以現在來看看Gauge提供的初始化專案，您很快就能明白：
檢視test資料夾下面的step_implementation.js 檔案。這裡檢視它的部分程式碼:
step("Goto getgauge github page", async () => {
await goto('https://github.com/getgauge');
});也就是說'Goto getgauge github page' 對應著 taiko 的操作 await goto('https://github.com/getgauge');。
然後再看看specs資料夾下面的example.spec。對應部分為:
* Goto getgauge github page
這樣，用例編寫人員只需要寫出這樣的語句就可以完成操作了。而測試團隊中的某一小部分人員，負責js對應關係的編寫，功能測試人員負責用例的編寫，就能很快的完成測試工作。
接下來我們來嘗試使用它，在test資料夾下面的step_implementation.js 檔案中增加語句:
step("跳轉到句幽部落格", async () => {
await goto("baidu.com");
await write("句幽 部落格園");
await link('句幽- 部落格園').exists();
await click(link('句幽- 部落格園'));
});這部分程式碼熟悉嗎？ 這是咱們剛開始使用taiko所寫的程式碼。現在我們將它包裹起來，對應到了跳轉到句幽部落格 這一指令。然後再到specs資料夾下面的example.spec新增對應操作：
## 跳轉測試
* 跳轉到句幽部落格
文字指令 Gauge 採用了MarkDown的寫法。我們現在無需過去去了解markdown，只需要知道在spec檔案中： # 代表的測試專案名，比如您可以命名（# 考勤分析測試），而## 代表了測試用例，比如您可以命名(## 新增考勤人員)。 * 代表了步驟，步驟的名稱來源於您從js檔案裡的關鍵詞對應。
最後在終端中執行:
gauge run [你的spec的檔名]
就可以進行測試，最終生成測試報告。
如果您安裝了VS Code的Gauge外掛，那麼在進入'.spec'檔案後，您可以看到每一個用例上都有一個執行的按鈕。點選就可以執行用例。
總結
本文以一個小案例來為大家介紹了什麼是Taiko和Gauge，以及如何使用它。那麼和傳統的自動化測試相比，它有什麼優勢呢？以及在自動化測試框架百花齊放的今天，它和其它的框架相比有什麼優劣勢呢？（比如和Robot Framework相比）。以BDD（行為驅動開發）為核心理念的Taiko，是如何踐行BDD的呢？ 如何編寫出更復雜的用例以及如何建立好的分割槽方式便團隊成員維護等問題 都會在後期文章中為大家進行介紹。