taiko是一個免費(fèi)的開源瀏覽器自動化工具，由ThoughtWorks開發(fā)。它是一個node的庫，Taiko使用Chrome Devtools API，它是為測試現(xiàn)代web應(yīng)用程序而構(gòu)建的。

初識Taiko

先來了解一下什么是Taiko：“Taiko是一個免費(fèi)的開源瀏覽器自動化工具，由ThoughtWorks開發(fā)。它是一個node的庫，Taiko使用Chrome Devtools API，它是為測試現(xiàn)代web應(yīng)用程序而構(gòu)建的。”

所以對于Taiko來說： 1、它是為測試Web應(yīng)用而生 2、它基于Chrome瀏覽器

關(guān)于Taiko簡介中所提到的ThoughtWorks，如果有不了解的同學(xué)可以跳轉(zhuǎn)至此進(jìn)行了解（開發(fā)團(tuán)隊可能也將成為您框架選型評估的決策項）。

環(huán)境安裝

在安裝Taiko之前，請確保您已經(jīng)安裝了NodeJs環(huán)境。如果您還沒有安裝nodejs，請?zhí)D(zhuǎn)至Node官網(wǎng) 進(jìn)行安裝。

對于開發(fā)工具，這里強(qiáng)烈推薦您使用 VS Code（超強(qiáng)開發(fā)工具之一，不做解釋）。若您還未安裝VS Code，請?zhí)D(zhuǎn)至VS Code官網(wǎng)進(jìn)行下載安裝。

在確保安裝完成前兩項基本支持環(huán)境之后，我們就需要來安裝Taiko了。

可以在桌面新建一個文件夾，比如“Taiko Demo”。打開 VS Code，點擊左上角的“文件”，選擇“打開文件夾”，并且選擇剛才創(chuàng)建的文件。

在VS Code中打開“終端”。終端是VS Code 對命令控制臺的集成，比如CMD,Powershell等，可以讓您不離開IDE就完成一系列操作。 選擇VS Code上方的 “終端”，選擇“新建終端”，當(dāng)然您也可以使用快捷鍵（ctrl + shift + `）。

新建完成后，您將看到這樣的窗口。（后續(xù)的操作將頻繁用到此操作，請進(jìn)行熟悉）。

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

npm install -g taiko

該內(nèi)容為向全局環(huán)境安裝taiko Node包。安裝時間可能會有點久，因為taiko里面內(nèi)置了一個100MB+的Chromium瀏覽器。

嘗試Taiko

在終端輸入 taiko ，就可以進(jìn)入taiko的命令控制臺。

如果您在VS Code終端得到錯誤提示:"因為在此系統(tǒng)上禁止運(yùn)行腳本。有關(guān)詳細(xì)信息，請參閱 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。" 請使用該方法進(jìn)行處理：《Powershell 無法運(yùn)行腳本的處理方法》。

進(jìn)入taiko后您將得到這樣的顯示:

Version: 1.0.4 (Chromium:81.0.3994.0)
Type .api for help and .exit to quit
>

接下來輸入 openBrowser()，您將看到taiko會開啟一個瀏覽器。 然后執(zhí)行 goto("baidu.com"),瀏覽器將跳轉(zhuǎn)到百度首頁。然后再次執(zhí)行 write("博客園 句幽")，瀏覽器將在輸入框內(nèi)填充對于的內(nèi)容。最后執(zhí)行click("百度一下")，將模擬操作點擊一下搜索。

接下來輸入 .code ，您將看到剛才操作步驟的代碼。 這是taiko為您自動生成的。

在VS Code中新建文件“first-case.js”。然后將剛才taiko為我們生成的代碼拷貝下來，復(fù)制到文件中。

此時該文件中的內(nèi)容就相當(dāng)于完成了我們第一個Case： “打開瀏覽器，輸入內(nèi)容，點擊搜索”。

taiko 執(zhí)行過程

那么現(xiàn)在您可能會問，taiko是怎么執(zhí)行的呢？ 如果我要擴(kuò)展一個用例該如何擴(kuò)展呢？

先來看看我們最開始輸入的幾個命令： openBrowser、goto、write、click。 這些都是taiko為我們提供的內(nèi)置命令。

也就是說 taiko 其實就是為咱們提供了這些基于瀏覽器的基礎(chǔ)操作指令，而我們就可以用這些各種命令進(jìn)行排列組合，完成對應(yīng)的操作。比如 “點擊”、“按壓”、“輸入”、“選擇元素”等等操作，而這些所有的操作命令都在 taiko 官網(wǎng) 為我們標(biāo)注出來了。我們只需要選取需要的命令進(jìn)行操作就可以了。

比如咱們更改一下操作:

await openBrowser();
await goto("baidu.com");
await write("句幽 博客園");
await link('句幽- 博客園').exists();
await click(link('句幽- 博客園'));

這樣將會在百度搜索句幽的博客園，然后在點擊跳轉(zhuǎn)到句幽的博客園。

而這每一個步驟都將會有一個驗證，比如await link('句幽- 博客園').exists();，如果該頁面沒有獲取到名稱為"句幽- 博客園"的元素，將會驗證失敗。

而將這些步驟都轉(zhuǎn)換為js代碼，放置在咱們的first-demo.js 文件中，然后在終端運(yùn)行:

taiko first-demo.js

您將看到這樣的結(jié)果:

[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

成功和失敗都可以直觀的顯示。 這些用例步驟放置到對應(yīng)的文件中，最后再運(yùn)行就可以得到測試結(jié)果啦。

結(jié)合Gauge編寫用例

現(xiàn)在咱們已經(jīng)了解到了 taiko 是怎么使用的，它提供了各類操作瀏覽器的命令，供我們排列組合完成模擬操作，最終得到自動化測試結(jié)果。

那么您覺得它夠簡單嗎？如果要和團(tuán)隊一同維護(hù)和編輯用例，它很方便嗎？ 顯然不太好用。

所以此刻我們將介紹另外的一個工具：Gauge。 它將以 taiko 提供的命令操作為基礎(chǔ)，用更自然的操作方式來完成對應(yīng)的操作。

在vs code的終端中輸入這樣的命令:

npm install -g @getgauge/cli

運(yùn)行完成之后就完成了Gauge的安裝。當(dāng)然在Gauge的官網(wǎng)，它還提供了一個安裝包。 以何種方式安裝取決于你，不過此處我強(qiáng)烈建議您使用 npm的安裝方式。

Gauge還提供了vs code的擴(kuò)展支持，您可以在VS Code的擴(kuò)展中（最左側(cè)按鈕）進(jìn)行安裝。

接著，在桌面新建一個文件夾gauge-demo，然后在vscode中打開。

在終端中輸入：

gauge init js

運(yùn)行完成后，將會得到Gauge的初始化項目。（vs code的擴(kuò)展也提供了創(chuàng)建的命令，不過由于兼容問題經(jīng)常會出現(xiàn)延遲，所以我建議您使用命令來初始化項目）。

初始化之后的項目如圖。

使用Gauge

在使用之前，先為大家說明一下，Gauge它充當(dāng)著一個什么樣的角色： 首先要明白，taiko為我們操作瀏覽器提供了便捷的指令，它使用js來編寫。但是這就為咱們測試團(tuán)隊建立了一個障礙，首先全員都得熟悉JS的寫法，比如await等關(guān)鍵字等等，這無形提高了技術(shù)操作門檻。還有一點，我們所有的案例都將已大量js片段代碼來維護(hù)，無疑增大了維護(hù)成本。

那么gauge干了一個什么操作呢？ 它建立于taiko之上，允許測試人員將某某關(guān)鍵詞與某段JS相對應(yīng),比如（"跳轉(zhuǎn)" 對應(yīng) taiko 的Goto）。 這樣有什么好處呢？ 團(tuán)隊并不需要全員掌握J(rèn)S了。頻繁的操作用例可以統(tǒng)一為共同的指令，增加可維護(hù)性。

所以現(xiàn)在來看看Gauge提供的初始化項目，您很快就能明白：

查看test文件夾下面的step_implementation.js 文件。這里查看它的部分代碼:

step("Goto getgauge github page", async () => {
    await goto('https://github.com/getgauge');
});

也就是說'Goto getgauge github page' 對應(yīng)著 taiko 的操作 await goto('https://github.com/getgauge');。

然后再看看specs文件夾下面的example.spec。對應(yīng)部分為:

* Goto getgauge github page

這樣，用例編寫人員只需要寫出這樣的語句就可以完成操作了。而測試團(tuán)隊中的某一小部分人員，負(fù)責(zé)js對應(yīng)關(guān)系的編寫，功能測試人員負(fù)責(zé)用例的編寫，就能很快的完成測試工作。

接下來我們來嘗試使用它，在test文件夾下面的step_implementation.js 文件中增加語句:

step("跳轉(zhuǎn)到句幽博客", async () => {
    await goto("baidu.com");
    await write("句幽 博客園");
    await link('句幽- 博客園').exists();
    await click(link('句幽- 博客園'));
});

這部分代碼熟悉嗎？ 這是咱們剛開始使用taiko所寫的代碼。現(xiàn)在我們將它包裹起來，對應(yīng)到了跳轉(zhuǎn)到句幽博客 這一指令。然后再到specs文件夾下面的example.spec添加對應(yīng)操作：

## 跳轉(zhuǎn)測試
* 跳轉(zhuǎn)到句幽博客

文本指令 Gauge 采用了MarkDown的寫法。我們現(xiàn)在無需過去去了解markdown，只需要知道在spec文件中： # 代表的測試項目名，比如您可以命名（# 考勤分析測試），而## 代表了測試用例，比如您可以命名(## 添加考勤人員)。 * 代表了步驟，步驟的名稱來源于您從js文件里的關(guān)鍵詞對應(yīng)。

最后在終端中執(zhí)行:

gauge run [你的spec的文件名]

就可以進(jìn)行測試，最終生成測試報告。

如果您安裝了VS Code的Gauge插件，那么在進(jìn)入'.spec'文件后，您可以看到每一個用例上都有一個運(yùn)行的按鈕。點擊就可以執(zhí)行用例。

總結(jié)

本文以一個小案例來為大家介紹了什么是Taiko和Gauge，以及如何使用它。那么和傳統(tǒng)的自動化測試相比，它有什么優(yōu)勢呢？以及在自動化測試框架百花齊放的今天，它和其它的框架相比有什么優(yōu)劣勢呢？（比如和Robot Framework相比）。以BDD（行為驅(qū)動開發(fā)）為核心理念的Taiko，是如何踐行BDD的呢？ 如何編寫出更復(fù)雜的用例以及如何建立好的分區(qū)方式便團(tuán)隊成員維護(hù)等問題 都會在后期文章中為大家進(jìn)行介紹。