AVA + Spectron + JavaScript 對 JS 編寫的客戶端進行自動化測試

什么是 AVA （類似於 unittest）

AVA 是一種 JavaScript 單元測試框架，是一個簡約的測試庫。AVA 它的優勢是 JavaScript 的異步特性和並發運行測試, 這反過來提高了性能。

什么是 Spectron

Spectron 是一個 node.js 框架，用於自動化應用程序 Electron。

AVA + Spectron + JavaScript

AVA + Spectron + JavaScript 對 JavaScript 的客戶端進行自動化集成測試。

AVA 常用的 api

• test([title], implementation) 基本測試
• test.serial([title], implementation) 串行運行測試
• test.cb([title], implementation) 回調函數形式
• test.only([title], implementation) 運行指定的測試
• test.skip([title], implementation) 跳過測試
• test.todo(title) 備忘測試
• test.failing([title], implementation) 失敗的測試
• test.before([title], implementation) 鈎子函數，這個會在所有測試前運行
• test.after([title], implementation) 鈎子函數，這個會在所有測試之后運行
• test.beforeEach([title], implementation) 鈎子函數，這個會在每個測試之前運行
• test.afterEach([title], implementation) 鈎子函數，這個會在每個測試之后運行
• test.after.always([title], implementation) 鈎子函數，這個會在所有測試之后運行，不管之前的測試是否失敗
• test.afterEach.always([title], implementation) 鈎子函數，這個會在每個測試之后運行，不管之前的測試是否失敗

AVA 內置斷言

• .pass([message]) 測試通過
• .fail([message]) 斷言失敗
• .truthy(value, [message]) 斷言 value 是否是真值
• .falsy(value, [message]) 斷言 value 是否是假值
• .true(value, [message]) 斷言 value 是否是 true
• .false(value, [message]) 斷言 value 是否是 false
• .is(value, expected, [message]) 斷言 value 是否和 expected 相等
• .not(value, expected, [message]) 斷言 value 是否和 expected 不等
• .deepEqual(value, expected, [message]) 斷言 value 是否和 expected 深度相等
• .notDeepEqual(value, expected, [message]) 斷言 value 是否和 expected 深度不等
• .throws(function|promise, [error, [message]]) 斷言 function 拋出一個異常，或者 promise reject 一個錯誤
• .notThrows(function|promise, [message]) 斷言 function 沒有拋出一個異常，或者 promise resolve
• .regex(contents, regex, [message]) 斷言 contents 匹配 regex
• .notRegex(contents, regex, [message]) 斷言 contents 不匹配 regex
• .ifError(error, [message]) 斷言 error 是假值
• .snapshot(expected, [message]) 將預期值與先前記錄的快照進行比較
• .snapshot(expected, [options], [message]) 將預期值與先前記錄的快照進行比較

如下是 creat_furure.ts 測試腳本。

import test from 'ava';
import { cycle, config, util, RQPro } from '../../helpers';
test.beforeEach(async t => {
	t.context.account = config.loadAccount();
	t.context.selector = config.loadSelector();
	t.context.app = await cycle.start();
	t.context.client = t.context.app.client;

	await cycle.login(t.context.client, t.context.account.auto);
	t.context.rqpro = new RQPro(t.context.app);
});
test.afterEach(async t => {
	await util.wait(500);
	await cycle.stop(t.context.app);
});
test('should support create future algorithm and build , async t => {
	const { client, selector } = t.context;
	await client.waitForExist(selector.olAlgorithms.container);
	await client.click(selector.olAlgorithms.createBtn);
	await client.waitForExist(selector.olAlgorithms.createDialog);
	await util.wait(500);
	await client.setValue(selector.olAlgorithms.createFormTitleInput, `guard-${Date.now()}`);
	await client.click(selector.olAlgorithms.createsFormStockCheckbox);
	const title = await client.getTitle();
	if (title.indexOf('模擬') !== -1) {
		t.pass();
	}
});

腳本中的 waitForExist 、 click 、setValue 等對元素的操作的方法來自於 WebdriverIo, 元素定位方法為 css selecotor，元素定位存放在配置文件 selector.yml 里。

實際項目結構如下：

參考資料：

https://github.com/avajs/ava#faq

https://juejin.im/entry/597e88035188257f833d3bb8

http://webdriver.io/api.html