開發離不開測試，透過此 Dojo 了解在工程師的開發環境下，如何撰寫 E2E Testing。
練習目標
- 輕鬆使用前端測試框架來撰寫網站自動化測試程式
- 使用 Page Object 來簡化自動化程式維護的負擔
// 新增空的專案資料夾
mkdir demo
cd demo
// 初始化 npm 專案
npm init -y
// 安裝 webdriverio 模組
npm install webdriverio --save-dev
產生 Webdriverio 設定檔
// 執行 CLI (Mac)
$ node_modules/.bin/wdio
// 執行 CLI (Window)
$ node_modules\.bin\wdio
=========================
WDIO Configuration Helper
=========================
選擇你的執行環境
? Where do you want to execute your tests? On my local machine
選擇你要使用的測試框架
? Which framework do you want to use? mocha
你要安裝測試框架的 adapter 嗎？
? Shall I install the framework adapter for you? Yes
設定你預計測試程式放置的資料夾位置
? Where are your test specs located?
選擇你想要的報表格式
? Which reporter do you want to use?
你要安裝報表函式庫嗎？
? Shall I install the reporter library for you?
你想要新增服務到你的測試專案嗎？
? Do you want to add a service to your test setup?
你要安裝服務嗎？
? Shall I install the services for you?
設定 log 的層級
? Level of logging verbosity silent
設定測試失敗後，截圖放置位置
? In which directory should screenshots gets saved if a command fails?
設定將要測試的網站的 domain url
? What is the base url?
執行方式
- 編輯
package.json - 把 script test 指令設定為
wdio wdio.conf.js - 執行
npm test
指令種類
- Protocol
- Action
- Utility
- Property
- State
- Mobile (暫時跳過)
選取元素
browser.element('div');
$('div');
browser.elements('div');
$$('div');前往某網址
browser.url('http://www.google.com');設定欄位的值
browser.element('.email').setValue('aaa@bbb.com');
// 縮寫
$('.email').setValue('aaa@bbb.com');點選欄位的值
browser.click('.some-button');
// 縮寫
$('.some-button').click();
$('[title="Sign Out"]').click();檢查某個元素是否存在
browser.waitForExist('.alert-text');
// 縮寫
$('.alert-text').waitForExist();暫停
browser.pause(5000);除錯
browser.debug();加命令
browser.addCommand();waitForExist
browser.element('.notification').waitForExist();
browser.element('.notification').waitForExist(5000);
browser.element('.notification').waitForExist(5000, true);
// 或
browser.waitForExist('.notification');
browser.waitForExist('.notification', 5000);
browser.waitForExist('.notification', 5000, true);saveScreenshot
browser.saveScreenshot('front_page.png');end
client
.init()
.url('http://google.com')
.end();
// ends session and close browser取得某個元素的文字
browser.getText('.alert-text');
// 縮寫
$('.alert-text').getText();取得某個元素的值
browser.getValue('input[name=email]');取得標題
browser.getTitle();取得網址
browser.getUrl();isEnabled
<input type="text" name="inputField" class="input1">
<input type="text" name="inputField" class="input2" disabled>
<input type="text" name="inputField" class="input3" disabled="disabled">var isEnabled = browser.isEnabled('.input1');
console.log(isEnabled); // outputs: true
var isEnabled2 = browser.isEnabled('.input2');
console.log(isEnabled2); // outputs: false
var isEnabled3 = browser.isEnabled('.input3')
console.log(isEnabled3); // outputs: falseisSelected
<select name="selectbox" id="selectbox">
<option value="Daisy">Daisy</option>
<option value="Alin" selected="selected">Alin</option>
<option value="Andy">Andy</option>
</select>$('[value="Layla Terry"]').isSelected(); // 輸出: true
browser.selectByValue('#selectbox', 'Bill Gilbert');
element.isSelected(); // 輸出: falseisExisting / isVisible
<div id="notDisplayed" style="display: none"></div>
<div id="notVisible" style="visibility: hidden"></div>
<div id="notInViewport" style="position:absolute; left: 9999999"></div>
<div id="zeroOpacity" style="opacity: 0"></div>browser.isExisting(selector);