使用Taiko + Gauge進行自動化測試（一）
- 2020 年 3 月 3 日
- 筆記
初識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的呢？ 如何編寫出更複雜的用例以及如何建立好的分區方式便團隊成員維護等問題 都會在後期文章中為大家進行介紹。
