使用Taiko + Gauge進行自動化測試（一）

[toc]

初識Taiko

先來了解一下什麼是Taiko：「Taiko是一個免費的開源瀏覽器自動化工具，由ThoughtWorks開發。它是一個node的庫，Taiko使用Chrome Devtools API，它是爲測試現代web應用程序而構建的。」

因此對於Taiko來講： 一、它是爲測試Web應用而生 二、它基於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的呢？ 如何編寫出更復雜的用例以及如何創建好的分區方式便團隊成員維護等問題 都會在後期文章中爲你們進行介紹。

原文出處：https://www.cnblogs.com/uoyo/p/12401366.html