Skip to content

十三、airtest-selenium做Web自动化测试

1. 前言

Selenium是一个用于Web应用程序的自动化测试工具。它直接运行在浏览器中,可以模拟用户在浏览器上面的行为操作。

在AirtestIDE中,开发者也给我们提供了使用Selenium的窗口。不过使用的框架是airtest-selenium框架。airtest-selenium是对selenium的python库做的一层封装,它添加了部分图像识别的接口,也可以生成网页版测试报告

  • airtest_touch:图像点击
  • assert_template:断言图像存在
  • snapshot:给网页截图
  • switch_to_previous_tab:切换到上一个打开的标签页
  • switch_to_new_tab:切换到最新打开的标签页
  • ......

本文将借助AirtestIDE上的Selenium窗口,来给大家讲解在浏览器上进行自动化测试的实践。

2. selenium window功能介绍

1)在AirtestIDE中调出Selenium的窗口

默认情况下,IDE没有并显示Selenium的窗口,所以我们需要在IDE顶部的窗口菜单下,把Selenium Window勾选上,勾选之后Selenium的窗口才会显示在IDE界面的左侧。

image

image

2)插入初始代码的快捷按钮

Selenium Window给我们提供了一些常用的按钮,比如点击窗口下类似地球的按钮,会自动帮我们在脚本编辑窗口插入一些初始化代码:

image

插入代码之前,我们需要在脚本窗口弹出的黄色提供框中,选择Yes允许插入代码:

image

这样,脚本编辑窗就会自动插入如下代码:

# 引入selenium的webdriver模块
from selenium import webdriver
from selenium.webdriver.common.keys import Keys
from airtest_selenium.proxy import WebChrome

#创建一个实例,代码运行到这里,会打开一个chrome浏览器
driver = WebChrome()
driver.implicitly_wait(20)

需要注意的是,如果是首次使用这个按钮,IDE会弹窗提示需要设置谷歌浏览器的路径:

image

这时我们就需要先到选项--设置中,找到Selenium那部分内容,然后把chrome的路径设置好,才能正常插入上述代码。注意是chrome.exe的路径,不是chromedriver.exe的路径!!!

image

3)元素检索的快捷按钮

点击初始化快捷按钮,打开一个chrome窗口之后,我们可以点击selenium window提供的元素检索快捷按钮,帮助我们检索元素的详细信息,另外单击可以生成元素的定位脚本(xpath定位的方式):

search_ele

4)脚本录制的快捷按钮

同样是点击初始化快捷按钮,打开一个chrome窗口之后,我们可以点击selenium window提供的脚本录制按钮,帮助我们快速生成Web自动化测试脚本:

record

录制完脚本之后,我们可以直接使用AirtestIDE的运行脚本和报告生成功能,一键回放脚本和生成报告(因无法录制打开百度网站的动作,所以我们手动添加了1条打开百度网站的脚本):

run_script

5)常用API的快捷按钮

除了上述3个功能之外,selenium window还给我们提供了一些常用API的快捷按钮,可以帮助我们更快熟悉这些常用的API,上手web自动化测试脚本:

image-20220126160334985

  • start_Web:即 driver.get("") ,打开指定网址
  • touch:即 driver.find_element_by_xpath("").click() ,标准selenium的元素点击
  • driver.airtest_touch:即 driver.airtest_touch(Template(......)) ,airtest-selenium封装的图像点击
  • text:即 driver.find_element_by_id("").send_keys("") ,标准selenium的元素输入操作
  • assert:即 driver.assert_exist("", "xpath", "请填写测试点."),标准selenium的元素存在断言
  • driver.assert_template:即 driver.assert_template(Template(......), "请填写测试点"),airtest-selenium封装的图像存在断言
  • snapshot:即 driver.snapshot() ,airtest-selenium封装的页面截图操作
  • previous_tab:即 driver.switch_to_previous_tab() ,airtest-selnium封装的切换到上一个标签页的操作
  • new_tab:即 driver.switch_to_new_tab() ,airtest-selenium封装的切换到新打开标签页的操作
  • back:即 driver.back() ,标准selenium的页面后退操作
  • forword:即 driver.forward() ,标准selenium的页面前进操作

core_api

3. airtest-selenium封装的接口介绍

1)图像识别接口

Airtest-Selenium对图像识别的封装有两个接口,图像识别点击和图像识别断言:

①点击Selenium Window下方的airtest_touch按钮

image

在浏览器页面上截取你想要点击位置的图片,拖拽后松开鼠标完成截图,脚本编辑窗口会自动生成1条图像识别点击的脚本

image

driver.airtest_touch(Template(r"tpl1582031994893.png", record_pos=(8.99, 5.23), resolution=(100, 100)))

②点击Selenium Window下方的airtest_touch按钮

image

在浏览器页面上截取你想要进行断言的图片,拖拽后松开鼠标完成截图,脚本编辑窗口会自动生成1条图像识别断言脚本

image

driver.assert_template(Template(r"tpl1582032716811.png", record_pos=(0.51, 1.315), resolution=(100, 100)), "成功打开airlab官网")

关于Selenium更多的断言实例,详看我们之前的推文“测试同学都应该知道的断言知识...” 。

值得注意的是,这两个接口是基于Airtest框架的图像识别封装,如果图像脚本运行时在网页中找不到对应图像,会抛出Target not found on screen的异常。

2)多标签页切换

selenium提供了切换标签页的接口。

driver.switch_to.window(driver.window_handles[number])

这个语句执行后,可以切换到第number个打开的标签页。但是对于用户来说,这个接口不是那么好理解与调用,因为这样需要记住标签打开的顺序。

而大部分时候,切换标签页的操作一般都出现在:打开新窗口、关闭标签页这两种情况下。因此,Airtset-Selenium封装了两个接口:

driver.switch_to_new_tab()
driver.switch_to_previous_tab()

在这个接口内部,Airtest-Selenium维护了标签页的组织结构。用户只需在切换到最新打开的标签页时,调用switch_to_new_tab

另外在结束当前标签页时,切换到上一个打开的标签页时,调用switch_to_previous_tab()即可,不再需要去考虑当前是第几个这样之类的问题。

3)页面截图接口

airtest-selenium提供 snapshot 接口,可以给当前的web页面截图并保存在指定的本地路径下。

# 截图并保存在指定的本地路径
driver.snapshot(r"D:/baidu.png")

# 截图并保存在默认的log路径下
driver.snapshot()

4)封装API的报告

被Airtest-Selenium封装的接口,运行过后都会生成对应的报告,在AirtestIDE中可以直接点击生成报告按钮,即可查看对应的报告内容。

image

4. 在IDE进行web自动化的小实践

这个小实践可以完成以下事情:

  • 打开一个新的chrome浏览器
  • 进入百度首页
  • 图像断言
  • 图像点击
  • 标签页切换
  • 页面后退
  • 关闭标签页

image-20220127153943272

脚本运行效果:

demo

报告查看:

report

5. 进行web自动化的常见问题

1)使用airtest-selenium封装的图像方法报错

有些同学在使用airtest-selenium封装的一些图像方法时,出现类似 name 'Template' is not defined 的报错:

image

通常是因为忘记/误删了引入Airtest库的方法,我们可以在脚本开头添加:

from airtest.core.api import *

2)混淆airtest-selenium的WebChrome()和selenium的webdriver.Chrome()

在airtest-selenium库里,我们可以通过这样的方式实例化一个chrome对象:

from airtest_selenium.proxy import WebChrome
driver = WebChrome()

而在selenium库里,我们则是通过下述方式对chrome进行实例化的:

from selenium import webdriver
driver = webdriver.Chrome()

如果我们要使用airtest-selenium封装的图像方法,像 airtest_touchsnapshotassert_template等,我们就必须实例化airtest-selenium提供的 WebChrome 类。

否则会出现类似 AttributeError: 'WebDriver' object has no attribute 'snapshot' 的报错:

image

3)暂不支持在Mac上使用airtest-selenium

目前暂不支持在Mac上使用airtest-selenium,使用时我们也会弹出如下的提示:

Current OS is not 'Windows'! You can't use airtest function of Airtest-Selenium. > <

image

4)airtest-selenium报告插件

在生成airtest-selenium(Web自动化测试)的报告时,我们需要加载专用的报告插件。

如果我们使用AirtestIDE的 查看报告 按钮来生成,会自动帮我们加载这个插件:

# 命令行添加airtest-selenium报告插件的方式
--plugin airtest_selenium.report

image

如果我们使用脚本生成测试报告,则需要手动指定 plugins 参数:

from airtest.report.report import LogToHtml

h1 = LogToHtml(script_root=r'D:\test\report01.air', log_root=r"D:\test\report01.air\log", export_dir=r"D:\test\report02" , lang='en', plugins=["airtest_selenium.report"])
h1.report()

5)unknown error: cannot find Chrome binary

这是同学们在使用airtest-selenium进行Web测试 最常问 的一个问题了。通常情况是,我们在AirtestIDE的Selenium Window辅助窗中,点击打开浏览器的按钮,可以正常打开一个chrome浏览器的窗口(因为我们事先在选项-设置中设置了chrome.exe的路径):

image

image

但是在执行airtest-selenium脚本,运行到打开浏览器窗口的代码时,却会报类似下述的报错:

selenium.common.exceptions.WebDriverException: Message: unknown error: cannot find Chrome binary
  (Driver info: chromedriver=2.37.544315 (730aa6a5fdba159ac9f4c1e8cbc59bf1b5ce12b7),platform=Windows NT 10.0.19043 x86_64)

如果我们的chrome浏览器是安装在默认路径下的(我们也非常建议将chrome浏览器安装到默认路径下,可以省去很多问题),出现上述报错时,我们需要检查以下2点:

  • chrome浏览器匹配的驱动(chromedriver)有没有放在环境变量目录位置上
  • chrome浏览器版本与驱动(chromedriver)版本是否匹配

如果没有放在正确目录下或者与现有浏览器版本不匹配,我们可以在查看安装好的chrome浏览器版本后,到这个路径下下载匹配的chromedriver:http://chromedriver.storage.googleapis.com/index.html 。

如果我们的chrome浏览器没有安装在默认路径下,也很有可能因为Selenium找不到二进制的chrome.exe文件而抛出上述的异常,通常我们可以选择以下方式来解决:

  • 卸载已安装的chrome浏览器,然后重新安装到默认路径下
  • 不重新安装的话,可以直接配置chrome浏览器的安装目录到环境变量中

当然我们也支持使用使用代码来指定chrome.exe或者chromedriver(2者的版本必须匹配)的路径:

# -*- encoding=utf8 -*-
__author__ = "AirtestProject"

from airtest.core.api import *

from selenium import webdriver
from selenium.webdriver.common.keys import Keys
from airtest_selenium.proxy import WebChrome
from selenium.webdriver.chrome.options import Options

opt = Options()
opt.binary_location = r"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"
driver = WebChrome(options=opt,executable_path=r"C:\Program Files (x86)\Google\Chrome\Application\chromedriver.exe")

6)脱离AirtestIDE运行airtest-selenium脚本时未安装库

如果我们使用AirtestIDE自带的环境来运行Web自动化脚本,则直接运行即可,因为内嵌的python环境已经事先安装好了airtest-selenium库。

但是如果我们指定使用本地python环境或者脱离AirtestIDE运行Web自动化脚本,则需要我们在对应的python环境里安装好airtest-selenium库:

pip install airtest-selenium

否则会出现 no module named 'airtest_selenium' 的报错:

image

另外,也有些同学在安装这个库时,可能会出现 no module named 'pynput'的报错,此时我们需要先安装好 pynput 库,再来安装airtest-selenium:

pip install pynput
pip install airtest-selenium

7)Web自动化的输入与键盘操作

与Android、iOS、Windows平台不一样的是,在Web自动化脚本中,我们并非使用 text 进行文本输入操作,也不是使用 keyevent 模拟键盘操作。

而是使用 send_keys,以下是一个简单的例子,我们打开百度首页后,定位到搜索文本输入框,输入一定的文本,然后执行键盘回车操作:

# -*- encoding=utf8 -*-
__author__ = "AirtestProject"

from airtest.core.api import *

from selenium import webdriver
from selenium.webdriver.common.keys import Keys
from airtest_selenium.proxy import WebChrome
driver = WebChrome()
driver.implicitly_wait(20)

auto_setup(__file__)
driver.get("https://www.baidu.com/")
sleep(1.0)
# 输入文本
driver.find_element_by_id("kw").send_keys("abc")
# 键盘回车操作
driver.find_element_by_id("kw").send_keys(Keys.ENTER)

image

8)AttributeError: 'WebElement' object has no attribute '_w3c'

通常是因为使用了本地python环境,并且本地python环境安装了selenium4,因为目前我们还不兼容selenium4,所以请同学们卸载selenium4,安装selenium3的版本即可。

image-20220127161708506

6. 拓展:selenium python学习资料