简介
mochawesome-uirecorder-zc 是一个基于 Mocha 和 Mochawesome 的 UI 自动化测试框架，它可以将测试结果生成漂亮的 HTML 报告。与普通的 Mochawesome 不同的是，mochawesome-uirecorder-zc 可以记录 UI 自动化测试过程中的交互操作，为报告添加响应式演示页面，并生成视频压缩包，以展示测试结果，从而使测试结果更加直观且易于理解。
该框架适用于需要进行大规模复杂的前端 UI 自动化测试的开发项目，如电商、游戏、银行、保险等行业。
安装
在使用 mochawesome-uirecorder-zc 之前，你需要预先安装 Mocha、Mochawesome，以及 puppeteer。
npm install -g mocha mochawesome puppeteer
然后，你可以在项目根目录中使用 npm 安装 mochawesome-uirecorder-zc：
npm install mochawesome-uirecorder-zc --save-dev
使用
编写测试用例
首先，你需要编写 UI 自动化测试用例，使用 puppeteer 模拟用户在界面上的那些操作。
-- -------------------- ---- -------
----- --------- - ---------------------
----- -------- --------- -
-- ---------
----- ------- - ----- -------------------
-- --------
----- ---- - ----- ------------------
-- ------
----- -------------------------------------
-- -----------
----- ---------------------- ------------
----- ---------------------- ----------------
-- ------
----- -------------
-------------------------
---------------------------
---
-- --------
----- --------- - ----- ---------------- -- -----------------------------------------------------
----------------------- --------- ------------
-- --- ------
-- -------
----- ----------------
-配置 mochawesome-uirecorder-zc
现在，我们需要在 Mocha 的配置文件中（通常为 mocha.opts 或 mocha-config.json）添加用于启动 mochawesome-uirecorder-zc 的参数。
-- -------------------- ---- -------
-
----------- ----------------------------
------------------ -
-------------- -----------------
------------- -----
-------------------- -
-- -- -------- ----
-
-
-其中，reporter 属性为 mochawesome-uirecorder-zc，用于告诉 Mocha 使用这个报告生成器；reporterDir 用于指定测试报告生成的目录，我们可以随意指定；uiRecorder 属性为真表示开启 UI 记录功能。
此外，你还需要在测试脚本中引入 mochawesome-uirecorder-zc 的处理函数，并在测试函数中调用：
const { addContext } = require('mochawesome-uirecorder-zc');
describe('UI 自动化测试', function() {
it('登录测试', async function() {
// 登录测试的代码
addContext(this, 'login');
});
});addContext 函数用于添加相应的上下文信息，以便后续生成报告时使用。
运行测试
现在，你可以使用 Mocha 运行你的测试脚本：
mocha test/*.spec.js --reporter mochawesome
在测试完成之后，你会在 ./test-reports 目录下找到生成的报告文件。
报告生成
使用 mochawesome-uirecorder-zc 生成的报告，包含了测试结果、测试用例、日志记录等信息，并且还包含了交互操作的截图和视频。我们可以在浏览器中打开 mochawesome-uirecorder-zc 生成的 index.html 文件，查看更多详细信息。
结论
mochawesome-uirecorder-zc 可以大大简化 UI 自动化测试过程，并提供可视化且易于理解的测试结果，尤其适用于对 UI 界面进行复杂、高质量测试的前端开发项目。使用 mocha 与 mochawesome 结合 puppeteer 和 mochawesome-uirecorder-zc，既可以编写高效的测试用例，又可以生成漂亮、直观的报告，是提高前端测试效率和质量的最佳选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562c381e8991b448e0029