在前端开发中，我们经常需要对我们的页面的视觉效果、交互、样式等进行测试和优化。而为了方便进行这些测试和优化的工作，我们可以使用 npm 包 happo-core 来帮助我们完成这些任务。
什么是 happo-core?
happo-core 是一个基于 Puppeteer 的 npm 包，用于捕获测试用例的截图并生成可视化的报告。hapo-core 支持多种不同的测试类型，包括 CSS、JavaScript、React 组件等等，让我们可以轻松地对我们的页面进行测试。
安装和使用 happo-core
使用 happo-core 的第一步是安装它，我们可以使用如下命令进行安装：
npm install --save-dev happo-core
安装之后，我们就可以使用 happo-core 来进行各种测试和优化工作了。下面是一个简单的示例：
-- -------------------- ---- -------
----- ----- - ----------------------
----- ----- - --- -------
------- --------------------------
---------- -----------------------------
-------- -
-
--------- -----------
------- ------------------------
--
--
---
------------在这个示例中，我们首先创建了一个新的 Happo 实例，并传入了 API 的认证信息和测试的目标 URL。然后我们调用了 happo.run() 方法来运行测试。在测试运行完成之后，happo-core 会生成一份测试报告，并把它发送给 happo.io，让我们可以方便地查看测试结果。
常用的 happo-core API
addTests
-- -------------------- ---- -------
----------------
--- ------- ------ -
----- --------- -
----- ---------------------------------
----- ----- - ----- -------------
------ -
------
--
--
--
---这个 API 可以让我们向 happo-core 添加新的测试用例。我们可以通过传入一个对象来添加测试用例，其中对象的 key 表示测试用例的名称，value 是一个对象或函数，用于描述测试用例的详情。在这个示例中，我们通过 addTests 方法向 happo-core 添加了一个名为 "My awesome test" 的测试用例，并使用了 Puppeteer API 来完成这个测试用例。
Targets
const happo = new Happo({
targets: [
{
viewport: '1024x768',
target: 'http://localhost:8080',
},
],
});这个 API 可以让我们设置测试用例的目标，通过传入一个 targets 数组来指定我们要测试的目标。在这个示例中，我们指定了一个目标 URL 和一个视口大小，这样就可以让 happo-core 在指定的视口大小下进行测试。
restEndpoint
const happo = new Happo({
restEndpoint: 'http://example.com/happo-endpoint',
});这个 API 可以让我们指定 happo-core 的 REST API 的 URL。通过指定 restEndpoint，我们可以方便地与 hapo-core 交互，并通过 API 获取测试报告和其他一些相关信息。
总结
如上所述，npm 包 happo-core 是一个方便、易用的工具，用于辅助我们进行前端开发中的测试、优化等任务。通过使用 happo-core，我们可以快速地创建测试用例，并获取测试结果和报告，让我们可以更加方便地进行页面测试工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f33949ddbf7be33b2566e0d