wt-protractor-boilerplate 是一个基于 Protractor 的自动化测试框架，拥有丰富的插件支持以及易于使用的 API 接口。可以帮助前端开发工程师更方便的进行前端自动化测试，提高测试效率。
安装
前提：需要先安装 Node.js 环境
使用 npm 进行全局安装：
npm install -g wt-protractor-boilerplate
配置
配置文件
先在项目目录下创建配置文件 protractor.conf.js，示例如下：
const wtBoilerplate = require('wt-protractor-boilerplate');
const config = wtBoilerplate.config({
// 你的配置
});
exports.config = config;其中，config 对象是 Protractor 配置对象，详见官方文档。
wtBoilerplate.config() 返回一个修改后的 config 对象，可以在其中添加自定义配置或使用默认配置。
环境配置
在 config 对象中添加以下属性即可配置不同的环境：
exports.config = {
// ...其他配置
params: {
ENV: 'dev' // 可选值: 'pre', 'prod', ...
}
};在 protractor.conf.js 同级目录下新建文件夹 config，并在其中添加 dev.conf.json 和 prod.conf.json 文件，分别用于不同环境。
dev.conf.json 示例：
{
"baseUrl": "http://localhost:3000",
"mpqa": false
}prod.conf.json 示例：
{
"baseUrl": "http://www.example.com",
"mpqa": true
}页面对象
使用页面对象简化测试用例中的元素定位操作，提高代码可维护性。
在 protractor.conf.js 同级目录下新建文件夹 page-objects，并在其中添加 .page.js 为后缀的页面对象文件。
页面对象示例：
-- -------------------- ---- -------
----- -------- -
------------- -
---------------- - -------------------------------
----------------- - --------------------
-
------------- -
---------------------------------
--------------------------
-
-
-------------- - --- -----------在测试用例中引入页面对象，即可直接调用方法：
const homePage = require('../page-objects/home.page');
describe('homepage', function() {
it('should search correctly', function() {
homePage.search('Protractor');
});
});插件
wt-protractor-boilerplate 内置了一些插件，可以帮助进行测试，如下：
样式记录插件
使用该插件，可以记录构建在页面上的所有标签的样式，用于排查样式问题。
在 protractor.conf.js 中添加以下配置即可启用该插件:
exports.config = {
// ...其他配置
onPrepare: function () {
require('wt-protractor-boilerplate').addPlugin('style');
}
};在测试用例执行结束后，插件会在项目目录下生成 style-sheets 文件夹，其中每个页面对应一个 CSS 文件，可以用于检查样式问题。
自动截图插件
使用该插件，自动在测试用例执行失败时进行截图，用于排查问题。
-- -------------------- ---- -------
-------------- - -
-- -------
---------- -------- -- -
-------------------------------------------------------------
--
-------- --
-------- ----------------------------
-------------------------- ----- -- ---------
------------------------ ---- -- ---------
--
--在测试用例执行失败时，插件会在项目目录下生成一个 screenshots 文件夹，其中每个用例对应一个截图，可以用于排查问题。
使用
新建测试用例文件，如 example.spec.js，如下：
-- -------------------- ---- -------
----- -------- - -------------------------------------
-------------------- ---------- -
--------------------- -
-----------------
---
---------- ------ ----------- ---------- -
------------------------------
---------------------------------------------------------------
---
---在命令行中进入当前项目目录，执行以下命令即可执行测试用例：
protractor protractor.conf.js
总结
通过 wt-protractor-boilerplate，我们可以快速地进行前端自动化测试，减少手动操作带来的出错可能，提高测试效率。并且，在项目中使用插件和页面对象等特性，可以使得代码更规范，更易于维护，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671198dd3466f61ffe77f