介绍
Percy 是一个可视化测试工具，可以按照用户定义的规则捕获网站截图和 HTML，然后进行对比和差异检测。percy-client 是一个用于编写自动化测试并与该平台进行交互的命令行工具。
本文将介绍 percy-client 的基本用法，以及如何使用它来自动化网站截图和更好地管理视觉测试。
安装
npm install --save-dev @percy/cli
使用
首先，在 percy.com 上注册一个账户，然后创建一个新的项目。
然后设置以下环境变量：
export PERCY_TOKEN=your_project_api_token
这个 API Token 可以在 percy.com 仪表板的“设置”中的“API Token”部分找到。
与 Jest 集成
如果你使用 Jest 作为测试框架，则可以使用 Jest 的testEnvironment选项来集成 percy。
Jest 配置文件：
{
"testEnvironment": "jest-environment-percy"
}你还需要安装 jest-environment-percy 并在环境变量中设置 PERCY_TOKEN：
npm install --save-dev jest-environment-percy export PERCY_TOKEN=your_project_api_token
这时候就可以使用 percySnapshot 函数来收集屏幕截图了。
const { percySnapshot } = require('@percy/puppeteer')
test('example', async () => {
await page.goto('https://www.example.com')
await percySnapshot(page, 'example')
})手动接入
如果您不使用 Jest，则可以在您的测试代码中手动处理截图并将其上传到 Perc 帐户。
-- -------------------- ---- -------
----- ----------- - --------------------------------
----- -- - -------------
----- ----------- - --- -------------
------- ----------------------
------ ------------------------
-- --------- --- ---
------------ -
-- ------- --- ----
-- -----------------------------
--------- --------
-
--
----- -------- ------------------- -
----- -------- - ----- ----------------------
----- ---------------
------- -------
-- ----- ----
---- -----------------------
--
----- --------- - -------------------------
----------------------- -------- --
------------------------------------------------ -----------------
-
-
----- -------------------结论
percy-client 是一个非常方便的测试工具，可以使屏幕截图和 UI 差异检测变得容易和自动化。本文介绍了如何安装和使用 percy-client，并简要介绍了与 Jest 的集成。希望您可以将这个工具纳入您的开发工作流程中，从而提高您的测试覆盖率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eeda716cebd9a1b02fbaaba