新一代支持BDD的測(cè)試框架Gauge + Taiko

本文轉(zhuǎn)自【林子的空間】

BDD是什么

BDD这橙，Behavior Driven Development陡厘，行為驅(qū)動(dòng)開發(fā)灭必。

如果你不是很了解BDD，可以參考我四年前的一篇文章說起B(yǎng)DD掸刊，你會(huì)想到什么免糕，其中介紹過BDD的理論和應(yīng)用。

我們可以這樣來概括BDD：

BDD采用統(tǒng)一的領(lǐng)域特定語言（DSL）來描述業(yè)務(wù)場(chǎng)景和用戶行為忧侧，讓團(tuán)隊(duì)各個(gè)不同角色對(duì)業(yè)務(wù)需求有一致認(rèn)識(shí)石窑，從而做到更有效的溝通和更高效的協(xié)作；
BDD的目的不是自動(dòng)化測(cè)試蚓炬，但是BDD可以有效指導(dǎo)自動(dòng)化測(cè)試松逊，基于BDD的自動(dòng)化測(cè)試相當(dāng)于維護(hù)了一份需求活文檔，對(duì)項(xiàng)目需求的維護(hù)和管理非常有價(jià)值肯夏。

BDD應(yīng)用框架之Cucumber

BDD的應(yīng)用

BDD是為解決下面三個(gè)方面的問題而生：

協(xié)作：多個(gè)角色在一個(gè)團(tuán)隊(duì)经宏，如何從一致理解需求開始高效協(xié)作？
語言：不同的角色業(yè)務(wù)驯击、開發(fā)和測(cè)試人員分別說自己的語言烁兰，如何統(tǒng)一語言，更有效的溝通徊都？
文檔：編寫和維護(hù)的成本都很高沪斟，如何低成本的維護(hù)一份有價(jià)值的文檔？

Cucumber是一款支持BDD的框架暇矫，有助于幫助團(tuán)隊(duì)解決以上問題主之。

Cucumber支持用自然語言描述業(yè)務(wù)場(chǎng)景，需要遵循Given-When-Then的格式袱耽，這樣就可以容易的對(duì)應(yīng)到自動(dòng)化測(cè)試的3A步驟Arrange-Act-Assert杀餐，從而實(shí)現(xiàn)業(yè)務(wù)場(chǎng)景的自動(dòng)化測(cè)試。

Cucumber的理想是將可執(zhí)行的需求規(guī)范朱巨、自動(dòng)化測(cè)試和活文檔有機(jī)的結(jié)合，如下圖所示：

https://cucumber.io/docs/guides/overview/

理想很豐滿枉长，現(xiàn)實(shí)很骨感冀续。Cucumber在實(shí)際應(yīng)用中的情況又如何呢？

Cucumber的痛點(diǎn)

Cucumber框架實(shí)現(xiàn)Web自動(dòng)化測(cè)試包括兩個(gè)部分：Feature（特性）文件和Step Definition（測(cè)試實(shí)現(xiàn)）必峰，在實(shí)際應(yīng)用中人們普遍感覺到它的復(fù)雜洪唐。

Cucumber特別強(qiáng)調(diào)的是協(xié)作，F(xiàn)eature文件通常由偏業(yè)務(wù)的人員來編寫吼蚁，要求遵循Given-When-Then的格式凭需。這種固定的語法對(duì)編寫人員要求較高问欠，寫起來比較費(fèi)勁，尤其對(duì)新人不友好粒蜈，很多團(tuán)隊(duì)反映要寫出好的Feature文件特別費(fèi)時(shí)費(fèi)力顺献。
Cucumber支持多種語言實(shí)現(xiàn)測(cè)試代碼，但它本身并不能實(shí)現(xiàn)自動(dòng)化枯怖，對(duì)于Web自動(dòng)化測(cè)試需要跟其他自動(dòng)化工具結(jié)合注整，比如Selenium-WebDriver。實(shí)現(xiàn)代碼不僅復(fù)雜度硝，還有著元素定位難肿轨、執(zhí)行時(shí)間長(zhǎng)、不夠穩(wěn)定的痛點(diǎn)蕊程。

Cucumber-js+Selenium WebDriver實(shí)現(xiàn)的代碼長(zhǎng)這樣：

Feature定義:

Feature: Google Search
  Scenario: Finding some cheese
    Given I am on the Google search page
    When I search for "Cheese!"
    Then the page title should start with "cheese"

Steps實(shí)現(xiàn)

Given('I am on the Google search page', async function () {
    await driver.get('http://www.google.com');
});

When('I search for {string}', async function (searchTerm) {
    const element = await driver.findElement(By.name('q'));
    element.sendKeys(searchTerm, Key.RETURN);
    element.submit();
});

Then('the page title should start with {string}', {timeout: 60 * 1000}, async function (searchTerm) {
    const title = await driver.getTitle();
    const isTitleStartWithCheese = title.toLowerCase().lastIndexOf(`${searchTerm}`, 0) === 0;
    expect(isTitleStartWithCheese).to.equal(true);
});

新一代BDD框架

藍(lán)鯨項(xiàng)目曾經(jīng)就是用Cucumber+Selenium WebDriver實(shí)現(xiàn)的UI層自動(dòng)化測(cè)試椒袍，由于上述痛點(diǎn)，大家覺得UI自動(dòng)化測(cè)試越來越難寫藻茂，我也因此對(duì)BDD喪失了信心驹暑。

自從遇到了兩款新的工具Gauge+Taiko，我又重新對(duì)Web系統(tǒng)的實(shí)現(xiàn)基于BDD的自動(dòng)化測(cè)試燃起了希望捌治。

Gauge

Gauge是一款開源的輕量級(jí)跨平臺(tái)自動(dòng)化測(cè)試工具岗钩，它的愿景是用更少的代碼、更少的維護(hù)工作實(shí)現(xiàn)更多的自動(dòng)化測(cè)試肖油，有如下特性：

采用Markdown格式兼吓，支持用自然語言編寫Spec，語法自由森枪，編寫工作簡(jiǎn)單易上手视搏，不管是對(duì)業(yè)務(wù)人員還是技術(shù)人員都很友好；寫出來的文檔格式清晰县袱，很好維護(hù)浑娜。
Gauge本身可以實(shí)現(xiàn)對(duì)Web頁面的訪問和控制，支持多種語言式散，各種API封裝的很好筋遭，代碼實(shí)現(xiàn)部分比Selenium要簡(jiǎn)單很多，尤其對(duì)于編程技能不是那么強(qiáng)的QA來講非常友好暴拄，易上手漓滔，代碼的可讀性也更強(qiáng)一些。

Taiko

Taiko也是一款開源瀏覽器自動(dòng)化測(cè)試工具,它的特性如下：

REPL.gif

交互式的錄制體驗(yàn)乖篷。Taiko提供類似于irb的REPL响驴，直接輸入命令，可以看到瀏覽器執(zhí)行結(jié)果撕蔼，同時(shí)后續(xù)還可以把成功執(zhí)行的命令直接生成JS代碼豁鲤，非常方便秽誊。
Taiko不僅提供常見UI自動(dòng)化測(cè)試工具那樣根據(jù)Id、name琳骡、CSS锅论、Xpath等方式選擇頁面元素的功能，還提供智能選擇器（Smart selector）日熬，支持直接根據(jù)顯示的文本來定位各種類型的頁面元素棍厌，同時(shí)還有支持上、下竖席、左耘纱、右這種根據(jù)某個(gè)元素的相對(duì)方位去定位元素的API，很好的解決UI測(cè)試頁面元素定位難的問題毕荐。
Taiko采用隱式的等待（Wait）方式束析，也可以手動(dòng)設(shè)置超時(shí)時(shí)間以防有些訪問等待時(shí)間過長(zhǎng)。這種隱式等待相比其他自動(dòng)化工具需要手動(dòng)設(shè)置等待時(shí)間的顯式等待方式要更高效憎亚、更穩(wěn)定员寇。
與Gauge的完美結(jié)合：Taiko在REPL里執(zhí)行的瀏覽器操作步驟，可以通過一個(gè)簡(jiǎn)單的命令直接生產(chǎn)Gauge支持的Step第美，只需要再去簡(jiǎn)單的加上step名稱就可以蝶锋，操作及其簡(jiǎn)單。

Gauge+Taiko的代碼長(zhǎng)這樣：

Spec定義

# Google Search

This is an executable specification file. This file follows markdown syntax. 
Every heading in this file denotes a scenario. 
Every bullet point denotes a step.
To execute this specification, use
    npm test

## Finding some cheese
* Goto Google search page
* Google for "Cheese!"
* Page title starts with "Cheese"

Steps實(shí)現(xiàn)

step("Goto Google search page", async function() {
    await goto("www.google.com");
});

step("Google for <query>", async (query) => {
    await write(query);
    await click("Google 搜尋");
});

step("Page title starts with <content>", async (content) => {
    await title().then((pageTitle) =>{
        assert.ok(pageTitle.startsWith(content));
    });
});

總結(jié)

協(xié)作是人的問題什往，工具可以起到輔助作用扳缕，但是不能解決根本問題，過于嚴(yán)格的工具缺乏靈活性别威，反而阻礙了高效協(xié)作的可能躯舔。

Gauge不強(qiáng)調(diào)協(xié)作，可以作為自動(dòng)化測(cè)試工具獨(dú)立存在省古，同時(shí)又支持高效協(xié)作粥庄、支持實(shí)現(xiàn)BDD，是一款靈活性更好的框架豺妓。它的秘密武器Taiko是一款優(yōu)秀的Web UI自動(dòng)化工具惜互，兩者的結(jié)合堪稱完美，讓需求規(guī)范琳拭、自動(dòng)化測(cè)試和活文檔的有機(jī)結(jié)合真正成為可能载佳。

本文只是將Gauge和Taiko跟Cucumber框架從對(duì)BDD的角度做簡(jiǎn)單的對(duì)比，更多的關(guān)于Gauge和Taiko的高級(jí)特性臀栈，請(qǐng)參考【延伸閱讀】部分相關(guān)文章。