Skip to content

十二、Airtest-Selenium快速上手实战

前言

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

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

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

IDE中的Selenium窗口

在AirtestIDE中调出Selenium的窗口

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

image

image

插入初始代码的快捷按钮

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的路径设置好,才能正常插入上述代码。

image

Selenium的常用方法

打开指定网址

我们以打开百度首页为例子:

driver.get("https://www.baidu.com/")

driver.get() 方法会在浏览器中打开一个指定的网址,给它传入网址地址即可。

最大化窗口
driver.maximize_window()
关闭窗口/浏览器
# 关闭当前窗口,如果浏览器此时只有1个窗口,浏览器也会被关闭
driver.close()

# 退出驱动关闭所有窗口
driver.quit()

Airtest-Selenium简介

上文我们提到Airtest-Selenium是基于Selenium语法的,但是Airtest的开发者们还另外封装了如下方法:

图像识别接口

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的异常。

多标签页录制

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()即可,不再需要去考虑当前是第几个这样之类的问题。

生成报告

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

image

实战小案例

我们以1个小的实战案例来总结今天讲述的内容:

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

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)

driver.get("https://airlab-gl.163.com/b2b")

driver.maximize_window()

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

driver.airtest_touch(Template(r"tpl1582034527805.png", record_pos=(8.975, 5.765), resolution=(100, 100)))


driver.switch_to_new_tab()

driver.switch_to_previous_tab()

driver.quit()

image

调试工具实战

在UI自动化测试中,最重要的就是对页面元素进行定位。我们可以利用调试工具来查看元素的属性,从而更好地实现元素定位。

以chrome浏览器为例,在打开的浏览器空白处点击鼠标右键,然后选择快捷菜单中的“检查”选项。浏览器就会弹出如下的调试信息窗口:

image

接下来我们只要点击调试信息窗口左上角带有箭头的图标按钮,然后再将鼠标移动到需要进行定位的元素上,窗口中就会显示出该元素的属性:

image

在上图可以看出,“百度一下”按钮的ID为"su",CLASS_NAME为 "bg s_btn"。

比较特别的是,如果我们想知道元素的XPATH或者CSS_SELECTOR这些属性值时,我们可能不能直接在元素代码查看。

这时我们可以在定位到属性的代码位置,点击鼠标右键,然后在快捷菜单中选择“Copy”选项,之后再选择“Copy XPath”或者“Copy seletor”即可得到元素的XPATH或者CSS_SELECTOR属性。

image

Selenium元素定位

元素属性

首先我们需要明白,在Selenium自动化测试中,元素定位都是根据元素属性来进行的。

元素属性有:ID、NAME、CLASS_NAME、TAG_NAME、CSS_SELECTOR、XPATH、LINK_TEXT、PARTIAL_LINK_TEXT等。

元素定位

Selenium给我们提供了很多根据元素属性来定位元素的方法:

find_element_by_id()
find_element_by_name()
find_element_by_class_name()
find_element_by_xpath()
find_element_by_link_text()
find_element_by_partial_link_text()
find_element_by_css_selector()

以上方法需要填写的参数均是元素对应的属性值。

我们来实操1个小例子,要求启动chrome浏览器后,最大化浏览器,之后再打开百度首页,定位到首页的搜索框,输入搜索关键词“Airtest”。

利用调试工具,我们可以得到百度首页搜索框这个元素的属性:

image

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

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.maximize_window()
driver.implicitly_wait(20)

driver.get("https://www.baidu.com/")

driver.find_element_by_id('kw').send_keys('Airtest')

上述代码根据搜索框的ID属性来定位,之后再发送搜索的关键词“Airtest”,最终的页面结果如下:

image

Selenium与页面的交互

对浏览器的操作

常见的对浏览器的操作有获取页面代码、获取页面title、页面前进后退和刷新关闭等等。

这些操作都可以由WebDriver的属性来支持。

from selenium import webdriver

driver = WebChrome()

# 获取当前页面代码
driver.page_source

# 获取页面title
driver.title

# 获取浏览器名称
driver.name

# 获取当前窗口句柄
driver.current_window_handle

# 获取所有窗口句柄
driver.window_handles

# 页面前进
driver.forward()

# 页面后退
driver.back()

# 刷新页面
driver.refresh()
对元素的操作

WebElement类提供了很多方法来对元素进行操作,例如清空、检查是否可编辑、是否被选中等。

我们还是以百度搜索框为例,定位搜索框,输入关键词“Airtest”,清空输入的关键词,检查搜索框是否可见、可编辑,以及搜索框是否被选中。

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.maximize_window()
driver.implicitly_wait(20)

driver.get("https://www.baidu.com/")
# 定位百度首页的搜索框
ss = driver.find_element_by_id('kw')
# 输入关键词
ss.send_keys('Airtest')
driver.implicitly_wait(20)
# 清空关键词
ss.clear()
# 检查是否可见、可编辑、是否被选中
print(ss.is_displayed())
print(ss.is_enabled())
print(ss.is_selected())

image

下拉框定位

在Web应用的自动化测试中,我们经常会遇到需要处理下拉框的情况。

下拉框选项定位需要用到Select类,定位的基本步骤为:
①定位到下拉框这个元素
②实例化Select类
③调用Select类里面的方法来实现下拉框选项定位

Select类用来定位选项的方法有:

# 利用索引进行定位(注意索引是从0开始的)
select_by_index('索引值')

# 利用选项的value进行定位
select_by_value('value值')

# 利用选项的文本进行定位
select_by_visible_text('文本值')

下面我们来看1个实操的小例子,我们选取了百度设置中1个输入法设置的下拉框来进行实操,用调试工具查看到这个下拉框的详情如下:

image

from airtest.core.api import *
from selenium import webdriver
from selenium.webdriver.common.keys import Keys
from airtest_selenium.proxy import WebChrome
# Select类需要引入
from selenium.webdriver.support.select import Select

driver = WebChrome()
driver.maximize_window()
driver.implicitly_wait(20)
driver.get("https://www.baidu.com/gaoji/preferences.html")
# 定位下拉框元素
ime_select = driver.find_element_by_id('ime')
# 实例下拉框
select = Select(ime_select)

select.select_by_index(0)
print('1.此时下拉框选中选项的值为:',ime_select.get_attribute('value'))

select.select_by_value('2')
print('2.此时下拉框选中选项的值为:',ime_select.get_attribute('value'))

select.select_by_visible_text('关闭')
print('3.此时下拉框选中选项的值为:',ime_select.get_attribute('value'))

image

弹出框定位

在Selenium中,Alert类专门用来处理各种弹出框。在使用时,这个类同样需要引入。

我们依旧以上述页面作为例子,点击“恢复默认”的按钮,会弹出一个警告框。

image

下面的实例可以实现点击“恢复默认”按钮,打印按钮的文本信息,再点击弹窗的确认按钮。

from airtest.core.api import *

from selenium import webdriver
from selenium.webdriver.common.keys import Keys
from airtest_selenium.proxy import WebChrome
# 引入Alert类
from selenium.webdriver.common.alert import Alert
import time as t

driver = WebChrome()
driver.maximize_window()
driver.implicitly_wait(20)

driver.get("https://www.baidu.com/gaoji/preferences.html")

driver.find_element_by_xpath('//*[@id="restore"]').click()

t.sleep(5)
print('alert弹出框的文本信息为:',driver.switch_to_alert().text)

driver.switch_to_alert().accept()

image

小结

关于Selenium的操作就本期就先讲到这里了,上述所有实操都是在AirtestIDE中实现的。

当然Selenium中还有一些鼠标、键盘事件等,有机会我们后续还会在本公众号中更新。