前言

UI自动化测试可以快速、准确地执行大量的测试用例，减少人工测试所需的时间和劳动力。能够在短时间内完成多个测试用例的执行，提高测试的效率和速度。但是UI自动化有个最大的痛点。当前端界面发生变化时，往往页面元素定位也会改变，这时就需要投入大量的人力和时间进行修改，导致我们最初引入UI自动化的初衷(节省人力、时间成本，提高测试效率和速度)不能很好的实现。针对这个问题，本篇文章介绍了怎么使用图片定位的方法进行UI自动化测试，抛弃传统的元素定位方式，这样前端页面元素样子没有发生变化，我们就不需要修改维护脚本。如果元素样子发生了变化，我们只需要将以前的元素图片换一张就可以。

介绍

本篇内容主要使用Python、Selenium、PyAutoGUI、OpenCV实现了UI自动化测试，使用图片定位方式。我们将页面元素截取成一个个单独的图片，实际上可能在UI设计后，这些图片都已经由UI设计师切图完成，我们只需要拿到这些切图就可以了。我们将这些元素切图和整体页面进行对比，找出图片在整体界面上的坐标点，然后使用Selenium的ActionChains接口执行页面交互操作就可以了。

实现方式

由于Selenium大家都比较熟悉就不过多介绍了，不熟悉的同学可以参考我之前写的文章《Selenium4.0详细介绍》。

PyAutoGUI是一个Python 第三方库，需要pip install 安装 。它允许我们通过编程方式模拟鼠标和键盘的操作，窗口操作，以及界面的截图匹配。由于它是照搬人的操作，底层没有套牢在Windows系统，所以它可以跨平台。

OOpenCV（开源计算机视觉库）是计算机视觉和机器学习领域广泛应用的一个强大工具，它提供了丰富的API，支持多种编程语言，包括C++、Python、Java等。

安装

pip install pyautogui
pip install opencv-python
# 本人在使用过程中，由于要用到截图，有个报错，需要更新Pillow版本和安装gnome-screenshot，如果没有遇到相关报错，可以忽略下面
pip install Pillow --upgrade
sudo apt install gnome-screenshot

定位图片位置

首先，我们将被测系统的元素图片截图准备好。需要进行的操作是向接口名称输入框中输入‘test’。

系统页面

元素截图

定位图片位置

import cv2
import pyautogui


input_img = cv2.imread('input.jpg')
# confidence参数设置了匹配度阈值,范围0到1,值越高要求越精确。
input_img_location = pyautogui.locateOnScreen(input_img, confidence=0.8)
# 获取输入框图片在整体页面的坐标位置，获取的是输入框图片的中心点位置
input_img_x, input_img_y = pyautogui.center(input_img_location)
# input_img_x 370  input_img_y 250

通过上面的方法，我们获取到了输入框的坐标点，下面用Selenium元素定位看一下位置是否正确。

from selenium import webdriver
from selenium.webdriver.common.by import By


input_el = driver.find_element(By.XPATH, '//*[@id="app"]/section/section/div/form/div[1]')
input_el_location = input_el.location
print(input_el_location['x'], input_el_location['y'])
# 220 80

我们发现，两个方法获取的坐标点不一样，由于Selenium获取的是元素的左上角的点，所以我们看一下元素的高和宽计算一下。

从上图可以看出，元素的宽是296，高是41，通过计算Selenium获取的元素中心点位置为：(368，100.5)，x轴坐标没有什么问题，y轴坐标差别有点大。造成这种问题的原因可能是PyAutoGUI获取的是整个电脑屏幕的尺寸，而Selenium获取的可能是浏览器页面的尺寸，我们获取一下他们的整体尺寸对比一下。

import pyautogui
from selenium import webdriver


options = webdriver.ChromeOptions()
options.add_argument("--start-maximized")
driver = webdriver.Chrome(options=options)
driver.get('http://172.17.0.1/apitest/#/api?id=79')
pyautogui_size = pyautogui.size()
#获取系统页面尺寸
selenium_size = driver.find_element(By.ID, 'app').size
print(pyautogui_size, selenium_size)
# Size(width=1920, height=1080) {'width': 1920, 'height': 860}

通过上面的对比发现y轴确实不一样，经过查看发现，Selenium获取的是浏览器整个窗口的尺寸，PyAutoGUI获取的是整个电脑屏幕的尺寸，所以我们需要做一个转换

# 我们将获取的元素坐标值，减去Selenium和PyAutoGUI的坐标相差的值，就是实际Selenium操作需要的坐标值，我的y值加70是因为我的操作系统是ubuntu，下面有Dock，高是70.
x = img_x - (pyautogui_x - selenium_x)
y = img_y - (pyautogui_y - selenium_y) + 70

示例

现在我们写一个脚本，使用图片定位的方式，向接口名称输入框输入“test”。

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.common.action_chains import ActionChains
import pyautogui
import cv2


options = webdriver.ChromeOptions()
options.add_argument("--start-maximized")
driver = webdriver.Chrome(options=options)
driver.get('http://172.17.0.1/apitest/#/api?id=79')
pyautogui_size = pyautogui.size()
selenium_size = driver.find_element(By.ID, 'app').size
input_img = cv2.imread('img/input.jpg')
input_img_location = pyautogui.locateOnScreen(input_img, confidence=0.8)
input_img_x, input_img_y = pyautogui.center(input_img_location)
x = input_img_x - (pyautogui_size.width - selenium_size['width'])
y = input_img_y - (pyautogui_size.height - selenium_size['height']) + 70
ActionChains(driver).move_by_offset(x, y).click().perform()
ActionChains(driver).send_keys('test').perform()
driver.quit()

最终运行结果

总结

这样我们就完成了使用图片定位页面元素进行操作。避免了因前端改动，需要重新定位页面元素的痛点。当然这只是个简单的demo，后续项目中使用可能还会遇到其他的问题。包括图形比较复杂的元素图片，这个时候我们可以使用confidence来调整匹配度，当匹配度为1时(最高)，图片的一个像素不一致都会导致无法识别出坐标点。所以可以根据自己的实际情况来调整匹配度。