图像）的正确性和一致性

发布时间：2025-06-24 18:57:18  作者：北方职教升学中心  阅读量：906

容忍设置：在某些情况下，你可以配置容忍度，以忽略较小的差异，例如颜色的微小差别。视觉回归测试有助于识别用户界面 (UI) 不一致的地方，并确保遵守设计指南和品牌标准。

1.基准图像（Baseline Image）

• 在首次运行视觉测试时，Applitools会捕捉当前页面状态作为基准图像。布局发生变化。

与基准图像更新：

• 当合法的UI变化被接受时，可以将这些测试结果更新为新的基准图像。否则，在初始化时 Selenium WebDriver 可能会引发异常。
  • 如此一来，下一次的测试将基于最新的UI状态进行对比。

  测试用例生成

  • AI支持的测试用例生成利用机器学习算法分析历史测试数据并发现模式，从而创建新的测试用例，以更有效地识别缺陷。图像等元素。

  运行测试

  第一次运行：

  • 调用 eyes.check(“Product List”, Target.window()) 捕捉整个页面快照。过渡效果等，与基准图像的预期不符。
  • Testim：是一个基于云的测试自动化平台，它提供了一套工具和服务，用于自动化Web应用程序的测试。字体、您可以在此视图中对测试结果或测试结果中的步骤执行操作。当以下情况发生时，页面会出现检查失败：
    • 元素丢失或多余：页面缺失重要的UI元素或出现多余元素。
    • 如果是错误的，开发团队可以及时修复问题。按钮位置和文本内容都符合预期的设计规范。
    • Applitools 要求您为每种设备类型设置特定的基线baseline。
    • TestPlant Eggplant：提供AI支持的自动化测试，适用于复杂的测试场景。
    • Visual AI 系统检测和分析差异，发现某些页面变了、背景颜色、样式变化、

  • 智能对比（Smart Comparison）：

    • Applitools 使用了一种称为 视觉AI（Visual AI）的技术来进行智能对比。PDF、
    • 例如，动态内容（广告、Wraith和 BackstopJS等。
      • 这些报告可以集成到DevOps流水线中，帮助开发和测试团队快速识别和修复UI问题。这

      缺点

      • Applitools 是基于脚本的，因此需要一些脚本自动化经编程能力才能使用
      • Applitools 仅限于UI 测试。
      • 如果变化是预期的（例如调整了布局或价格修改是正常行为），基准图像可以更新。
      • 颜色和样式变化：元素的颜色、2拒绝差异并保留此测试步骤及类似步骤的基线图像3保存6点击高亮显示差异（HighlightDifferences）5.3添加应忽略差异的多个区域5.12.5添加注释和标注（Annotations）7.5AB测试7.4显示DOM和css引起的差异7.7显示元素位移引起的差异7.1(baseline images)/7.2(checkpoint)在检查点checkpoint和 baseline images间切换7.3勾线当前视图需要显示的 快照(Showbaseline image Showcheckpoint image /Showboth 显示全部)

        5.3功能的选项

        

        设置baseline后 需要点击保存所有 最终确认baseline image
        

        三.Applitools Eyes 视觉检查

        视觉检查的内容

        • 页面布局：比较屏幕截图，确保元素的位置一致。)
        • 如果发现视觉差异，执行将失败，输出将是上面显示的差异图像
        • 分析差异后，你可以选择将其假设为错误并进行相应处理，或者将其假设为预期和有意的更改，并且可以选择覆盖预先存在的屏幕截图，以便可能在下次执行时有更新的版本。图像）的正确性和一致性。
        • 除了简单的像素对比， 视觉AI（Visual AI） 可以了解不同上下文中的UI元素，识别布局、该视图会显示当前批次中所有测试结果的表格。
        • 更新基线：在验证更改后，更新基准图像以反映UI的最新接受状态。

        测试结果分析

        • AI驱动的测试结果分析通过分析测试结果和日志，自动识别异常和错误，帮助测试人员快速定位问题并进行修复。AI还可以模拟黑客的攻击行为，帮助测试人员更好地理解软件的安全风险，从而提高软件的安全性。您可以接受或拒绝整个组，而无需独立评估每个步骤。

          人工智能和机器学习在测试中的应用前景

          人工智能和机器学习（AI/ML）在软件测试中的应用正在逐渐改变传统的测试方法，提高测试效率和质量。

        • Applitools 的主要重点是在不同浏览器和设备上的 Web 应用程序测试，由Ultrafast Grid提供。

        3.Batch summary view 批次摘要视图

        

        4.步骤缩略图功能按钮介绍

        
        按钮从左到右依次为

        1确认当前测试步骤及其相似步骤中的差异是可以接受的，并且如果接受，将当前的快照设置为新的基线图像。
        像素匹配如何工作？
        这个库负责分析和比较测试期间捕获的屏幕截图与基线图像，用来检测任何视觉差异或回归。
        以目前 Applitools 的水平来看还仅仅停留在了比较初级的水平，仍然需要大量的人力去维护工具的 “智能”。但是，Applitools 可以与 Appium 集成以生成移动应用程序自动化测试。
        4.常用的视觉回归测试工具有哪些？
        就市场上的工具而言，可以分为付费和免费两类：
        付费工具：Percy、
        它计算图像之间的像素级差异并生成突出显示变化的差异图像。边框等。例如：   
        元素是否按照预期位置进行渲染。因此，Applitools 在移动应用程序测试中受到限制。从文字到图像的全方位检测，任何与基准图像的不一致都可能导致检查失败。而 可忽略 这个属性恰恰是解决问题的关键。什么是 Baseline 呢？其实很简单，我们可以把他当作是一条 UI 测试流程的基准线。人眼会忽略的错误，它也会忽略，而对于人眼来说显著的错误，它也能识别出来。基准图像的管理和更新对保持测试的有效性至关重要：
        更新基准图像：当UI发生合法变化时，你需要手动更新基准图像，以便后续测试参考最新的 页面状态。
        视觉测试是一种使用截图快照进行断言的测试。在“批次详细信息视图”中，您可以执行的主要任务包括：接受和拒绝步骤将测试分配给团队成员覆盖测试状态删除测试运行为测试和步骤添加书签过滤测试结果按列类型对表格行进行分组为测试结果添加备注撤销选定测试中的更改

        

        2.Batch summary view 批次步骤视图

        

        “批次步骤视图”允许您专注于批次的步骤，而无需像“批次详细信息视图”那样将步骤与特定的测试结果关联起来。移动应用、清楚地标出了对比屏幕截图中的视觉差异。AI还可以通过分析历史数据，自动调整测试参数，以模拟真实的用户行为，使性能测试更加准确和全面。

      • 颜色和样式：比较页面元素的颜色和样式，包括字体、

      两个diff页面时失败的，原因是页面中间一串随机数据，导致页面视觉检查失败。然后，每次重新运行测试时，Applitools都会捕获一个新的快照（称为检查点图像），并使用云中的视觉AI来检测任何有效的差异。这使得测试团队可以更好地确定其测试工作的优先次序，重点关注具有最高失败风险的领域。

    • 快照上传到 Applitools 云并存储为基准图像。严格匹配等。

      2.Baseline

      在 applitools 中有个特殊的概念，叫做 Baseline。您首次运行测试时，Applitools Eyes会将初始快照作为基线图像上传到云端。如果打上了失败的标签，下一次测试中如果出现了同样的差异将会继续给结果打上 Unresolved（未解决）标签。

      • 由视觉人工智能(Visual AI)驱动的工具，它可以让机器模仿人眼和大脑，提供识别功能和各种回归。

    • 基准图像（Baseline Images）：

      • 在第一次运行测试时，Applitools Eyes 会将这些快照存储为基准图像（Baseline Images）。
      • 在云端，Applitools 会对这些图像进行处理和优化，以便后续的对比和分析。
      • 如果checkpoint 通过，则继续执行后续的测试步骤；如果未通过，则可能会记录一个错误或失败，并可能需要进一步调查或修复问题。与Chrome浏览器版本相对应的ChromeDriver
        • 关键点：

          • ChromeDriver 需在系统变量 PATH中配置 。

          • Applitools：使用AI来增强视觉测试，自动识别和修复UI问题。
          • 通过与现有的测试进行顺利的集成，它能够减少编写和学习新测试的步骤，并扩展现有的测试。

            文章目录

            • 一.视觉回归测试
            • • 1.什么是视觉回归测试？
              • 2.视觉回归测试的必要性
              • 3.视觉回归测试是如何工作的？
              • 4.常用的视觉回归测试工具有哪些？
            • 二.Applitools Eyes
            • • 1.是什么
              • 2.优缺点
              • 3.注册平台账号
              • 功能介绍
              • • 1.界面切换
                • 2.单条视觉测试结果解读
                • 3.测试视图切换
                • • 1.Batch details view 批次详细信息视图(默认展示)
                  • 2.Batch summary view 批次步骤视图
                  • 3.Batch summary view 批次摘要视图
                • 4.步骤缩略图功能按钮介绍
                • 5.单个步骤窗口功能按钮介绍
            • 三.Applitools Eyes 视觉检查
            • • 1.基准图像（Baseline Image）
              • 2.Baseline
              • 3,Visual checkpoint 视觉检查点
            • 四.Applitools Eyes 工作原理
            • 五. Python + selenium 编写自动化测试
            • • 1.自动化脚本编写
              • 2.执行结果分析
            • 六.Applitools eyss 的痛点
            • • 运行测试
            • 人工智能和机器学习在测试中的应用前景

            一.视觉回归测试

            1.什么是视觉回归测试？

            视觉回归测试（Visual Regression Testing）是一种软件测试技术，通过捕获网页的屏幕截图或图像，并将其与基准图像进行比较，以检测变化。

        视觉检查失败的情况

        • Applitools Eyes 进行的视觉检查失败主要基于页面快照与基准图像（Baseline Image）的对比。但是第二个diff页按钮的位置发生了改变，视觉检查会忽略这个问题。通过检测和修复视觉回归，可以确保流畅一致的用户界面，从而提高用户参与度。

        智能缺陷检测

        • 利用模式识别和异常检测技术，AI能够自动发现软件中的缺陷，减少了人工检查的工作量，并提高了缺陷检测的准确性。

          关键点：

          • 将API_key替换为平台上获取的用户API_key。

            2.优缺点

            优点

            • 可以用于测试网页应用、

            预测性测试

            • AI能够通过历史数据分析预测可能出现的软件问题，提前进行预防，降低了软件的风险7。

          • 运行chromedriver -v命令来打印其版本来验证 ChromeDriver 是否正常工作。调查每个差异，以确认它是错误还是预期的更改。Testim.io 的主要目标是简化测试过程，提高测试的效率和准确性。

            打个比方，一段 UI 主流程的测试代码中对应了三个不同的页面 ：登录页面、

          • 元素可见性：检查页面上元素的可见性，确保所有该显示的元素都显示了。
          • 新快照上传到云端，与之前的基准图像进行智能对比。
          • AI系统会标记并分类这些差异，将其区分为 “重大问题”、
          • 文本内容和图片是否完整且正确。
          • 对于移动设备，Applitools 要求团队在他们的测试自动化中进行 API 调用和/或检测他们的源代码，这两者都会导致严重的问题

          3.注册平台账号

          1. 注册账号https://auth.applitools.com/users/general-register

             • 注：必须使用企业邮箱注册（如ouyangjianpeng@egos.con）的github账号才能注册applitools

          2. 提供的功能，可以看到 Applitools Eyes! 提供了不同类型程序，不同编程语言和测试库的支持。

          3. 视觉细节：细微的视觉差异，如阴影、
          4. Applitools 属于 机器学习 - 监督学习（通过已标记的训练数据来训练模型,使其能够根据输入数据预测对应的输出）

        

        翻译过来就是：

        • Applitools 的 AI 经过了上亿张图片进行训练，它不基于像素点去比对图片（因为这会产生大量负面的正例）。

        • Worksoft：利用AI来自动化复杂的业务流程测试。日期和时间等）可以被标记为忽略区域。

          如果认为随机数是可以跳过的，可以点击 失败的图片，通过IGNORE工具选择忽略的区域，并保存。

          • 这个AI系统采用了计算机视觉和机器学习算法，能够识别和处理图像中的元素和细节。用来识别由代码更改或升级引起的视觉回归

            2.视觉回归测试的必要性

            • 增强用户体验：视觉错误会对用户体验产生负面影响，导致用户满意度下降。
            • 免费工具有Playwright、
            • 位置变化： 元素的位置与基准图像不匹配，可能因为CSS改变导致布局错误。

              以下是AI/ML在测试中的一些关键应用：

              自动化测试

              • AI可以通过机器学习算法自动识别和执行测试用例，大大提高了测试效率7。
                

                第三次运行（后续测试）：

                • 页面再次加载，捕捉当前页面的快照。

                比如：Playwright专门针对视觉测试，Playwright 提供了一个内置功能来执行这些测试，使用像素匹配库作为比较引擎。截图等。

            五. Python + selenium 编写自动化测试

            工作流程概述
            

            1.自动化脚本编写

            1. 准备环境

               Applitools账号，您可以免费注册。
               

        • 回到 Web 页面中给之前Unresolved的测试用例点个赞（打上通过的标签）。


        由于已经添加了忽略区域，Visual AI 跳过忽略区域，所以第三次运行是时通过的。Cypress和Playwright）一起捕获视觉快照。其比较算法可以判断应用的变化是有意而为，还是出现了错误。在“批次步骤视图”中，会显示选定批次中所有步骤的缩略图。包括颜色、

        3,Visual checkpoint 视觉检查点

        常指的是视觉测试过程中设置的一个检查点，用于验证应用程序或网页的截图是否符合预期。这个是在playwright.config（https://playwright.dev/docs/test-configuration）文件中配置的。


        • 但是，这很明显会产生一个新的问题：

          • 当 checkpoint 图像截的图片是动态的（时，该怎么办？
          • 当 Checkpoint 图像不稳定时，如何设置 Baseline？

        • 解决办法： 设置 Checkpoint 图像忽略区域

          • 对所有的 Checkpoint 图像中的区域设置特定的属性：可忽略、

          

          二.Applitools Eyes

          1.是什么

          Applitools 是一个基于 视觉AI 的测试自动化平台，提供 Applitools Eyes其核心产品围绕着视觉回归测试和UI测试。

      9. 结果报告和反馈：
Applitools Eyes 会生成详细的报告，列出所有发现的差异，并提供视觉反馈。随后所有的测试都将与这一基准进行比较。桌面应用、
      10. 颜色和样式是否按照预期展现。边框等样式与基准图像存在显著差异。

  • 容忍设置和忽略区域：

    • 在某些情况下，用户可以设置容忍值或忽略某些特定区域，以避免不必要的测试失败。尤其元素难以定位的场景下这个功能确实好用。
    • 布局错乱：页面元素重叠或者错位，破坏了UI的完整性。

    • 而这个时候，我们可以人工去给这个测试结果打标签（通过 / 不通过）。2拒绝差异并保留此测试步骤及类似步骤的基线图像3高亮差异位置4切换 baseline image和checkpoint5放大该步骤

      5.单个步骤窗口功能按钮介绍

      

      1确认当前测试步骤及其相似步骤中的差异是可以接受的，并且如果接受，将当前的快照设置为新的基线图像。

    • 由于 Applitools 在移动设备上不成熟，它不会报告应用程序崩溃。

    2.执行结果分析

    1.首次运行代码后，进入applitools 的 管理后台，可以看到已经新增了一条Baseline：


    2. 再次运行相同代码，检验一下 Baseline 中的Checkpoint是否生效，


    3. 发现没有 PASS？于是我们点进去一看：

       • 原来是步骤2、

         • Chrome 和 ChromeDriver 的主版本号必须相同。

         视觉检查和验证

         • 与传统的功能测试不同，视觉测试更多的是在于捕捉视觉变化而不仅仅是HTML结构或属性的变化。
           • 在自动化测试脚本中，可能会设置一个checkpoint 来确保登录页面的背景颜色、使用过滤或分组选项选定的步骤组或指示Eyes根据类似差异对步骤进行分组执行操作。
             

           • 使用“按相似差异分组”选项来查找具有相似差异的步骤并将它们分组。这些差异可以是位置变化、历史缺陷数据和测试结果的模式，AI模型可以帮助识别和优先处理代码库中更可能包含缺陷的区域。
-随着业务的复杂度增高以及UI 页面大量堆积，如果每个流程分支都去设置一个Baseline，一旦 Baseline 过多，维护起来也是一笔不小的开支。

           性能测试

           • AI在性能测试中通过使用机器学习算法预测软件在不同负载下的性能表现，帮助测试人员更早地发现潜在的性能问题。您可以对单个步骤、

           ---

           查看分运行后分析结果：
https://applitools.com/users/login

           下面奉上Applitools官方网站：
https://applitools.com/tutorials/

           Applitools更多sdk:
https://applitools.com/tutorial

           Applitools文档：
https://applitools.com/docs

           Applitools演示：
https://applitools.com/request-demo?utm_source=tutorials

           Applitools知识库：
https://help.applitools.com/hc/en-us/

           https://applitools.com/tutorials/quickstart/web/selenium/python#step-2-getting-your-example-project

           https://applitools.com/tutorials/

           面向未来的AI自动化测试工具

           谷歌驱动下载
Chromedriver125以后的去哪找，以及自动更新Chromedriver的Python脚本