前言
在前端自动化测试中，生成良好的测试报告对于测试团队来说是非常重要的，可以帮助团队及时发现并解决问题。Protractor 是一个流行的前端自动化测试框架，其提供了一个基本的测试报告生成器。
然而，Protractor 默认的测试报告可能无法满足所有的需求，因此我们需要使用第三方的测试报告生成器，例如 protractor-html-reporter-hyped。
本文将详细介绍如何使用 protractor-html-reporter-hyped 包，以生成美观且易于阅读的测试报告。
安装
使用 npm 安装 protractor-html-reporter-hyped：
npm install protractor-html-reporter-hyped --save-dev
配置
在 Protractor 的配置文件中添加以下代码：
-- -------------------- ---- -------
-- ---------
----- ------------ - ------------------------------------------
-- ---------------
----- -------- - --- --------------
-------------- ------------------
--------------- --------
--------------------- --------------
--------- ------------------
---
-- ------------
----- -------------- - -
-- ----------------
-------------------- -----
-- -------- ---- ----
-------- -----------------------
-- ------------
--------------- -------------------
-- ------------
--------------- -----------------------------
-- ------
------------ ----------- ---- -------- -------
-- ---------
------ ------------
-- --------
-------------------- -
-------------- -
----- -------------- -- -- ------ -------- ----
-
-
--
-- - ---------- ----- --------- ------------
-------------- - -
-- ---
---------- ---------- -
---------------------------------------
--------------------------------
-
--以上代码中，我们在 Protractor 配置文件中引入了测试报告生成器 protractor-html-reporter-hyped，并定义了测试报告的存放路径、文件名称以及配置。
在 Protractor 配置文件的 onPrepare 函数中应用测试报告生成器，并传入测试报告的配置信息。
示例
下面是一个简单的 Protractor 测试用例，用于测试博客园首页的搜索功能：
describe('Cnblogs home page', function() {
it('should search and display results', function() {
browser.get('https://www.cnblogs.com/');
element(by.id('txtSrch')).sendKeys('protractor');
element(by.className('searchbtn')).click();
expect(element.all(by.css('.searchItemTitle a[href*=protractor]')).count()).toBeGreaterThan(0);
});
});运行测试用例，Protractor 将自动执行测试并在测试结束后生成测试报告。测试报告的示例截图如下：
总结
本文介绍了如何使用 protractor-html-reporter-hyped 包，以生成美观且易于阅读的测试报告。我们可以自定义测试报告的配色方案、标题、截图位置等属性，满足不同的需求。
同时，本文也为 Protractor 初学者提供了一个简单的测试用例，帮助他们更好地理解 Protractor 的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056e9d81e8991b448e75ef