Gauge框架在JS中的簡單應用
gauge框架簡介
Gauge是一個輕量級的跨平台測試自動化工具。
gauge安裝[Win10 64位下測試]
【百度網盤鏈接】//pan.baidu.com/s/1bidE34gLLrSI8sQ9Lg9R7Q
【提取碼】p0j9
1、下載
找到自己需要的版本，點擊下載。
本文檔使用版本（gauge-1.0.8-windows.x86_64.zip）
【下載地址】//github.com/getgauge/gauge/releases
點擊跳轉git-hub鏈接地址
【注意】
1)darwin是MAC平台
2)需要安裝node.js，且npm和node命令可用
2、安裝
本文檔使用的解壓版本，解壓即可
3、配置環境變數
將解壓出來的gauge.exe所在文件夾配置到系統環境變數Path中
4、檢測
查看安裝是否成功
C:\Users\Administrator>npm -v
6.14.4
C:\Users\Administrator>node -v
v12.16.3
C:\Users\Administrator>gauge -v
Gauge version: 1.0.8
Commit Hash: 28617ea
Plugins
-------
No plugins found
Plugins can be installed with `gauge install {plugin-name}`
5、安裝插件
1）安裝gague-js插件
[在線安裝，十分緩慢，不推薦]
gauge install js
[本地安裝，推薦]
gauge install js -f gauge-js-2.3.11.zip
C:\Gail\Dev\gauge>gauge install js -f gauge-js-2.3.11.zip
audited 308 packages in 6.696s
found 0 vulnerabilities
Successfully installed plugin 'js' version 2.3.11
2）安裝html-report插件，此插件用於生成測試報告；依然可以在線安裝，這裡直接演示本地安裝
C:\Gail\Dev\gauge>gauge install html-report -f html-report-4.0.11-windows.x86_64.zip
Successfully installed plugin 'html-report' version 4.0.11
【備註】若遇到失敗，關閉控制台，重新嘗試
6、初始化js項目【注意】在空文件夾中進行
#創建文件夾
mkdir js-demo
cd js-demo
#簡單創建
gauge init js
創建過程中。。。
C:\Gail\Dev\gauge\js-demo>gauge init js
Downloading js.zip
Copying Gauge template js to current directory ...
[ .................] - fetchMetadata: sill pacote range manifest for @types/yauzl@^2.9.1 fetched in 1182ms
正在下載Chromium。。。到這一步建議兩次Ctrl+C取消下載
C:\Gail\Dev\gauge\js-demo>gauge init js
Downloading js.zip
Copying Gauge template js to current directory ...
> [email protected] install C:\Gail\Dev\gauge\js-demo\node_modules\taiko
> node lib/install.js
Downloading Chromium r767160 - 145.9 Mb [ ] 1% 5662.0s
完整的操作程式碼
C:\Gail\Dev\gauge>mkdir js-demo
C:\Gail\Dev\gauge>cd js-demo
C:\Gail\Dev\gauge\js-demo>gauge init js
Downloading js.zip
Copying Gauge template js to current directory ...
> [email protected] install C:\Gail\Dev\gauge\js-demo\node_modules\taiko
> node lib/install.js
Downloading Chromium r767160 - 145.9 Mb [ ] 1% 12634.4s
C:\Gail\Dev\gauge\js-demo>終止批處理操作嗎(Y/N)?
^CC:\Gail\Dev\gauge\js-demo>
【注意】在創建過程中，會下載很多東西，也不知道都下載的什麼玩意；在本人的深入研究下，它默認會依賴一個叫做[taiko]的模組，這個是自動化模擬瀏覽器操作的框架，詳情請自行百度；要下載Chromium，速度及其緩慢不說，還容易卡死。
由於本教程不使用taiko模組，此處不再下載。若需要完整的init示例，本人推薦使用網盤下載[demo-taiko-chrome.rar]，或者留言郵箱[email protected]
7、目錄及文件介紹
目錄：
js-demo
|-env # 配置文件
|-node_modules # 依賴的模組
|-logs # 日誌文件
|-specs # gague 測試文檔目錄，主要目錄
|-|-example.spec # 測試文檔，主要文件
|-tests # 具體的邏輯程式碼所在目錄，主要目錄
|-|-step_implementation.js # 具體的邏輯程式碼，基於node.js語法，主要文件
|-manifest.json # 項目屬性文件，不建議修改
|-metadata.json # 項目基本資訊，可以修改描述等資訊
|-package.json # node.js 項目包結構文件，次要文件；下面的【重點提示】裡面會提到這個
文件：
[example.spec]
默認基於markdown語法，也可以用別的寫法，詳情請自行百度gauge語法；
沒有任何特殊字元開頭的是注釋，”This is an executable…”是注釋說明；
一級標題只能有一個，為測試入口；
二級標題可以有多個，為測試階段；
以[* ]開頭的是具體的測試步驟；後面跟的是要傳入測試程式碼名稱；測試程式碼中以此名稱來查找具體的測試方法；
雙引號在這裡指的是要傳入測試程式碼的變數
# Getting Started with Gauge
This is an executable specification file. This file follows markdown syntax. Every heading in this file denotes a scenario. Every bulleted point denotes a step.
To execute this specification, use
npm test
## Search Taiko Repository
* Goto getgauge github page
* Search for "Taiko"
* Page contains "getgauge/taiko"
[step_implementation.js]默認基於node.js語法,不懂請自行學習node.js語法
/* globals gauge*/
"use strict";
const { openBrowser,write, closeBrowser, goto, press, screenshot, text, focus, textBox, toRightOf } = require('taiko');
const assert = require("assert");
const headless = process.env.headless_chrome.toLowerCase() === 'true';
beforeSuite(async () => {
await openBrowser({ headless: headless })
});
afterSuite(async () => {
await closeBrowser();
});
gauge.screenshotFn = async function() {
return await screenshot({ encoding: 'base64' });
};
step("Goto getgauge github page", async () => {
await goto('//github.com/getgauge');
});
step("Search for <query>", async (query) => {
await focus(textBox(toRightOf('Pricing')))
await write(query);
await press('Enter');
});
step("Page contains <content>", async (content) => {
assert.ok(await text(content).exists());
});
8、項目改造測試
【程式碼改造】
[example.spec]
# Getting Started with Gauge
npm test
## Start Test
* Open Baidu "//www.baidu.com"
[step_implementation.js]
/* globals gauge*/
"use strict";
const request = require("request");
step("Open Baidu <url>", async (url) => {
var options = {method:'get',encoding:'utf-8',url:url};
request(options,(err,res,body)=>{
console.log(body.toString());
});
});
【程式碼說明】
發起一個打開百度，獲取頁面內容的測試。
【測試結果】
D:\Develop\gauge\js-demo>npm test
> [email protected] test D:\Develop\gauge\js-demo
> gauge run specs/
# Getting Started with Gauge
## Start Test P
<!DOCTYPE html><!--STATUS OK-->
<hrml>...中間省略...</html>
Successfully generated html-report to => D:\Develop\gauge\js-demo\reports\html-report\index.html
Specifications: 1 executed 1 passed 0 failed 0 skipped
Scenarios: 1 executed 1 passed 0 failed 0 skipped
Total time taken: 401ms
【測試說明】
如果出現問題，請參考下面【重點提示】。
重點提示-初始化項目
1、初始化項目，需要安裝對應語言的插件
2、初始化項目，一般在空文件夾下進行[以下程式碼在Windows控制台中進行]
gauge install (語言)
gauge init (語言)
例如初始化Java
gauge install java
mkdir java-demo
cd java-demo
gauge init java
初始化python
gauge install python
mkdir python-demo
cd python-demo
gauge init python
3、每次初始化項目都會重新下載那些包，建議使用node.js直接初始化node項目，自己進行補充；或者直接手動創建。
重點提示-項目精簡
[package.json]源文件
{
"name": "gauge-taiko-template",
"version": "0.0.1",
"description": "Starter template for writing JavaScript tests for Gauge",
"scripts": {
"test": "gauge run specs/"
},
"dependencies": {
"request": "^2.88.2",
"taiko": "latest"
}
}
[package.json]文件說明
"name" 項目名，可修改
"version" 版本號，可修改
"description" 項目描述，可修改
"scripts" 執行腳本，不建議修改
"dependencies" 項目依賴，這裡要刪除[taiko]，不然每次初始化都會下載Chromium。如果項目用到這個插件，建議手動複製模組進去。
文件修改後
{
"name": "gauge-template",
"version": "0.0.1",
"description": "JavaScript tests for Gauge",
"scripts": {
"test": "gauge run specs/"
},
"dependencies": {
"request": "^2.88.2",
}
}
執行測試之前，刪除無關文件，刪除後目錄如下
|-env
|-|-default
|-|--default.properties
|-|--headless.properties
|-|--js.properties
|-specs
|-|-example.spec
|-tests
|-|-step_implementation.js
|-manifest.json
|-metadata.json
|-package.json
這裡執行測試仍舊僅測試打開百度，獲取響應。
#在項目根目錄打開控制台，安裝項目
npm install
#測試項目
npm test
#測試結果和之前一致
測試中遇到的問題
1、提示安裝XXX插件或模組
【解決辦法】
1)耐心等待;
2)拷貝相應的模組到node_modules
3)npm install 安裝相應的模組，但是node.js模組要配置到環境變數，從而達到在系統中的任何地方都能優先使用node.js的模組。
2、關於nodeJs插件的引用錯誤問題，主要是install安裝的路徑，比較複雜，建議參考這個鏈接
