什么是 happo-viewer？
happo-viewer 是一个基于 React 的 UI 测试工具。它可以帮助前端开发者快速地发现页面中的视觉问题和样式问题，同时也可以作为一个snapshot测试工具。它使用了 Puppeteer 这个端到端测试工具帮助开发者生成网页的截屏和 diff 信息。happo-viewer 最大的特点是它提供了一个可视化的用户界面，可以让开发者快速方便地比较和审查测试结果。
安装和使用 happo-viewer
安装
运行以下命令进行安装:
npm install --save-dev happo-viewer
配置
接着，您需要在项目中创建一个配置文件（例如 happo.config.js）并添加以下代码：
-- -------------------- ---- -------
-------------- - -
---------- -----------------------
-------- -
---------- -----
--------- -----
--------- -----
--
-------- -
- ----- ------------- --
--
--在这个配置文件中，您需要将 apiSecret 替换为您自己的API秘钥。您可以在 happo.io 的控制面板中找到该秘钥。 targets 部分用于指定 happo-viewer 将在哪些浏览器和浏览器版本中测试您的应用程序。在 include 部分中，您需要指定 happo-viewer 在哪些代码文件中运行测试。该 示例代码表示 happo-viewer 会在 src 目录下的所有 .js 文件中运行测试。
使用
在您的项目目录中，运行以下命令启动 happo-viewer：
npx happo-viewer
在这个过程中，happo-viewer会生成一个预览页面，您可以在这个页面中查看您的UI测试结果。您可以使用预览页面工具栏上的按钮调整屏幕尺寸，查看测试区域的差异，查看浏览器的实际版本，并与其他测试结果进行比较。
示例代码
happo-viewer 的使用非常简单，这里提供一个简单的示例代码。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- ----------------------
------------------ -- -- -
--------- --- ------- ------ ----- -- -- -
----- ------ - ------- ----------- --- ---
----- - ---- - - ----- ---------------
--------------------------- -----
---
----------- ---- --- ----- ----- ------- ----- -- -- -
----- ------ - ------- ----------- --- ---
----- - --------- - - ----- ---------------
------------------------------ --------------
---
---在这个示例中，我们测试了一个名为 Button 的组件，并使用 expect 来进行断言。render() 函数返回一个对象，其中包含测试结果的元素的属性。通过这些结果，我们可以轻松地验证组件是否按预期工作。
指导意义
在前端开发中，自动化测试是非常重要的。它们可以帮助开发者发现 bug 和防止代码变更后出现其他问题。在大型的开发团队中，自动化测试也可以帮助开发者更快地定位问题，从而缩短故障排除和修复的时间。
happo-viewer 是一个很好的工具，可以为您的自动化测试工作提供很有价值的帮助。使用 happo-viewer，开发者可以快速地发现页面中的视觉问题和样式问题，并且可以方便地查看 diff 信息。作为一个可视化的工具，happo-viewer 能够使开发者更加轻松地比较和审查测试结果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f33949ddbf7be33b2566e0e