背景介绍
在前端项目中，设计师和开发者会经常合作，以确保项目的设计和功能符合客户需求。而这一过程涉及到不同设备和浏览器的兼容性以及 UI/UX 的优化。当我们面临这个问题时，可以使用 Percy 进行视觉回归测试来自动化处理这一问题。
Percy 是一款可视化回归测试工具，可帮助您检测界面中的变化并捕捉屏幕截图。它支持许多语言和框架和您的 CI / CD 流程无缝集成，可使您的可视化回归测试不断进行，从而更好地维护代码库。
在本文中，我们将介绍如何使用 @percy-io/percy-storybook 包来创建自动化测试案例。
环境准备
- Node.js (v10或更高版本)
- Yarn或npm
- Storybook v6或更高版本
安装
使用下述命令安装 @percy-io/percy-storybook 包：
Yarn:
yarn add @percy-io/percy-storybook
npm:
npm install --save @percy-io/percy-storybook
使用示例
1.在项目中创建 .percy.yaml 文件：
本文件告诉 Percy 测试哪些 URL 并在哪里进行测试。
例如，您正在使用 Storybook，将以下 contentURL 用于在浏览器中测试：
version: 2
agent:
version: "latest"
snapshots:
- name: "My Component Library"
url: "http://localhost:6006/"2.在项目中创建 .storybook/main.js 文件：
本文件告诉 Storybook 如何工作和配置。
例如，您可以将 addons 模块添加到文件中以使用 percy 插件：
module.exports = {
addons: [
'@percy/storybook',
],
};3.使用 percyStorybookSnapshot 函数创建测试用例：
-- -------------------- ---- -------
------ ------------- ---- ---------------------------
------- --- --------- ------- ------
----- -------------------------
----------- ------------ ----- - -- -
----- -
---------------------
--------------------------------------
----- ---------------- --------- --- -------------
---此示例是在 TestCafe 测试框架中生成的，但是 @percy-io/percy-storybook 程序包支持任何支持 Puppeteer, Playwright 或直接使用 Chromium 的框架和语言。
4.在终端运行以下命令：
yarn storybook
或
npm run storybook
您应该可以看到 Storybook 在第 6006 端口上运行。
接下来，在另一个终端中运行：
yarn percy exec -- storybook-static
-- 告诉 percy 命令来传递后面的所有命令。命令 storybook-static 告诉 percy 将它们用于静态文件的存储目录。
5.在 percy.io 中查看测试结果：
当 Percy 完成处理后，我们可以在 percy.io 中查看与其相关的测试结果。
总结
@percy-io/percy-storybook 是一款用于自动化测试的工具，它可以加速我们的前端测试流程，从而减少 bug，并提高项目质量和稳定性。实际上，Percy 也支持其他框架。我们鼓励您去了解和使用 Percy 来增强您的自动化测试工作流程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f0c3ebb403f2923b035c15e