开始使用 Appium 进行视觉回归测试
已发表: 2023-09-17
当今的软件需要跨多个平台和设备的无缝用户体验。 该领域最具挑战性的方面之一是维护应用程序的视觉完整性。 这就是视觉回归测试 (VRT) 发挥作用的地方，它提供了一种简化的方法来捕获可能被忽视的视觉错误和不一致之处。 对于那些希望开始使用 VRT 的人来说，Appium 提供了一个强大的、可扩展的框架，可以跨各种平台自动执行此类测试。
此外，像LambdaTest这样的服务为视觉回归测试提供了人工智能驱动的测试编排和测试执行解决方案，使团队无需设置和管理自己的测试基础设施。 这种云方法提供对各种真实浏览器和设备的按需访问，允许跨多个环境进行并发测试，减少测试执行时间，并确保 Web 应用程序外观和功能的一致性。 LambdaTest 还提供详细的测试报告，并与流行的测试框架集成，以快速识别和解决问题。
在本文中，我们将探讨使用 Appium 开始使用 VRT 的基础知识，以便您可以将测试策略提升到新的水平。
什么是视觉回归测试？
视觉回归测试是一种验证技术，用于确保对应用程序所做的更改不会对应用程序用户界面 (UI) 的视觉呈现产生不利影响。 其主要目标是确认布局和视觉元素符合预定义的期望，从而保证完美的视觉用户体验。 这些视觉检查涵盖各种属性，例如按钮、菜单、组件、文本等的位置、亮度、对比度和颜色。 此方法有时也称为可视化测试或 UI 测试。
视觉回归测试如何进行？
从本质上讲，视觉回归测试的运行方式是在修改之前捕获 UI 的快照，然后将它们与修改后的屏幕截图进行对比。 随后，任何差异都会被突出显示，以供测试工程师检查。 在实践中，有多种技术可以进行视觉回归测试。 下面为您列出了一些最常用的：
手动目视测试
此方法涉及手动检查 UI，无需使用专门工具。 设计师和开发人员在每次发布期间都会花时间对页面进行目视检查，积极寻找任何视觉缺陷。 虽然这种方法在应用于整个应用程序时可能很费力并且容易出现人为错误，但它对于临时或探索性 UI 测试非常有用，尤其是在开发的早期阶段。
逐像素比较
该技术会在像素级别仔细检查两个屏幕截图，提醒测试工程师任何差异。 像素比较（也称为像素差异）可以识别所有潜在问题，但它也可能标记许多人眼无法察觉且不影响可用性的无关紧要的差异（例如，渲染变化、抗锯齿或填充/边距差异） ）。 测试工程师必须在每次测试运行中仔细筛选这些“误报”。
基于 DOM 的比较
此比较方法依赖于分析状态更改之前和之后的文档对象模型 (DOM) 并识别差异。 虽然可以有效地突出显示 DOM 中与代码相关的修改，但它无法提供真正的视觉比较。 当代码保持不变但 UI 不断变化（例如，动态内容或嵌入内容）或者当代码发生变化但 UI 保持静态时，通常会产生误报或误报。 因此，测试结果可能不一致，需要仔细检查以防止忽视视觉缺陷。
视觉人工智能比较
采用视觉 AI 的视觉回归测试利用计算机视觉以类似于人类的方式感知 UI。 训练有素的人工智能可以通过专门标记人类观察者会注意到的差异来帮助测试工程师，从而消除解决像素和 DOM 比较测试中常见的“误报”问题的艰巨任务。 此外，视觉人工智能可以评估动态内容并仅识别意外区域或区域中的问题。
进行视觉回归测试的原因
本节解释了在应用程序中执行视觉回归测试的最坚实的理由。 所以，继续阅读……
确保视觉一致性
视觉回归测试有助于确保移动应用程序的 UI 和视觉元素在不同版本、设备和平台上保持一致。 这种一致性对于提供无缝的用户体验非常重要。
验证设计变更
当对应用程序进行设计更改时，视觉回归测试可以验证这些更改是否正确实施并且没有引入意外的视觉问题。
更快的反馈循环
视觉回归测试可以为开发人员和设计人员提供快速反馈，使他们能够在开发周期的早期解决问题。 这减少了严重视觉缺陷到达生产的机会。
改善用户体验
视觉故障和不一致会对用户体验产生负面影响并损害应用程序的声誉。 通过视觉回归测试发现这些问题，您可以提高用户满意度。
UI 库的回归测试
如果您的应用程序使用第三方 UI 库或框架，视觉回归测试有助于确保这些库的更新不会引入不必要的视觉变化。
使用 Appium 进行视觉回归测试的入门步骤
使用 Appium 进行视觉回归测试涉及比较应用程序用户界面的视觉元素，以检测应用程序不同版本之间任何意外的视觉变化。 以下是开始使用 Appium 进行视觉回归测试的步骤：
第1步：设置Appium和测试环境
首先，确保您的系统上安装并设置了 Appium。 您还需要适合您的首选编程语言（例如 Java、Python）的 Appium 客户端库。 另外，为您的测试环境安装任何必要的依赖项和工具。
第2步：准备测试图像
在执行视觉回归测试之前，您需要一组代表应用程序屏幕预期外观的基线图像。 通过在各种设备/模拟器上运行您的应用程序并截取每个屏幕的屏幕截图来捕获这些基线图像。 将这些图像存储在项目内的指定文件夹中。
第 3 步：实施测试脚本
使用 Appium 客户端库编写测试脚本，以自动执行捕获屏幕截图和执行视觉比较的过程。 您的测试脚本应该执行以下操作：
- 初始化 Appium 驱动程序以在特定设备/模拟器上启动应用程序。
- 浏览应用程序的屏幕，执行触发 UI 更改的操作。
- 使用 Appium 的屏幕截图功能捕获屏幕截图。
- 将捕获的屏幕截图保存在单独的文件夹中以进行比较。
以下是使用 Appium Java 客户端的 Java 代码的示例：
``java
导入 io.appium.java_client.AppiumDriver;
导入 io.appium.java_client.MobileElement;
导入 io.appium.java_client.android.AndroidDriver;
导入 org.openqa.selenium.remote.DesiredCapability；
导入java.net.URL；
公共类视觉回归测试{
公共静态无效主（字符串[] args）抛出异常{
// 设置 Appium 驱动程序所需的功能
DesiredCapability 上限 = new DesiredCapability();
caps.setCapability("platformName", "Android");
caps.setCapability("deviceName", "emulator-5554");
caps.setCapability("appPackage", "your.app.package");
caps.setCapability("appActivity", "your.app.activity");
// 初始化Appium驱动
AppiumDriver<MobileElement> driver = new AndroidDriver<>(new URL("https://localhost:4723/wd/hub"), caps);
// 执行操作并捕获屏幕截图
// ...
// 保存截图以供比较
// ..
// 关闭驱动
驱动程序.quit();
}
}
````
第 4 步：实施视觉比较逻辑
对于视觉回归测试，您需要一种机制来将捕获的屏幕截图与基线图像进行比较。 您可以使用“Resemble.js”或“Pixelmatch”等图像比较库来执行逐像素比较并计算视觉差异。
第 5 步：断言和报告
在您的测试脚本中，根据视觉比较的结果实施断言。 如果视觉差异超过一定阈值，则认为测试失败。 生成详细说明测试结果的报告，包括检测到的任何视觉差异。
第 6 步：持续集成 (CI)
将视觉回归测试集成到 CI/CD 管道中，以确保它们在代码更改或新版本发布时自动运行。 这有助于在开发过程的早期发现视觉回归。
第 7 步：维护基线图像
随着应用程序的发展，您需要更新基准图像以匹配新的预期外观。 这可确保合法的 UI 更改不会被误认为是回归。
用户如何在 LambdaTest 上使用 Appium 执行 VRT？
以下是用户如何在 LambdaTest 上使用 Appium 执行视觉回归测试：
设置 LambdaTest 帐户
首先，如果您还没有 LambdaTest 平台帐户，请创建一个帐户。 您将需要此帐户来访问他们的测试基础设施。 然后，确保安装 Appium 和所有依赖项，如上所述。
编写测试脚本
开发您的 Appium 测试脚本以与您的移动应用程序交互。 这些脚本应包括浏览应用程序并捕获关键元素或屏幕的屏幕截图的步骤。
配置 LambdaTest 功能
修改您的 Appium 脚本以包含 LambdaTest 特定的功能。 这包括指定所需的平台 (iOS/Android)、浏览器版本、设备类型和 LambdaTest 凭证（用户名和访问密钥）。
在 LambdaTest 上运行测试
将您的 Appium 测试脚本上传到 LambdaTest 的平台。 LambdaTest 提供了一个 Selenium 网格，您可以在其中运行 Appium 测试。 该网格提供了广泛的真实设备和浏览器用于测试。
执行测试
通过从基于 Web 的界面触发测试，在 LambdaTest 的网格上执行测试。 LambdaTest 将在指定的移动设备和浏览器上执行您的测试，并在测试流程中的各个点捕获屏幕截图。
视觉比较
测试执行后，LambdaTest 生成应用程序不同状态的屏幕截图。 您可以使用其内置的视觉比较工具将这些屏幕截图与基线图像进行比较，以识别任何视觉差异。
回顾与分析
分析 VRT 结果以识别视觉差异。 LambdaTest 提供对视觉变化的洞察，突出显示检测到差异的区域。
自动报告
LambdaTest 提供自动报告功能来跟踪一段时间内的测试结果，从而更轻松地识别趋势并评估更改对应用程序视觉外观的影响。
使用 Appium 成功进行视觉回归测试的最佳实践
以下是使用 Appium 成功进行视觉回归测试的一些最佳实践：
选择可靠的设备和平台矩阵
选择一组代表目标受众使用的最重要组合的设备、操作系统和屏幕分辨率。 该矩阵应涵盖各种设备，以确保您的应用程序在各种配置下看起来一致。
参考图像的版本控制
保留一个受版本控制的参考图像存储库，这些参考图像代表您的应用程序在不同设备和平台上的预期视觉外观。 这些参考图像将作为回归测试期间比较的基线。
稳定一致的测试环境
确保每次测试运行的测试环境都是一致的。 这包括在不同的测试运行中使用相同的操作系统版本、Appium 版本和库。 避免对环境进行不必要的更改，否则可能会导致测试出现误报。
将 UI 更改与功能更改隔离
将视觉回归测试与功能测试分开。 这使您可以只关注视觉差异，而不会因功能问题而分心。
容忍预期的视觉差异
并非所有视觉差异都是错误。 设置可接受的视觉差异的容忍级别，以考虑较小的 UI 更改，例如可能不会影响整体用户体验的字体渲染变化。
动态内容处理
优雅地处理动态内容，例如广告、用户生成的内容和实时数据。 您可能需要从比较中排除这些元素，或者更新参考图像以考虑这些动态变化。
智能等待策略
实施智能等待策略，以确保在捕获屏幕截图之前应用程序的 UI 元素已完全加载。 这有助于避免因屏幕不完整或部分加载而导致的误报。
并行执行
如果可行，请跨多个设备和平台并行运行视觉回归测试。 这减少了总体测试时间，并确保更快地反馈潜在的视觉差异。
自动报告和通知
设置自动报告和通知，以便在检测到视觉差异时提醒团队。 这可确保快速采取行动并最大限度地减少解决问题所需的时间。
定期测试维护
随着应用程序的发展，更新参考图像并调整测试以适应有意的视觉变化。 定期检查和维护您的视觉回归测试，以确保它们保持相关性。
审查并验证调查结果
在将任何差异视为实际问题之前，请手动检查屏幕截图，以验证差异是否是实际的错误，或者只是由动态内容或微小的视觉变化引起的误报。
连续的提高
不断评估您的视觉回归测试策略并根据需要进行调整。 随时了解最新的工具、库和最佳实践，以确保测试过程的有效性。
结论
无论您是想识别意外的更改、减少手动 QA 工作，还是只是提高不同设备和分辨率之间的视觉一致性，VRT 都是您测试工具库中不可或缺的工具。 与任何技术一样，掌握细微差别需要时间，但在节省时间、减少错误和更无缝的用户体验方面的好处是巨大的。 那为什么还要等呢？ 立即开始使用 VRT 和 Appium，将您的移动应用程序测试提升到新的水平。