selenium+python自动化测试之页面元素定位


Posted in Python onJanuary 23, 2019

上一篇博客selenium+python自动化测试(二)?使用webdriver操作浏览器讲解了使用webdriver操作浏览器的各种方法,可以实现对浏览器进行操作了,接下来就是对浏览器页面中的元素进行操作,操作页面元素,首先要找到操作的元素,对元素进行定位

查看页面源码

要定位页面元素,需要找到页面的源码,IE浏览器中,打开页面后,在页面上点击鼠标右键,会有“查看源代码”的选项,点击后就会进入页面源码页面,在这里就可以找到页面的所有元素

使用Chrome浏览器打开页面后,在浏览器的地址栏右侧有一个图标,点击这个图标后,会出现许多菜单项,选择更多工具里的开发者工具,就会出现页面的源码,不同版本的浏览器菜单选项可能不同,但是都会在开发者工具里找到页面的源码

Firefox浏览器打开页面后,在右键菜单里也可以找到“查看页面源代码”的选项。在Firefox中,可以使用浏览器自带的插件查看定位元素,在Firefox的附加组件里搜索firebug进行下载,安装firebug组件后会在浏览器的工具栏中多出一个小虫子的图标,点击这个图标就可以打开组件查看页面源码,打开后如下图所示

selenium+python自动化测试之页面元素定位

以百度首页搜索页面为例,看一下webdriver定位元素的八种方式

使用id定位

在页面源码中找到搜索输入框的元素定义

<input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">

可以看到输入框有一个有一个id的属性,调用find_element_by_id()根据id属性来找到元素,参数为属性的值

input_search = driver.find_element_by_id("kw")

使用name定位

使用find_element_by_name()根据name属性找到元素,参数为name属性的值

搜索框有一个name=”wd”的属性,使用name查找搜索输入框元素

input_search = driver.find_element_by_name("wd")

使用className定位

使用find_element_by_class_name()根据className属性找到元素,参数为className属性的值

搜索框有一个class=”s_ipt”的属性,使用className查找元素

input_search = driver.find_element_by_class_name("s_ipt")

使用tagName定位

使用find_element_by_tag_name()根据tagName属性找到元素,参数为元素标签的名称

每个页面的元素都有一个tag,搜索框的标签为input,有时候一个页面里有许多相同的标签,所以用这种方法找到的元素一般都不准确,除非这个元素使用的标签在这个页面里是唯一的。一般不会使用这种方式来定位元素

input_search = driver.find_element_by_class_name("input")

使用link_text定位

页面上都会有一些文本链接,点击链接后会打开一个新的页面,这些可以点击的链接可以使用find_element_by_link_text来定位,百度首页上方有如下几个元素

selenium+python自动化测试之页面元素定位

例如要定位“新闻”,找到元素的代码,有一个href的属性,这是点击后打开的页面

<a href="http://news.baidu.com" rel="external nofollow" name="tj_trnews" class="mnav">新闻</a>

使用link_text查找元素,参数为元素的文本信息

news = driver.find_element_by_link_text("新闻")

使用partial_link_text定位

这种方式类似于link_text的定位方式,如果一个元素的文本过长,不需要使用文本的所有信息,可以使用其中的部分文本就可以定位

使用partial_link_text查找百度首页的“新闻”元素,参数为文本信息,可以使用全部的文本,也可以使用部分文本

news = driver.find_element_by_link_text("新闻") //使用全部文本
news = driver.find_element_by_link_text("新") //使用部分文本

使用css selector定位

使用css属性定位元素有多种方法,可以使用元素的id、name、className,也可以使用元素的其他属性,如果一个元素没有上述的几种属性或者定位不到时,可以使用css来定位

还是使用百度搜索框的实例来说明css定位的用法

<input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">
  • css使用元素的id定位

css属性使用id定位时,使用#号表示元素的id

input_search = driver.find_element_by_css_selector("#kw") //使用元素的id定位
  • css使用元素的class定位

css属性使用class定位时,使用.号表示元素的class

input_search = driver.find_element_by_css_selector(".s_ipt") //使用元素的class定位
  • css使用元素的tag定位

css属性使用tagName定位时,直接使用元素的标签

input_search = driver.find_element_by_css_selector("input") //使用元素的tagName定位
  • css使用元素的其他属性

除了上述3种属性,css属性可以使用元素的其他属性定位,格式如下

input_search = driver.find_element_by_css_selector("[maxlength='255']") //使用元素的maxlength属性定位
input_search = driver.find_element_by_css_selector("[autocomplete='off']") //使用元素的autocomplete属性定位

可以在参数中加入元素的标签名称

input_search = driver.find_element_by_css_selector("input#kw") //使用元素的id定位
input_search = driver.find_element_by_css_selector("input.s_ipt") //使用元素的class定位driver.find_element_by_css_selector("input[maxlength='255']") //使用元素的maxlength属性定位
input_search = driver.find_element_by_css_selector("input[autocomplete='off']") //使用元素的autocomplete属性定位
  • css的层级定位

当一个元素使用自身的属性不容易定位时,可以通过它的父元素来找到它,如果父元素也不好定位,可以再通过上元素来定位,以此类推,一直找到容易定位的父元素为止,通过层级定位到需要查找的元素

通过Firefox的firebug组件查看百度首页的源码

selenium+python自动化测试之页面元素定位

通过层级来定位搜索框

input_search = driver.find_element_by_css_selector("form#form>span:nth-child(1)>input")
input_search = driver.find_element_by_css_selector("form.fm>span:nth-child(1)>input")

搜索框的父元素为span标签,span的父元素为form,form有id和class属性,可以通过这两个属性来定位,找到form元素后,form下有多个span标签,所以要使用span:nth-child(1),表示form下的第一个span标签,这种用法很容易理解,表示第几个孩子,最后是span下的input标签,span下只有一个input,所以就可以定位到搜索框

  • css逻辑运算

用一个属性来定位元素时,如果有其他元素的属性和此元素重复,可以组合多个属性来功共同定位

组合多个属性定位元素定位百度搜索框

input_search = driver.find_element_by_css_selector("input[id='kw'][name='wd']")

在元素内定义的属性,都可以使用css来定位,使用其他几种方式无法定位到元素时,可以使用css,够强大!

使用xpath定位

XPath是一种在XML文档中定位元素的语言。因为HTML可以看做XML的一种实现,所以selenium用户可是使用这种强大语言在web应用中定位元素。xpath也可以通过元素的各种属性定位到元素

使用元素属性定位

input_search = driver.find_element_by_xpath("//*[@id='kw']") //通过元素id查找元素
input_search = driver.find_element_by_xpath("//*[@name='wd']") //通过元素name查找元素
input_search = driver.find_element_by_xpath("//*[@class='s_ipt']") //通过元素class查找元素
input_search = driver.find_element_by_xpath("//*[@maxlength='255']") //通过其他属性查找元素
input_search = driver.find_element_by_xpath("//*[@autocomplete='off']") //通过其他属性查找元素

前面的*号表示查找所有的标签元素,可以替换为标签名称,更准确的定位元素

input_search = driver.find_element_by_xpath("//input[@id='kw']") //通过元素id查找元素
input_search = driver.find_element_by_xpath("//input[@name='wd']") //通过元素name查找元素
input_search = driver.find_element_by_xpath("//input[@class='s_ipt']") //通过元素class查找元素
input_search = driver.find_element_by_xpath("//input[@maxlength='255']") //通过其他属性查找元素
input_search = driver.find_element_by_xpath("//input[@autocomplete='off']") //通过其他属性查找元素
  • xpath层级定位

xpath也可以通过层级来定位,定位方式

selenium+python自动化测试之页面元素定位

input_search = driver.find_element_by_xpath("//input[@id='form']//span[1]//input")
driver.find_element_by_xpath("//input[@class='fm']//span[1]//input")

查找效果和通过css的层级定位是相同的,意思是form元素下面的第一个span元素的input标签子元素

  • xpath

xpath的逻辑元素通过and运算符来组合元素属性

input_search = driver.find_element_by_xpath("//input[@id='kw' and name='wd']")
  • 属性匹配

xpath中还有一种更强大的定位方式,通过模糊匹配元素的属性

news = driver.find_element_by_xpath("//a[contains(text(), '新闻')]") //查找text中包含"新闻"的元素
input_search = driver.find_element_by_xpath("//input[contains(@id, 'kw']") //查找id中包含"kw"的元素
input_search = driver.find_element_by_xpath("//input[starts-with(@id, 'k']") //查找id以"k"开头的元素
input_search = driver.find_element_by_xpath("//input[ends-with(@id, 'w']") //查找id以"w"结尾的元素
input_search = driver.find_element_by_xpath("//input[matchs(@id, 'k*']") //利用正则表达式查找元素

上面介绍了查找页面元素的八种方法,通过这些方式找到的都是单个元素,如果需要批量查找元素,还有和上面方式对应的八种复数形式

find_elements_by_id
find_elements_by_name
find_elements_by_class_name
find_elements_by_tag_name
find_elements_by_link_text
find_elements_by_partial_link_text
find_elements_by_css_selector
find_elements_by_xpath

这8种方法查找到的是一组元素,返回的是list,可以通过索引来操作元素

例如页面上的复选框和单选框,或者页面上有多个属相相同的输入框,这些属性相同的一组元素,可以批量获取,然后过滤出需要操作的元素,选择其中的一个或者多个进行操作

通过百度首页搜索“selenium”关键字,会出现许多搜索结果,这些搜索结果具有相同的属性,不同的是属性的值不同,定位这些元素时,可以使用批量定位的方法

看下面的代码

selenium+python自动化测试之页面元素定位

这是搜索selenium关键字后的页面结果,每一个搜索结果都是可点击的链接,定位这些元素的方法:

search_results = driver.find_elements_by_css_selector("h.t>a")
search_results[3].click() //通过索引点击第4条搜索结果

第二个例子

<html>
 <head></head>
 <body>
 <h3>checkbox</h3>
 <div class="well">
  <form class="form-horizontal">
  <div class="control-group">
   <label class="control-label" for="c1">checkbox1</label>
   <div class="controls">
   <input type="checkbox" id="c1" />
   </div>
  </div>
  <div class="control-group">
   <label class="control-label" for="c2">checkbox2</label>
   <div class="controls">
   <input type="checkbox" id="c2" />
   </div>
  </div>
  <div class="control-group">
   <label class="control-label" for="c3">checkbox3</label>
   <div class="controls">
   <input type="checkbox" id="c3" />
   </div>
  </div>
  </form>
 </div>
 </body>
</html>

这个页面上有3个复选框,打开后如下图所示:

selenium+python自动化测试之页面元素定位

操作复选框

//查找所有的复选框并点击
checkboxs = driver.find_element_by_xpath('input[@type="checkbox"]')
for checkbox in checkboxs:
 checkbox.click()
//点击最后一个复选框
checkboxs[2].click()

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Python 相关文章推荐
python实现每次处理一个字符的三种方法
Oct 09 Python
Python通过递归遍历出集合中所有元素的方法
Feb 25 Python
简单介绍Python中的try和finally和with方法
May 05 Python
python snownlp情感分析简易demo(分享)
Jun 04 Python
Python实现的递归神经网络简单示例
Aug 11 Python
Python3.5编程实现修改IIS WEB.CONFIG的方法示例
Aug 18 Python
Python实现的选择排序算法原理与用法实例分析
Nov 22 Python
Python使用SQLite和Excel操作进行数据分析
Jan 20 Python
使用pytorch搭建AlexNet操作(微调预训练模型及手动搭建)
Jan 18 Python
宝塔面板成功部署Django项目流程(图文)
Jun 22 Python
Python爬虫之Selenium多窗口切换的实现
Dec 04 Python
python中slice参数过长的处理方法及实例
Dec 15 Python
python 实现矩阵上下/左右翻转,转置的示例
Jan 23 #Python
selenium+python自动化测试之使用webdriver操作浏览器的方法
Jan 23 #Python
对Python实现累加函数的方法详解
Jan 23 #Python
python实现K近邻回归,采用等权重和不等权重的方法
Jan 23 #Python
Python+OpenCV图片局部区域像素值处理改进版详解
Jan 23 #Python
selenium+python自动化测试之环境搭建
Jan 23 #Python
在python带权重的列表中随机取值的方法
Jan 23 #Python
You might like
MySQL数据源表结构图示
2008/06/05 PHP
php中批量修改文件后缀名的函数代码
2011/10/23 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
php中的buffer缓冲区用法分析
2019/05/31 PHP
Jquery上传插件 uploadify v3.1使用说明
2012/06/18 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
2014/05/11 Javascript
JQuery中属性过滤选择器用法实例分析
2015/05/18 Javascript
ECMAScript6块级作用域及新变量声明(let)
2015/06/12 Javascript
使用Node.js处理前端代码文件的编码问题
2016/02/16 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
2016/12/30 Javascript
JS多文件上传的实例代码
2017/01/11 Javascript
js实现tab切换效果
2017/02/16 Javascript
js中new一个对象的过程
2017/02/20 Javascript
webpack3+React 的配置全解
2017/08/21 Javascript
利用nvm管理多个版本的node.js与npm详解
2017/11/02 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
2018/07/25 Javascript
JS实现灯泡开关特效
2020/03/30 Javascript
简单了解Vue computed属性及watch区别
2020/07/10 Javascript
vue 使用原生组件上传图片的实例
2020/09/08 Javascript
Python实现二叉堆
2016/02/03 Python
windows下python安装小白入门教程
2018/09/18 Python
Python 实现「食行生鲜」签到领积分功能
2018/09/26 Python
Python实现批量修改图片格式和大小的方法【opencv库与PIL库】
2018/12/03 Python
详解Python是如何实现issubclass的
2019/07/24 Python
python模拟实现分发扑克牌
2020/04/22 Python
django创建超级用户时指定添加其它字段方式
2020/05/14 Python
使用Python解析Chrome浏览器书签的示例
2020/11/13 Python
教师个人鉴定材料
2014/02/08 职场文书
厂长岗位职责
2014/02/19 职场文书
技校学生个人职业生涯规划范文
2014/03/03 职场文书
五五普法心得体会
2014/09/04 职场文书
教师作风建设剖析材料
2014/10/11 职场文书
服务承诺书
2015/01/19 职场文书
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
2021/04/07 HTML / CSS
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
2022/04/06 Vue.js
Android使用EventBus发送消息,Fragment中接收消息的方法会执行多次
2022/04/24 Java/Android