介绍
happo 是一个用于生成和比较静态网页屏幕截图的 npm 包。它可以作为前端脚本，用于监测页面呈现是否满足指定的设计规范和 UI 细节。这个工具有助于实现更好的设计和交互效果，从而创造优质的用户体验。
安装
使用 npm 来安装 happo：
npm install happo --save-dev
必须在本地项目中安装 happo，因为 happo 是在本地运行的工具。
用法
配置
我们需要在项目根目录中添加 happo.js 文件。在这个文件中可以配置 happo 的相关选项，如输入文件路径、输出文件路径等。
module.exports = {
'ui-button': {
'path': 'test/snapshots/ui-button.js',
'type': 'react',
'stylesheets': ['dist/app.css'],
},
};上面的代码中，我们定义了将要测试的组件名称为 ui-button。它的路径为 test/snapshots/ui-button.js，组件类型为 react，并且需要引用 dist/app.css 样式文件。
编写测试
在项目中，我们需要为 happo 编写测试，并测试所有需要进行呈现的页面元素。测试文件可以是一个单独的 JavaScript 文件，或者是以哈希值为名称的多个文件。
统一的形式如下所示：
-- -------------------- ---- ------- ------------------------- -- -- - ----- --------- - ------------------------------ ------------------------------------- ----- ------------- - ------- ------------------- ------------ --------------------- ----------- ----- -------- - -------------------- ------------------- ------ --------- ---
在这个测试文件中，我们使用了 define 方法，定义了测试的名称。接下来，我们创建一个 DOM 元素作为需要渲染的挂载节点，并添加到文档中。然后，我们根据组件的属性值创建组件实例，进行渲染。最后将渲染后的 HTML 保存到快照中，然后将挂载的节点从文档中删除。
注意：测试的类型必须与 happo.js 中的配置项 type 一致。
运行测试
运行 happo 进行测试：
npx happo run
运行测试后，我们可以在 happo 编译的文件夹中找到与配置项相对应的截图文件。
happo 也支持比较测试，我们可以用以下命令启动比较测试：
npx happo compare SHA1 SHA2
其中 SHA1 和 SHA2 分别是需要比较的截图哈希值。
结论
happo 是一个功能强大的 npm 包，可以自动化测试和比较静态网页屏幕截图。使用它可以帮助开发人员更好地满足设计规范和 UI 细节，实现更好的用户体验。此外，由于 happo 的使用范围比较广，学习和掌握这个工具有指导意义，可以提升前端开发技能水平。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedafacb5cbfe1ea06110a9