商务办公名片,北京网站建设专业乐云seo,wordpress 加logo,成都企业网站seo技术前言
UI自动化测试可以快速、准确地执行大量的测试用例#xff0c;减少人工测试所需的时间和劳动力。能够在短时间内完成多个测试用例的执行#xff0c;提高测试的效率和速度。但是UI自动化有个最大的痛点。当前端界面发生变化时#xff0c;往往页面元素定位也会改变#…前言
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 pyautoguiinput_img cv2.imread(input.jpg)
# confidence参数设置了匹配度阈值,范围0到1,值越高要求越精确。
input_img_location pyautogui.locateOnScreen(input_img, confidence0.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 Byinput_el driver.find_element(By.XPATH, //*[idapp]/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获取的元素中心点位置为(368100.5)x轴坐标没有什么问题y轴坐标差别有点大。造成这种问题的原因可能是PyAutoGUI获取的是整个电脑屏幕的尺寸而Selenium获取的可能是浏览器页面的尺寸我们获取一下他们的整体尺寸对比一下。
import pyautogui
from selenium import webdriveroptions webdriver.ChromeOptions()
options.add_argument(--start-maximized)
driver webdriver.Chrome(optionsoptions)
driver.get(http://172.17.0.1/apitest/#/api?id79)
pyautogui_size pyautogui.size()
#获取系统页面尺寸
selenium_size driver.find_element(By.ID, app).size
print(pyautogui_size, selenium_size)
# Size(width1920, height1080) {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 cv2options webdriver.ChromeOptions()
options.add_argument(--start-maximized)
driver webdriver.Chrome(optionsoptions)
driver.get(http://172.17.0.1/apitest/#/api?id79)
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, confidence0.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时(最高)图片的一个像素不一致都会导致无法识别出坐标点。所以可以根据自己的实际情况来调整匹配度。
