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