移动自动化测试：利用图像对比确保用户界面一致性

📝 面试求职： 「面试试题小程序」 ，内容涵盖 测试基础、Linux操作系统、MySQL数据库、Web功能测试、接口测试、APPium移动端测试、Python知识、Selenium自动化测试相关、性能测试、性能测试、计算机网络知识、Jmeter、HR面试，命中率杠杠的。（大家刷起来…）

📝 职场经验干货：

软件测试工程师简历上如何编写个人信息（一周8个面试）

软件测试工程师简历上如何编写专业技能（一周8个面试）

软件测试工程师简历上如何编写项目经验（一周8个面试）

软件测试工程师简历上如何编写个人荣誉（一周8个面试）

软件测试行情分享（这些都不了解就别贸然冲了.）

软件测试面试重点，搞清楚这些轻松拿到年薪30W+

软件测试面试刷题小程序免费使用（永久使用）

---

在移动设备的质量保证自动化领域，多数测试人员都将大量精力倾注于功能验证上。然而，应用程序的外观呈现同样不容忽视。可视化的屏幕截图对比是一项强大却常被忽视的技术手段，它能够精准捕捉不同设备及屏幕尺寸下用户界面的细微差异。在本文中，我们将深入探讨可视化对比对于移动应用程序的重要意义，介绍如何借助 Python、Appium 以及 Pillow 轻松实现这一技术，并分享一些极具代表性的实际案例，展示其在实际应用中发挥的关键作用。

为何对移动测试格外重要

移动应用程序测试面临的一大主要挑战便是设备碎片化问题。在安卓和 iOS 系统中，屏幕尺寸、分辨率、纵横比以及操作系统版本的组合丰富多样。每一种不同的组合都可能对应用程序用户界面的渲染效果产生微妙影响。例如，在谷歌 Pixel 7 上看起来完美无缺的界面布局，在三星 Galaxy S21 上可能会出现显示问题；在 iOS 16 系统上排列整齐的按钮，在 iOS 17 系统上可能会有轻微的偏移。

功能自动化测试在确保应用功能正常运行方面表现出色，但往往会忽略一些视觉上的差异，比如界面元素未对齐、文本重叠，或者颜色渲染问题。这些问题虽然可能不会导致功能失效，但却会严重影响用户体验。

手动检查几十台设备上的用户界面显然不具备可扩展性，尤其是在新设备不断推出的情况下。这正是可视化屏幕截图对比技术的价值所在 —— 通过自动化的视觉检查，我们能够以最小的额外工作量，尽早发现这些不一致之处。它就像是一道额外的安全防线，能够在碎片化的移动生态系统中，维持用户界面的一致性和精致度。

如何使用 Python、Appium 和 Pillow 实现该技术

为了在移动测试中实现自动化的可视化对比，我们将采用一套简单而强大的技术组合：使用 Appium 实现与移动应用程序的自动化交互，借助 Pillow（一款广受欢迎的 Python 图像处理库）来处理和对比屏幕截图。此外，我们还需要一个可用的 Python 环境、一个可在本地或远程运行的 Appium 服务器，以及一台已连接的设备或模拟器。

首先，我们需要捕获应用程序当前状态的屏幕截图。为此，我们定义一个名为 “capture_screen” 的函数，用于将屏幕截图保存到本地目录。如果该目录不存在，函数会自动创建。

def capture_screen(driver, screen_name):
    screenshot_dir = os.path.join(os.getcwd(), 'screenshots')
    os.makedirs(screenshot_dir, exist_ok=True)
    file_path = os.path.join(screenshot_dir, f"{screen_name}.png")
    driver.save_screenshot(file_path)
    return file_path

接下来，我们需要一种方法来比较两张屏幕截图：当前的截图和一张基准图像。compare_images 函数负责处理这项任务。它首先检查基准图像是否存在。如果不存在，它会记录一条消息并跳过比较操作。如果两张图像都存在，它会比较它们的像素数据。如果图像的尺寸不同，当前的屏幕截图会被调整大小以匹配基准图像。该函数使用 Pillow 库中的 ImageChops.difference 方法来检测像素差异。 

def compare_images(baseline_path, current_path, diff_path):
    if not os.path.exists(baseline_path):
        print(f"No baseline found at {baseline_path}. Creating new baseline.")
        return False
    baseline_img = Image.open(baseline_path).convert('RGB')
    current_img = Image.open(current_path).convert('RGB')
    if baseline_img.size != current_img.size:
        print("Images have different dimensions. Resizing for comparison.")
        current_img = current_img.resize(baseline_img.size)
    diff = ImageChops.difference(baseline_img, current_img)
    if diff.getbbox() is None:
        return True
    diff = diff.convert('RGB')
    for x in range(diff.width):
        for y in range(diff.height):
            r, g, b = diff.getpixel((x, y))
            if r != 0 or g != 0 or b != 0:
                diff.putpixel((x, y), (255, 0, 0))
    diff.save(diff_path)
    return False

最后，我们创建了test_ui_consistency函数，该函数将所有内容整合在一起。它使用所需的功能设置Appium驱动程序，导航到应用程序中的特定屏幕，捕获屏幕截图，然后将其与保存的基准图像进行比较。如果发现差异，会保存一张差异图像以便于检查。如果不存在基准图像，当前的屏幕截图将被保存为新的基准图像。 ​​​​​​​

def test_ui_consistency():
    options = UiAutomator2Options()
    options.platform_name = 'Android'
    options.device_name = 'Samsung Galaxy S21 API 31'
    options.app = 'path-to-the-apk-file'
    options.automation_name = 'UiAutomator2'
    driver = webdriver.Remote('http://localhost:4723/wd/hub', options=options)
    try:
        driver.find_element(AppiumBy.XPATH, '//android.widget.TextView[@text="Info"]').click()
        time.sleep(1)
        current_screenshot = capture_screen(driver, 'login_screen_current')
        baseline_path = os.path.join(os.getcwd(), 'screenshots', 'login_screen_baseline.png')
        diff_path = os.path.join(os.getcwd(), 'screenshots', 'login_screen_diff.png')
        are_identical = compare_images(baseline_path, current_screenshot, diff_path)
        if not are_identical and os.path.exists(baseline_path):
            print("Visual difference detected! Check the diff image for details.")
            return False
        elif not os.path.exists(baseline_path):
            import shutil
            shutil.copy(current_screenshot, baseline_path)
            print("Created new baseline image.")
        else:
            print("No visual differences detected.")
        return True
    finally:
        driver.quit()

可视化屏幕截图对比产生最大影响的情况 

虽然并非每次移动测试都需要进行可视化对比，但在某些特定情况下，它能显著提升应用程序的质量。 

首先，它在布局验证方面非常有效。像按钮、标签和输入字段这样的用户界面元素从技术上来说可能仍然存在且功能正常，但它们的视觉布局可能会因设备屏幕尺寸、分辨率或操作系统渲染的变化而改变。可视化屏幕截图对比无需依赖基于坐标的脆弱断言，就能立即检测出这些布局变化。 

在进行设计或主题更新后，可视化屏幕截图对比也尤为有用。当引入新的样式指南、支持深色模式或进行品牌形象更新时，手动验证所有屏幕在不同设备上是否一致地遵循更新后的外观是一项艰巨的任务。可视化对比可以自动标记出不一致的地方，确保颜色、字体和布局符合预期。

  

另一个能证明可视化对比价值的领域是设备多样性测试。即使考虑了不同的屏幕尺寸和操作系统版本，不同设备型号之间仍可能出现细微的渲染差异。自动化的可视化检查能更轻松地快速发现意想不到的用户界面问题，而无需手动查看大量设备上的无数截图。

简而言之，当我们的目标不仅仅是验证功能，而是在碎片化的设备环境中保障应用程序的整体质量、可访问性和视觉一致性时，可视化对比的影响最为显著。

最佳实践与应避免的陷阱

可视化屏幕截图对比对于移动测试来说可能是一个改变游戏规则的技术，但要想运用好它，需要养成一些重要的习惯。下面我们来看看应该遵循的最佳实践，以及我们需要避免的常见陷阱。

最佳实践

等待动画完成：在截取屏幕截图之前，务必确保所有的屏幕过渡效果、加载动画或用户界面特效都已结束。添加短暂的延迟或等待特定用户界面元素出现，有助于避免误判差异。

在稳定的设备或模拟器上运行测试：选择可靠的测试环境。处于高负载状态、电量不足或网络不稳定的设备可能会产生看似真实用户界面问题的渲染不一致情况。

有意地更新基准图像：只有在确认用户界面的变化是预期且正确的之后，才刷新基准图像。对待基准图像的更新要像对待代码变更一样谨慎 —— 仔细审查并跟踪它们。

应避免的陷阱

未经审查就接受细微差异：即使是微小的视觉差异也可能暗示着更深层次的布局或可访问性问题。在忽略这些视觉不匹配之前，一定要进行调查。

忽略动态内容：时间戳、轮播广告或随机元素自然会导致屏幕截图出现差异。要留意动态区域，如有必要，将它们屏蔽掉或调整你的对比逻辑。

让基准图像过时：在有意进行用户界面更新后，如果忘记更新基准图像，将会导致持续出现误判的失败情况。定期维护并对你的基准图像进行版本控制，以确保你的测试是相关有效的。

通过遵循这些简单的规则，我们可以避免常见的困扰，并使可视化对比测试成为我们移动自动化工具库中一项可靠的资产。

结论

可视化屏幕截图对比是一种简单但功能强大的技术，它能够在细微的用户界面问题影响到我们的用户之前就发现它们。尤其是在移动测试中，设备碎片化使得保持一致性成为一个持续的挑战，在自动化测试中加入可视化检查可以节省时间、提高质量，并让我们对每次发布都充满信心。如果你想深入了解，完整的代码示例以及一个演示安卓应用程序可在我们的 GitHub 页面上获取 —— 欢迎探索、克隆并开始实践！

最后： 下方这份完整的软件测试视频教程已经整理上传完成，需要的朋友们可以自行领取【保证100%免费】

​

​​​