接上篇自动化测试环境搭建,现在我们介绍 webdriver 对浏览器操作的 API。
2、 页面元素定位
通过自动化操作 web 页面,首先要解决的问题就是定位到要操作的对象,比如要模拟用户在页面上的输入框中输入一段字符串,那就必须得定位到这个输入框,然后才能输入。这些对象也可以称为页面的元素,每个元素都会有很多属性,可以根据不同属性来定位元素。
Web 中常见元素有文本输入框、单选框、复选框、按钮、下拉框等,每个元素又提供了很多属性,比如 id、name、文本等。
Webdriver 提供了这些元素的定位方法,主要有以下几种:
- id
- name
- class name
- link text
- partiallink text
- tag name
- xpath
- cssSelector
2.1 id 定位
1、 打开 LMD 系统后台,输入邮箱地址及密码。
图 2:页面元素 id
脚本如下:
python
#coding=utf-8
from selenium import webdriver
driver=webdriver.Firefox()
driver.get('http://www.chuangyijia.com/admin/login')
driver.find_element_by_id('email').send_keys('lib@163.com')
driver.find_element_by_id('password').send_keys('password')
#coding=utf-8
该句表示编码格式,主要为了防止后期执行乱码。
from selenium import webdriver
从 selenium 的包中导入 webdriver 的函数。
driver=webdriver.Firefox()
通过 webdriver 的 firefox 打开一个 firefox 浏览器,firefox 也可以是其他浏览器,比如 IE ,chrome 等,然后将打开后的浏览器操作句柄赋给 driver 变量, 变量名可以自己定义,注意,后面对浏览器的操作都会用到这个对象。
driver.get('http://www.chuangyijia.com/admin/login')
通过 webdriver 的 get 方法让浏览器重定向到 LMD 的 url 地址。
driver.find_element_by_id('password').send_keys('password')
这两句的定位方式相同,从图 2 中可以看到,邮箱和密码都是 input,并且都 有很多属性,在这些属性中就有 id,邮箱的 id 为 email ,password 的 id 为password,通过 webdriver 的find_element_by_id()方法定位邮箱和密码输入 框。 Send_keys 是往输入框中输入值。
PS:查看页面中元素属性,可以通过 firefox 浏览器的查看元素方式查看,在页面中,选择你要查看的元素,右键找到"查看元素",则可以在浏览器下方看 到该元素的属性信息。 如图 3
图 3:页面元素定位
2.2 name 定位
除了上述的 id 方法,还可以通过 webdriver 的 find_element_by_name()来 定位邮箱地址的输入。例如:
python
driver.find_element_by_name('email').send_keys('test@163.com')
执行该条命令,也可以在邮箱输入框中输入邮箱地址,password 输入框一 样,主要是观察该元素是否有 name 属性,及 name 属性的值。
PS:如果该页面中存在多个元素都包含 name 属性,并且属性值相同, 则该方法无法定位到该元素。
2.3 tag name 定位
tag name,在一个页面中,每个元素都是一种标签,列入上面用到的邮箱地址 和密码都是 input,那么他们的 tag name 就是 input,如果想要使用 tag name 来定位一个元素,最好确定该页面叧有这一个标签,如果是多个,则会定位出一组元素,那么 webdriver 将不知道你要操作的究竟是哪个,所以这种状况下就不能使用 tag name 来定位了。在这个登陆界面中叧有一个登陆按钮,标签为 button ,这个标签在这个页面中叧有一个,我们可以用 tag name 来定位该元素,代码如下:
python
driver.find_element_by_tag_name('button').click()
注:click()点击的意思
2.4 Class name 定位
在查看元素中,除了看到了 tag name、id、name 等属性外,还有其他属 性,比如 class 属性,接下来,我们通过 class 来定位要操作的对象。
在登陆成功以后,页面上的左上角有一个 LMD 系统的图片头,点击该图片, 可以回到管理界面的首页,在这里我们通过 class 来定位,从下图中,可以看到它的标签为 span,有一个 class 属性,属性值为 first,定位代码如下:
python
driver.find_element_by_class_name('first').click()
2.5 css 定位
css 是 Cascading Style Sheet 的缩写 ,是用于(增强)控制网页样式并允 许将样式信息不网页内容分离的一种标记性语言。 Css 本身是使用选择器来定 位元素,并对 html 中元素进行格式化。 Selenium 也可以利用 css 的选择器进行选择被操作元素,操作相对上面几种定位方式而言更加灵活。
例如:定位之前登陆页面的邮箱和密码,使用 css 来定位,代码如下:
python
driver.find_element_by_css_selector( '#emai').send_keys('lib@1 63.com')
其中#email 为 css 选择器选择方式,以#来标示,说明在这里 css 通过该 元素的 id 来选择的。
通过 css 来定位登陆页面中的登陆按钮,代码如下:
python
driver.find_element_by_css_selector('.btn').click()
在 find_element_by_css_selector()函数来实现定位,将定位元素的 css 诧 句放入参数位置。
通过 css 选择器方式定位邮箱输入框:
python
driver.find_element_by_css_selector('input[name="email"]' ).clear()
通过 css 方式定位登陆按钮
python
driver.find_element_by_css_selector('button.btn').click()
css 的定位方式很多,也狠灵活,这里介绍了几种常见操作。如果对 css 选择器定位不是很理解,可以借助 firefox 浏览器的功能,完成 css 定位,例如在登陆界面中, 不知道如何使用 css 定位登陆按钮,则可以参考如下操作:
在登陆页面,鼠标选中登陆按钮,右键查看元素,在下方开发者工具栏中,鼠标 选中登陆的代码,右键,选择复制唯一选择器,然后将复制的内容粘贴到find_element_by_css_selector()的方法中即可。
也可以参考 css 样式的选择器方法。
2.6 xpath 定位
什么是 xpath,是一门在 XML 文档中查找信息的语言。 XPath 可用来在 XML 文 档中对元素和属性进行遍历。XPath 是 W3C XSLT 标准的主要元素, 并且 XQuery 和 XPointer 都构建于 XPath 表达之上。因此,对 XPath 的理解是很多高级 XML 应用的 基础。
因为 html 可以看作另一种形式的 xml,所以 selenium 也可以通过 xpath 定位页面 元素, xpath 扩展了常规 web 元素属性的定位方式,提供了更多的操作方式。
通过 xpath 方式定位登陆页面的邮箱和密码:
python
driver.find_element_by_xpath('//input[@id="email"]').send_key s('lib@163.com')
定位到当前页面的 input 属性, 在获取该类属性中 id 为 email 的。
driver.find_element_by_xpath('//input[@id="password"]').send_ keys('123456')
通过 xpath 的层级定位方式定位登陆页面的登陆按钮:
python
driver.find_element_by_xpath('//form[@id="login"]/button').click()
先定位到 button 的上级属性, button 是属于 form 元素的下级元素,
定位到 id 为 login 的 form,然后查找 form 下的 button,在这个页面 中,
id 为 login 的 form 下只有 1 个 button,所以这里这么写是可以 的,如果这里 form 下有多个 button,则需要其他方式了。
通过 xpath 定位时,如果通过上级元素来定位它的子元素,而子元素又有多个标签是相同的,就像上面的案例中,如果有 form 中有多个 button 标签,则会出错。
下面通过 xpath 的层级定位方式来定位邮箱和密码,邮箱和密码的标签都是 input,他们的上级标签为 form,那么先定位上级的 form,通过//form[@id="login"]来定位form。如果此时通过//form[@id="login"/input]来定位邮箱戒密码,则会出现问题,webdriver 会发现该 form 下有多个 input,因此不知道用户究竟要操作哪个,则可以按照下列方法定位,邮箱和密码标签都是 input,邮箱为第一个 input,密码为第二个input,则代码如下:
python
driver.find_element_by_xpath('//form[@id="login"]/input[1]').
send_keys('lib@163.com')
定位 id 为 login 的 form,并操作该 form 下的第一个 input,即邮箱 地址的输入框
driver.find_element_by_xpath('//form[@id="login"]/input[2]').
send_keys('lib@163.com')
定位 id 为 login 的 form,并操作该 form 下的第二个 input,即密码 地址的输入框
Xpath 中除了可以用 id 之外,也可以使用其他属性,例如:
python
driver.find_element_by_xpath('//input[@name="email"]').send_k eys('lib@163.com')
这里是通过 xpath,定位 name 为 email 的输入框。
利用 xpath ,通过页面元素上的文本来定位操作对象。
python
driver.find_element_by_xpath('//button[contains(text(),"登录 ")]').click()
定位元素标签为 button,并且该标签上的文字为"登录".
2.7 Link text 定位
在页面定位元素时,有时候定位对象不是一个文本框,也不是按钮,而是一个超链接此时我们可以通过 link text 方式定位对象。
例如:在 LMD 系统中,登录成功之后,点击待审核创意后,会出现项目管理, 以及项目管理中的子功能列表,而列表是通过超链接方式实现的,想要点击预售管理 时,通过文字定位无疑是最容易看懂该步骤在做什么,代码如下
python
from selenium import webdriver
导入 selenium 的 webdriver 模块
driver=webdriver.Firefox()
打开 firefox 浏览器
driver.get('http://www.chuangyijia.com/admin/login') 打开 LMD 后台登陆页面
sleep(2)
等待2秒
driver.find_element_by_xpath('//form[@id="login"]/input[1]').
send_keys('lib@163.com')
输入登陆的邮箱地址
driver.find_element_by_xpath('//form[@id="login"]/input[2]').
send_keys('12345678')
输入登陆密码
driver.find_element_by_xpath('//form[@id="login"]/button').click()
点击登陆按钮
driver.find_el
ement_by_css_selector('#dashboard-menu >li:nth-child(2) > a:nth-child(1)').click()
这里是通过 css 方式定位,点击待审核创意
driver.find_element_by_link_text('预售管理').click()
点击待审核创意后,页面会出现图 4 的页面,这里是点滴子功能列表中的预售管理。
图 4
2.8 partialinktext 定位
在页面通过文本定位超链接时,有些链接文本很长,selenium 的 webdriver 提供了可以通过匹配链接中的部分文本来定位该元素,则通过find_element_by_partialink_link_text()方法来定位该元素。
例如:在 LMD 系统登陆后,点击待审核创意后,可以看到项目管理,及项目管理的子功能,在子功能中,想点击预售订单管理,用 link_text 方法时,需要将所有文本都写上去,而 partialink_link_text()时,可以叧写部分文本,代码如下:
python
driver.find_element_by_partial_link_text('售订单').click()
在点击待审核创意之后,会显示项目管理及项目管理子功能,在此页 面中,只有预售订单管理 的文本中包含"售订单"字符,可以用partial_link_text 方法来定位该元素。
2.9 check box 定位
在 web 页面的元素中,还会有单选框和复选框的操作。下列代码是对百度的设置中的搜索设置页面的操作,将"是否希望在搜索时显示搜索框提示"设 置为不显示,下面的代码稍微复杂了一些,牵扯到还没有讲到的内容,这里先简单介绍下:
python
from selenium import webdriver
导入 webdriver
from selenium.webdriver.common.action_chains importActionChains
因为百度的设置页面比较特殊, 需要将鼠标放到设置上,然后才会显示下拉框,才能从下拉框中选择搜索设置,所以需要用到鼠标的操作, 这里就需要导入鼠标操作的模块
driver=webdriver.Firefox()
driver.get('https://www.baidu.com')
打开百度页面
seting=driver.find_element_by_link_text('设置')
找到设置所在的位置
ActionChains(driver).move_to_element(seting).perform() 将鼠标移动到设置上
driver.find_element_by_link_text('搜索设置').click() 点击搜索设置
sleep(1)
driver.find_element_by_xpath('//label[contains(text(),"不显示 ")]').click()
点击搜索设置中的不显示的单选框,也可以使用 xpath 的方式定位到单选框, 直接点击
driver.find_element_by_xpath('//label[@for="s1_2"]').click()
2.10 下拉框定位
在 web 页面中,进行各种操作时,无法避免要对下拉框进行操作,下面对LMD 后台管理中,对创意进行查询时,查询条件就是通过下拉框来操作,页面如下:
下面通过 selenium 的 webdriver,对审核状态下拉框的处理,在下拉框中,选择定价。
代码如下(登陆代码没有贴上来,这里是登陆后的操作代码):
python
driver.find_element_by_css_selector('#dashboard-menu >li:nth-child(2) > a:nth-child(1)').click()
点击登陆后页面中的待审核创意
driver.find_element_by_css_selector('select.span1:nth-child(8)').click()
定位到下拉框,然后点击,点击后,会显示该下拉框中所有选项。
driver.find_element_by_xpath('//option[contains(text(),"定价 ")]').click()
在下拉框的所有选项中,找到定价。
第二种方式:
python
check_status=driver.find_element_by_xpath('//select[@name="st atus"]')
找到下拉框的元素,将操作句柄赋给变量 check_status。
check_status.find_element_by_xpath('//option[@value="8"]').cl ick()
通过操作句柄 check_status 来选择下拉框中的选项