珀西视觉测试指南

珀西：无缝UI质量的自动视觉测试

与珀西合作创建的这篇文章探讨了如何实现自动视觉测试，以确保您的用户界面（UI）在不同的浏览器和屏幕尺寸之间保持一致。 在单元和集成测试验证应用程序逻辑时，它们通常会错过视觉缺陷。 珀西通过自动捕获和比较视觉快照，突出差异并简化审核过程来提供解决方案。

本教程将API驱动的单页应用程序用作实际示例。您将了解Percy如何处理动态数据并与您的工作流程集成以进行有效的视觉评论和批准。

珀西的关键好处：>

>

早期检测到UI问题：
• 捕获传统测试错过的视觉错误，确保跨浏览器和屏幕尺寸的UI保持一致。> >自动快照比较：
自动化视觉快照的捕获和比较，突出显示了差异的差异。
• 简单集成：安装和集成很简单，类似于设置标准测试框架。
• >>动态数据处理：有效地管理UIS显示动态数据，防止数据更改中的误报。
• >简化的批准工作流程：促进团队审查和批准视觉变化，确保仅部署预期的修改。
versatile sdks：
• 提供用于各种测试框架的SDK，增强了与现有开发环境的兼容性。
• >先决条件：
>该教程针对熟悉ES6语法，Express.js（用于静止API）的高级JavaScript开发人员（用于静止的API），JQUERY，AXIOS，CSS框架，GIT分支策略，理想情况下，具有测试框架的经验。需要一个github帐户。 我们将使用GitHub上的样品货币应用程序。

>

理解珀西：

Percy提供了一个平台和工作流程，用于可视化Web应用程序，静态站点和组件库的视觉测试。 它的免费计划包括无限的团队成员，每月5,000个快照（有一个月的历史）和无限的项目。 该过程涉及安装SDK，创建项目仪表板并与您的代码库集成。珀西（Percy）在Chrome和Firefox中提供快照，最多支持十个屏幕分辨率。

实现步骤：

1. > 设置演示项目： fork提供的GitHub存储库，并按照读取文件说明设置样本货币应用程序。

2. > 设置Percy Project仪表板：注册免费的Percy帐户，创建一个项目（“ Percy-Tutorial”），然后将其链接到您的GitHub存储库。获取您的。PERCY_TOKEN

3. 生成珀西快照：安装package（@percy/script）。创建npm install -D @percy/script（请参阅代码的原始文章）。该脚本使用Puppeteer与应用程序进行交互并为每个页面生成快照。 请记住在单独的终端中运行snapshots.js以在运行Percy脚本之前启动应用程序。使用npm start。export PERCY_TOKEN=<your_token> && npx percy exec -- node snapshots.js</your_token>执行脚本

4. >

   >处理动态数据：修改拦截API请求并用模拟数据替换响应，以确保一致的快照。 （有关更新的代码，请参见原始文章）。snapshots.js>

5. >

   批准工作流程：创建一个功能分支，进行视觉更改，提交，推动，在Github上创建拉动请求，运行Percy测试，批准Percy仪表板中的构建，然后合并分支。 最后，更新主分支并再次运行Percy测试以建立一个新的基线。

连续集成（CI）和SDK集成：

> Percy与各种CI/CD平台（AppVeyor，Azure Pipelines等）集成在一起，以进行自动测试。 它还支持各种SDK与不同的测试框架集成（例如柏树）。 原始文章提供了柏树集成的示例。

结论：

Percy通过自动化过程并提供简化的工作流程来显着增强UI测试，以审查和批准视觉变化。 通过将珀西整合到您的开发过程中，您可以大大降低使用视觉缺陷释放产品的风险。 原始文章中的常见问题解答提供了有关视觉测试概念和珀西功能的进一步详细信息。

以上是珀西视觉测试指南的详细内容。更多信息请关注PHP中文网其他相关文章！