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