初学者云端自动化视觉回归测试

Suhagkumar Vamja

5.00/5 (2投票s)

2023年11月9日

CPOL

10分钟阅读

5494

在本文中，我们将借助自动化视觉回归测试工具，了解视觉回归测试是什么，以及它如何塑造自动化测试世界。

引言

回归测试一直是发现早期 bug 的重要屏障，它能确保任何新更改都不会干扰应用程序已有的状态。考虑到高度复杂的应用程序，有时代码行数多达数百万行，我们无法确定哪种更改会在代码的哪个部分产生影响。

此过程的一种形式是视觉回归测试，我们通过它确保网站或应用程序的外观和感觉在任何发布迭代中都不会受到影响。虽然这不是一个新概念，但它在近年来越来越受到重视。随着数字体验变得越来越重要，视觉质量也成为一个重要的质量参数。这可能是因为如果网站看起来不好，它也卖不出去。

然而，从技术角度来看，让我们看看什么是视觉回归测试，以及它如何在自动化视觉回归测试工具的帮助下塑造自动化测试世界。

什么是视觉回归测试？

回归测试当然没有包含测试用例的边界或限制。它的一个子领域是视觉回归测试，它应用相同的过程，但作用于视觉元素。那么，视觉元素包括什么呢？您在网页上看到的一切都可能被包含在视觉回归测试中。

包含许多视觉元素的参考页面

视觉元素的回归测试验证当前版本中所做的更改是否与上一个版本一致。这意味着预期在相同位置具有相同坐标的元素应该在此版本中保持不变。在许多用例中，我们需要视觉回归测试。例如：

当我们测试的设备与用户操作的设备不同时，应用程序的重新缩放可能会影响像素位置。
它有助于保持应用程序在任何平台上的连贯性。
它有助于发现应用程序的渲染问题。
它有助于发现基于网站响应特性引起的问题。
执行视觉测试时，还会发现字体和颜色问题。

视觉回归测试还与其他通过 UI 元素工作的测试阶段相关联。例如，如果元素完美对齐，我们可以预期模态框会在正确的位置弹出，或者键盘和鼠标事件会相应地起作用。

如何执行视觉回归测试？

视觉回归测试可以通过两种方式执行：

手动
自动化

手动视觉回归测试

自 Web 应用程序开发诞生以来，视觉元素的手动回归测试就已经存在。早期，当我们进行更改时，我们首先手动并视觉检查它在网页上的外观。

然而，它只在一个系统上完成，通常是本地开发系统。随着技术的发展，页面上的元素也随之发展。如今，对于拥有数百甚至数千个网页的严肃 Web 业务来说，手动视觉回归测试非常耗时。尽管它仍然可行，并且在发现问题方面确实非常有效，但对于批量测试来说，它并不准确。

自动化视觉回归测试

手动视觉回归测试的问题在于人眼无法检测到只有几个像素的微小变化。虽然在许多情况下，单个像素的变化可能不是问题，但在许多其他情况下，它可能是一个问题。作为测试人员，我们不能冒这样的风险，因此，在视觉测试方面，我们应该（并且必须）始终转向自动化视觉回归测试。

自动化视觉回归测试让计算机接管并通过自动化脚本将网页的当前版本与理想版本进行比较。这个理想版本可以是设计文件，也可以是网页的早期完美版本。由于计算机是逐像素比较的，因此它们可以帮助确保新版本与理想版本没有太大偏差。

这种方法面临的最大挑战之一是如何考虑当今设备的高度碎片化。理想版本和先前版本的重叠应该在具有明确规范的每个设备上发生。这需要高额预算来采购这些设备、构建基础设施、运行它、维护它以及雇佣一个团队来完成这项任务。显然，只有少数组织能够轻松地为这份预算提供资金，因为他们知道这项操作可能不会成功。更高效且更具成本效益的方法是转向具有完善基础设施的云解决方案，例如 LambdaTest。

如何在云端自动化视觉回归测试？

当我们从本地基础设施迁移到基于云的基础设施时，我们看到了这种转变带来的一些显著优势。其中最有用的是最小化的维护和没有设置优化的开销。此外，您不受本地系统的限制，从而节省了大量设备采购费用，因为设备在市场上频繁发布，采购永无止境。

我们有两种选择来使用云基础设施进行自动化视觉回归测试。要么构建云基础设施，要么从已经表现出色的组织那里租用。

构建我们自己的基础设施将产生更高的成本，而这正是我们最初的主要顾虑。最重要的是，当我们构建自己的云基础设施时，我们并没有消除我们面临的大部分本地基础设施问题，除了轻松扩展的便利性。我们仍然需要一个庞大的团队来管理基础设施。我们仍然需要购买设备。我们仍然需要维护基础设施，等等。

租用现有的托管云基础设施消除了所有问题，并显著降低了许多成本。我们只需为使用基础设施的时间付费，无需花费时间和资源进行维护和扩展。这是高效、可行且最佳的自动化视觉回归测试选择。为了演示此类工具如何工作，我们以 LambdaTest 为例。

LambdaTest 是一个由人工智能驱动的测试编排和执行平台，可帮助您大规模执行手动和自动化测试，包括自动化视觉回归测试。它提供 3000 多个浏览器和操作系统，可即时测试您的网页。

要在 LambdaTest 上执行视觉回归测试，请按照以下步骤操作：

在 LambdaTest 平台注册。
进入用户控制面板后，从左侧菜单导航到 SmartUI。
点击 新项目。
选择平台为 Web 来运行您的自动化测试。提供项目特定详细信息，如 项目名称、添加审批人 和 添加标签。
点击 创建项目 以创建您的 SmartUI 项目。
从可用的选项中选择测试框架，如 Selenium、Cypress、Playwright 等。
它将引导您到一个屏幕，其中包含设置和配置测试的说明。

克隆 SmartUI 的 LambdaTest 示例 GitHub 存储库。

git clone https://github.com/LambdaTest/smartui-node-sample

将您的 LambdaTest 凭据（用户名和访问密钥）设置为环境变量。

macOS/Linux:

export LT_USERNAME=johnd
export LT_ACCESS_KEY=abacbcbafaaabffkiifgghhjvgxhgsagccb

Windows:

set LT_USERNAME=johnd
set LT_ACCESS_KEY=abacbcbafaaabffkiifgghhjvgxhgsagccb

在您的测试脚本中配置 LambdaTest 所需的功能。

let capabilities = {
    platform: "Windows 10",    // Configure your OS for Selenium test
    browserName: "chrome",     // Configure your Browser for Selenium test
    version: "latest",         // Configure your Browser Version for Selenium test
    visual: true,              // Configure your Capture screenshot  for Selenium test
    name: "test session",      // name of the test for Selenium
    build: "Automation Build", // name of the build for Selenium
    "smartUI.project": "<Your Project Name>", // Replace the name of project 
                                              // with the new project name
    "smartUI.build": "<Your Build Name>",     // Replace the name of Build 
                                              // with the new Build name
    "smartUI.baseline": false,                // Enable if you want to update 
                                              // to a new baseline build
  };
 
  // Connecting to the Lambdatest Selenium Cloud Grid with Smart UI
  let gridUrl =
    "https://" +
    "<Your Username>" +
    ":" +
    "<Your Access Key>" +
    `hub.lambdatest.com/wd/hub`;
 
  // Here is your Remote WebDrive Connection
  let driver = await new webdriver.Builder()
    .usingServer(gridUrl)
    .withCapabilities(capabilities)
    .build();

向您的测试用例添加一个 SmartUI Webhook，如下所示。

driver.executeScript(`smartui.takeScreenshot,{screenshotName:<Name of your Screenshot>}`)

之后，您可以测试运行命令以执行测试。
```
npm i && node test.js
```
要查看您的测试结果，请导航到 LambdaTest SmartUI 控制面板。

除了视觉回归测试，LambdaTest 还旨在为测试人员提供完整的体验，让他们无需为不同的测试需求而转向其他平台。测试人员注册平台后还将获得以下功能：

实时交互

除了测试不同网页的像素匹配外，您可能还需要像最终用户一样操作设备。这可以通过实时交互实现，测试人员可以使用真实设备上传他们的应用程序安装文件，并在他们选择的平台上使用该应用程序。

Web 应用程序也遵循类似的过程。通过实时测试，我们可以感受应用程序提供的功能，并发现自动化测试中难以发现的与 GUI 相关的错误。

地理位置测试

希望将其应用程序发布到国界之外的组织必须遵守最终用户所在国家/地区的法律。虽然 VPN 在这种情况下可能有效，但它速度极慢，并提供错误的参数度量值。

从该国雇佣自由测试人员的另一个选择是不安全且昂贵的。对于此类要求，LambdaTest 提供地理位置测试方法。通过此方法，测试人员只需滑动按钮即可更改最终用户的国家/地区。

现在，应用程序将显示为在该选定国家/地区的外观。测试人员可以在此处探索应用程序，并测试该特定国家/地区的法律兼容性或平台特定要求。

安全

安全性极为重要，因为涉及敏感数据，而且互联网容易受到攻击。当设置本地基础设施时，这会增加额外的开销。然而，LambdaTest 通过在测试人员系统和云机器之间建立安全隧道来优先考虑安全性。它具有 SOC Type 2 认证并符合 GDPR 规定，因此测试人员无需担心安全性，可以完全专注于他们的工作。

集成

第三方集成通过提供额外功能并通过与框架集成实现自动化来完善测试过程。对于基于云的工具，这一点变得很重要，因为任何测试过程都不能仅仅通过脚本和视觉回归工具来完成。

一旦视觉回归（或任何其他测试）完成，您可以分享 bug 及其详细信息、创建工单、提交 bug、将其记录在报告中等等。所有这些都可以通过集成实现，如果没有集成，每天来回切换几十次就会变得烦人且容易出错。

LambdaTest 拥有数百种集成，涵盖了测试人员想要展示其技能的所有主要工具和框架。在该平台上进行测试有助于您更专注，因为工具已连接，所有数据都集中在一个地方。

人工智能驱动

如今，人工智能已应用于许多技术。它优化了许多任务，包括自动化，从而缩短了测试完成时间。LambdaTest 采用这项技术，将测试时间缩短了多达 70%。

这显示出对其他软件开发周期和项目成本的巨大影响。被称为“HyperExecute”的工具可以将来自各种资源的报告和日志结合起来，提供一个组合的逻辑日志（和报告）以供进一步分析。测试人员可以通过根据自己的需求集成到云端（例如 AWS 或 CI 管道）来进一步提升。

日志记录和报告

最后，一个优秀的云端工具应该具备日志记录和报告功能，以便我们分析工作并规划未来。此功能分为两部分：日志记录和报告。

日志记录将大部分操作记录在一个日志文件中，该文件通常驻留在执行测试的机器上。日志记录操作的主要好处是无需再次执行失败的测试即可追踪错误。它还提供对用户操作的洞察力，并有助于推导出多种模式。

服务器日志文件

另一方面，报告是测试阶段的最终结果。它以图片和书面形式包含测试结果。报告还包含所使用的工具、使用的平台、测试执行所需时间以及其他相关信息。然而，这只是对报告和日志记录世界的简要介绍。如今，这些无价的资源具有比仅仅几个好处更深远的意义。

然而，它们的重要性使得它们必须包含在我们的框架中。LambdaTest 消除了这个过程，因为很多时候，测试人员可能拥有他们最喜欢的框架，但该框架可能不支持报告。或者即使支持，也可能形式非常模糊。

因此，LambdaTest 提供其报告功能，并拥有一个专门的团队持续改进它。测试人员可以期望报告中包含所有重要内容，并可以将其存储在您的帐户中以供回顾。

结论

在第一印象可能意味着真正的业务和价值的情况下，视觉回归测试是必要的。虽然用户希望他们的应用程序始终处于最佳状态，但测试人员的责任也随着这些期望而增长。

在当今众多可用选项中，基于云的自动化视觉回归测试方法效率最高。它们提供自动化支持、视觉回归支持、集成支持、报告，甚至人工智能驱动的元素。这满足了我们的要求，并有助于更快地完成工作，这对于从生产到发布再到最终用户的每个人来说都是双赢的。