在 CukeTest 最新版 1.6.0 中更新了一個新功能——鏈接示例表，能夠將外部維護的測試用例數據文件直接鏈接到示例表中使用。

了解行為驅動(BDD)或Cucumber的同學都知道，長久以來，Cucumber里面的場景大綱可以通過內嵌的數據表來驅動。這也意味著每次修改數據需要手動編輯feature文件，改動示例表的數據。在持續集成越來越普及的今天，很多用戶傾向于將數據獨立維護。因此原來內嵌feature文件的方式會有使用上的不便。上述的新功能是針對BDD/Cucumber的重要革新，解決了數據維護使用上的問題。

同時它的出現使得場景大綱這一自動化測試常用的概念獲得了更廣泛的能力——使用動態數據驅動自動化操作：當你需要增刪自動化操作時，只需要修改外部的表格文件即可，無需修改任何代碼或feature文件。

那么首先讓我們簡單了解一下鏈接示例表在測試用例方面的應用，然后再來了解如何使用鏈接示例表的自動化操作管理能力吧！

示例表如何作用于測試

示例表是場景大綱的數據部分，由于場景大綱適合用于這樣的場景：測試中需要大量同樣的操作來驗證在被測應用中的結果是否正確。比如針對登錄、注冊界面的后端校驗數據。這樣的場景如果使用常規的場景和步驟來實現，需要寫非常多重復的內容，維護起來也相當的費力。以一個簡單的加法場景說明，將加號兩邊的數字以及預期加法結果放到示例表中，代碼中計算兩數之和，再與預期結果相比較。那么示例表呈現如下效果：

示例表

而其對應的場景大綱定義如下:

場景大綱

在項目運行時，表中的每一行數據都會作為參數與場景大綱組合成一個場景，比如以上示例表中共有三行數據，運行時就會解析為三個場景來運行，部分報告截圖如下：

場景大綱運行結果

運行結果中有一個場景發生了錯誤，是因為示例表中第三行本身的數據就是無法通過測試的，即反面用例。

在先前的 CukeTest 版本中，示例表已經支持編輯以及數據的導入導出，但仍然不足以滿足用戶的某些需求，比如擁有大量不同常見的測試用例表的情況，需要反復的導入新的數據。而現在，只要改用鏈接示例表就可以滿足這些需求了！

將鏈接示例表用于 Web 自動化測試

下面我們將鏈接示例表用于 Web 測試，被測應用是一個簡單的網上點單頁面，實現一個簡單的點單功能驗證，場景與步驟的定義如下:

# language: zh-CN
功能: 網上點單
使用https://cuketest.github.io/apps/shopping-cart/ 進行在線點單的自動化

場景: 訪問鏈接
假如跳轉到"https://cuketest.github.io/apps/shopping-cart/"

場景大綱: 點單
當選擇容量""
那么單價是否為""
那么購買份
例子:
#data_source: support\web.csv
場景: 驗證購物車總價
當讀取csv文件"features/support/web.csv"并計算總價
那么驗證購物車的總價
那么關閉瀏覽器

您應該注意到，對于普通的場景大綱而言，數據是嵌入在feature文件里的。而這里，我們使用了“#data_source: support\web.csv”直接引用了這個csv文件，而這個web.csv文件的內容如下:

category, capacity, count, price
Scotch.io Signature Lager, 30 Pack, 2, 19.99
Scotch.io Signature Lager, 40oz Bottle, 1, 4.99
Scotch.io Signature Lager, 6 Pack, 4, 12.99

通過鏈接到外部文件作為示例表，能夠非常靈活的進行用例管理。步驟定義的代碼如下:

const?assert?=?require('assert');
const?{?Util?}?=?require('leanpro.common');
var?{?Given,?When,?Then?}?=?require('cucumber');
const?{driver}?=?require('../support/web_driver');
const?{By}?=?require("selenium-webdriver")

Given("跳轉到{string}",?async?function?(url)?{
????await?driver.get(url);
});

When("選擇容量{string}",?async?function?(capacity)?{
????driver.findElement({css:'select'}).click();
????//?xpath選擇器定位內容為capacity的option標簽
????driver.findElement({?xpath:?`//option[text()="${capacity}"]`}).click();
});

Then("單價是否為{string}",?async?function?(price)?{
????let?value?=?await?driver.findElement({?css:".flux-product-detail?.price"}).getText();
????assert.strictEqual(value.slice(8),?price);
});

Then("購買{int}份",?async?function?(count)?{
????for(let?i=0;?i????????await?driver.findElement({?xpath:?'//button[text()="Add?To?Cart"]'}).click();
????}
});
When("讀取csv文件{string}并計算總價",?async?function?(filePath)?{
????let?table?=?await?Util.loadCsvFile(filePath);
????let?total?=?0;
????table.forEach(row?=>{
????????let?count?=?parseInt(row.count,?10);
????????let?price?=?parseFloat(row.price);
????????total?+=?count?*?price;
????})
????this.total?=?total;
});

Then("驗證購物車的總價",?async?function?()?{
????let?cartTotal?=?await?driver.findElement({?className:"total"}).getText();
????this.attach(`購物車總價為:?${cartTotal}`)
????assert.strictEqual(this.total,?parseFloat(cartTotal.slice(8)));
});

Then("關閉瀏覽器",?async?function?()?{
????driver.quit();
});

這里用到了兩次 xpath 選擇器的text()方法，能夠找到指定內容的元素，非常適合配合用例中比較易讀的數據形式，比如在本次的場景中，要修改下拉框中不同的容量，那么在樣例中，相比與維護選中第 N 個容量，還是直接維護容量的規格更合適，因為列表的順序在很多時候都是不夠可靠的。特別是針對、

、這種通常可用的其它屬性不豐富的標簽。

本個例子中驗證的是點單功能，如果讀者有興趣可以復制源碼，自行嘗試一下驗證庫存功能。這里為了用戶復制方便，直接使用了feature文件的源碼。實際使用時，在CukeTest中可以在可視化視圖中通過點擊，直接添加鏈接示例表。

將鏈接示例表用于內容爬取

CukeTest 作為一個自動化測試的開發工具，也能夠適用于很多其它的自動化場景，在結合鏈接示例表以后，其能夠覆蓋的場景更多了，并且更加的實用了。下面我們同樣以建立內容聚合平臺的自動爬取為例，(參考歷史文章：教你搭建自己的內容聚合網站)。相信還有部分讀者對它使用 Puppeteer 搭建內容聚合平臺的文章有印象，這次我們換 Selenium 為引擎，實現自動抓取指定網站中的搜索結果。

相比于之前那篇文章的實現，加入鏈接示例表后，爬取的網站不再需要在feature代碼中維護，而是直接在數據文件中添加網站鏈接即可。

先讓我們來看一下鏈接示例表的.csv文件:

抓取網站的 csv

需要注意的是search_url這一列，其中的%s作為搜索關鍵詞的占位符，場景運行中會替換為完整的搜索鏈接，直接跳轉到搜索結果的頁面。(使用%s作為搜索關鍵詞的占位符的語法借鑒了 Chrome 創建自定義搜索引擎的語法，感興趣的讀者可以了解一下。)

接著是title_selector跟title_url_selector兩列，前者是找每條搜索結果的元素，后者找解析搜索結果中的標題(通常也是指向搜索結果的鏈接)。這種先找大塊的內容，再解析每一塊內容得到想要的數據，是爬蟲常用的一種技巧。

通過這樣的一張表，很好的將爬蟲管理了起來，對于大部分的網站都夠用了，下面讓我們看看如何針對這張表定義場景跟步驟描述:

# language: zh-CN
@scrap
功能: 抓取視頻和文章
使用示例表來進行視頻文章的抓取(以嗶哩嗶哩與掘金為例)

場景大綱: 抓取并保存在本地
當正在抓取""網站
那么搜索關鍵詞""由""
那么使用選擇器""抓取所有內容
那么解析鏈接""中的標題
那么把內容保存到本地
例子:
#data_source: support\scraper.csv
場景: 退出瀏覽器
那么關閉瀏覽器

步驟定義如下:

const?assert?=?require('assert');
const?{?Util?}?=?require('leanpro.common');
var?{?Given,?When,?Then?}?=?require('cucumber');
const?{?driver?}?=?require('../support/web_driver');
const?{?By,?until?}?=?require("selenium-webdriver");
const?fs?=?require("fs");
const?path?=?require("path");

When("正在抓取{string}網站",?async?function?(site)?{
????//?顯示在報告中
});

Then("搜索關鍵詞{string}由{string}",?async?function?(keyword,?search_url)?{
????//?使用關鍵詞替換鏈接中的%s
????let?url?=?search_url.replace('%s',?keyword);
????await?driver.get(url);
});

Then("使用選擇器{string}抓取所有內容",?async?function?(selector)?{
????await?driver.wait(until.elementsLocated({?css:?selector?}),?5000,?"超出等待時間");
????this.blockList?=?await?driver.findElements({css:?selector});
});
Then("解析鏈接{string}中的標題",?async?function?(selector)?{
????let?itemListPromise?=?this.blockList.map(async(block)?=>?{
????????let?title?=?await?block.findElement({?css:?selector?}).getText();
????????let?url?=?await?block.findElement({?css:?selector?}).getAttribute("href");
????????return?{title,?url};
????})
????let?itemList?=?await?Promise.all(itemListPromise);
????this.attach(JSON.stringify(itemList,?null,?'\t'));
????this.itemList?=?itemList;
????this.attach(JSON.stringify(itemList,?null,?'\t'));
});

Then("把內容保存到本地",?async?function?()?{
????let?filePath?=?path.resolve(__dirname,?'..\\support\\data.csv');
????if(!fs.existsSync(filePath)){
????????fs.writeFileSync(filePath,?'',?{encoding:"utf-8"});
????}
????let?existedData?=?await?Util.loadCsvFile(filePath);
????let?jointData?=?existedData.concat(this.itemList);
????Util.saveToCsvFile(jointData,?filePath);
});

在抓取結束后，將抓取到的內容保存到本地的表格文件中以供其它用途，運行結果生成的data.csv文件內容如下:

爬取結果

這個爬蟲中所有的搜索結果都是簡單的寫入到已有的表格中之后，沒有進行去重的操作，感興趣的讀者同樣可以下載源碼完善這一功能。

總結

那么以上就是鏈接示例表這一新功能在不同場合的應用實例，除了以上兩種代表性的場合，API 測試也是它適合的領域，當然這個項目可以直接從 CukeTest 中的樣例api_service來創建一個 API 測試項目來學習。回到開頭提到的，作為對Cucumber.js的增強，鏈接示例表的新功能大大強化了 CukeTest 完成這種數據驅動的測試的能力，讓您的自動化測試更得心應手。

推薦閱讀

1. 教你搭建自己的內容聚合網站

總結

以上是生活随笔為你收集整理的飞书上点链接怎么指定跳转浏览器_链接示例表功能还可以这样用？？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。