使用Taiko + Gauge進行自動化測試(一)

初識Taiko

先來了解一下什么是Taiko:“Taiko是一個免費開源瀏覽器自動化工具,由ThoughtWorks開發。它是一個node的庫,Taiko使用Chrome Devtools API,它是為測試現代web應用程序而構建的?!?/p>

所以對于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 + `)。

x

新建完成后,您將看到這樣的窗口。(后續的操作將頻繁用到此操作,請進行熟悉)。

接下來,在終端輸入該命令:

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 //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的擴展也提供了創建的命令,不過由于兼容問題經?;岢魷盅映?,所以我建議您使用命令來初始化項目)。

x

初始化之后的項目如圖。

使用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('。

然后再看看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的呢? 如何編寫出更復雜的用例以及如何建立好的分區方式便團隊成員維護等問題 都會在后期文章中為大家進行介紹。

posted @ 2020-03-03 11:41  句幽  閱讀(...)  評論(...編輯  收藏