在前端自动化测试中，我们经常需要使用 protractor 进行 E2E 测试，而在测试报告的生成方面，protractor 自带的测试报告界面相对较为精简，因此我们需要使用第三方的报告生成工具来增强测试报告的展示。
本文将介绍如何使用 npm 包 protractor-bootstrap-reporter 来生成更美观的测试报告。
安装 protractor-bootstrap-reporter
使用 npm 安装 protractor-bootstrap-reporter：
npm install protractor-bootstrap-reporter --save-dev
配置 protractor
在 protractor 的配置文件 protractor.conf.js 中，增加以下配置：
-- -------------------- ---- -------
-- ---- ----------------------------- --
--- --------------------------- - -----------------------------------------
-------------- - -
-- ---
-- ----------
------- -
------- -
-- ------
---- -------------
-- -------
----- -------------------------
-- ------
------ ----------- ---- -------
-
--
-- ---
-- -- -----------------------------
---------- -------- -- -
-- -- -----------------------------
-------------------------------- -----------------------------
-- ------
------ ----------------------------
-- --------
----- --------------------------
-- ---------
--------------- --------------------------
-- --------
---------------------------------- -----
-- ------
------------- ----------
----
-
--在上述配置中，我们配置了报告生成的目录、文件名和标题等参数，同时在 onPrepare() 函数中加载了 protractor-bootstrap-reporter，并设置了报告标题、生成目录、截图和截图尺寸等参数。
运行 protractor
在命令行中执行以下命令，启动 protractor 的测试任务：
protractor protractor.conf.js
测试完成后，在配置的报告生成目录中，即可找到生成的 protractor 测试报告。
示例代码
我们来看一下完整的示例代码，以便更好地理解如何使用 protractor-bootstrap-reporter 生成测试报告：
-- -------------------- ---- -------
-- ------------------
--- --------------------------- - -----------------------------------------
-------------- - -
-- ----
---------------- -------------------------------
------ ------------------
-- ------
------------- -
-------------- --------
--
-- ----------
------- -
------- -
---- -------------
----- -------------------------
------ ----------- ---- -------
-
--
-- -- -----------------------------
---------- -------- -- -
-- -- -----------------------------
-------------------------------- -----------------------------
------ ----------------------------
----- --------------------------
--------------- --------------------------
---------------------------------- -----
------------- ----------
----
-
--
-- -------------
-------------------- ---- ----- -------- -- -
------------------- -- -
-- -------------------------
--- ------ - ------------------
---------------------------------------
---
---------- --- - ------ -------- -- -
--------------------------------------
--------------------------------------------------------- -------
-------------------------------------------- -------
----------------------------------
------------------------------------ -- --------------------------------------- -------
-- ---- ------ -----------------
------------------------------------ -- --------------------------------------- --------
---
---指导意义
使用 protractor-bootstrap-reporter，可以生成更美观、更易读、更可靠的测试报告，帮助团队及时发现和解决问题，提高测试效率和质量。
同时，我们还可以结合其他 npm 包，比如 protractor-screenshoter-plugin、protractor-html-reporter 等，进一步完善测试报告的生成和分析。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005598481e8991b448d7187