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