人工智能丨视觉识别在自动化测试中的应用

视觉识别：自动化测试的新纪元

在当今快速发展的科技时代，软件测试正面对着日益复杂的挑战。作为其中一个关键领域，自动化测试不断寻求创新的方法，以提高测试效率和准确性。在这一背景下，视觉识别技术的引入为自动化测试带来了新的可能性和机遇。那么，究竟视觉识别在自动化测试中的应用有哪些呢？它又是如何改变我们测试的方式的呢？

视觉识别技术概述

视觉识别技术，通常被称为计算机视觉，是指通过计算机对图像或视频信息进行处理和分析，从中提取有用信息的过程。这项技术涉及到多个领域的知识，包括人工智能、机器学习和图像处理等。通过训练模型，计算机可“看见”屏幕上的元素，并能快速、准确地识别出按钮、文本框、图片等各种 UI 组件。

在软件测试中，视觉识别技术可以有效地帮助我们识别用户界面（UI）变化、验证布局的一致性、并提升测试用例的创建与维护效率。让我们深入挖掘视觉识别技术在自动化测试中的应用和益处。

视觉识别技术的应用方法

在这一部分，我们将详细探讨视觉识别技术在自动化测试中的五种具体应用方式，包括实现步骤和示例代码，让我们一起看看它们是如何工作的。

1. UI 元素识别

步骤：

首先，选择一个用于测试的应用程序（例如，网站或移动应用）。
然后，使用框架如 Selenium 或 Appium 开发基础的自动化测试脚本。
接下来，整合视觉识别工具（如 OpenCV 或 SikuliX）来检测 UI 元素。

示例代码：

import cv2
import numpy as np
from selenium import webdriver# 启动浏览器
driver = webdriver.Chrome()
driver.get('http://example.com')# 截图并读取图像
screenshot = driver.get_screenshot_as_file('screenshot.png')
img = cv2.imread('screenshot.png')# 使用模板匹配识别按钮
template = cv2.imread('button_template.png')
result = cv2.matchTemplate(img, template, cv2.TM_CCOEFF_NORMED)# 查找位置和显示结果
threshold = 0.8
loc = np.where(result >= threshold)
for pt in zip(*loc[::-1]):cv2.rectangle(img, pt, (pt[0] + template.shape[1], pt[1] + template.shape[0]), (0, 255, 0), 2)cv2.imshow('Detected', img)
cv2.waitKey(0)

2. 视觉回归测试

步骤：

在基于视觉的自动化测试中，首先需要对应用程序的各个状态进行截图。
随后，将这些截图与后续更改后的截图进行对比，以检查 UI 的一致性。

示例代码：

from PIL import Image
import numpy as np# 打开两张图片
img1 = Image.open('old_screenshot.png')
img2 = Image.open('new_screenshot.png')# 将图片转换成 NumPy 数组
arr1 = np.array(img1)
arr2 = np.array(img2)# 对比两张图像的像素差异
difference = np.abs(arr1 - arr2)
if np.any(difference > 0):print("UI变化检测到!")
else:print("无变化.")

3. 动态元素验证

步骤：

对于动态变化的 UI 元素（如轮播图），我们可以使用视觉识别来确保每一帧内容都被正确显示。
编写测试脚本循环处理每个状态，并通过视觉识别验证。

示例代码：

# 确保使用具有动态元素的页面
driver.get('http://example.com/slideshow')for i in range(1, 6):  # 假设有5个幻灯片driver.switch_to.frame("slideshow_frame")screenshot = driver.save_screenshot(f'slide_{i}.png')# 进行视觉识别验证img = cv2.imread(f'slide_{i}.png')template = cv2.imread(f'slide_template_{i}.png')result = cv2.matchTemplate(img, template, cv2.TM_CCOEFF_NORMED)if np.amax(result) < 0.8:print(f"幻灯片 {i} 显示有误！")driver.switch_to.default_content()  # 退回主页面

4. 屏幕元素对比

步骤：

当网页或应用更新时，我们需要确认更新后的布局与设计师提供的设计稿一致。
使用视觉识别，快速检查是否所有元素都有正确渲染。

示例代码：

# 获取新版本布局截图
driver.get('http://example.com/updated_version')
driver.save_screenshot('new_layout.png')# 进行视觉对比
reference = cv2.imread('reference_layout.png')
new_version = cv2.imread('new_layout.png')# 对比算法
similarity = cv2.matchTemplate(new_version, reference, cv2.TM_CCOEFF_NORMED)
if np.amax(similarity) < 0.8:print("布局不一致!")
else:print("布局一致!")

5. 视觉缺陷检测

步骤：

当软件中存在图形或图像时，确保识别图像的缺损或错误。
通过视觉识别确认图形内容的完整性。

示例代码：

# 假设检测图像内容的完整性
img = cv2.imread('graphic_content.png')
template = cv2.imread('expected_template.png')# 测试内容完整性
result = cv2.matchTemplate(img, template, cv2.TM_CCOEFF_NORMED)
if np.amax(result) < 0.75:print("图形内容存在缺陷!")
else:print("图形完整无缺!")