网站首页 > 技术文章 正文
本章节主要内容:
- selenium6个简单元素定位方式
- selenium2个综合元素定位方式
- selenium定位方法的使用
8大元素定位方式
Selenium对网页的控制是基于各种前端元素的,在自动化过程中,对于元素的定位是基础,只有匹配到对应元素才能进行后续的自动化控制。
selenium6个简单元素定位方式
根据ID定位
根据id进行元素定位。
元素定义:
<input id="kw" >
元素定位:
ele1 = driver.find_element_by_id("kw"); #查找id为kw的元素
根据name定位
根据name进行元素定位。
元素定义:
<input name="wd" value="" >
元素定位:
driver.find_element_by_name("wd") #查找name属性值为wd的元素
根据Link Text定位
通过超链接字符串定位元素
元素定义:
<a href="http:#news.baidu.com" name="tj_trnews" class="mnav">新闻</a>
元素定位:
driver.find_element_by_link_text("新闻"); #查找超链接文字为'新闻'的元素
根据Partial Link Text定位
通过超链接字符串定位元素
元素定义:
<a href="http:#news.baidu.com" target="_blank" >新闻</a>
元素定位:
driver.find_element_by_partial_link_text("新"); #查找超链接文字包含'新'的元素
根据Tag Name定位
根据tagName进行元素定位,定位到的元素可能是多个。
元素定义:
<a href="http:#news.baidu.com" class="mnav">新闻</a>
元素定位:
driver.find_element_by_tag_name("a"); #查找超链接元素
根据Class Name定位
通过元素属性class定位元素。
元素定义:
<input class="s_ipt" value="" maxlength="255" >
元素定位:
driver.find_element_by_class_name("s_ipt"); #查找class值为's_ipt'的元素
*若class的值中有空格,需要借助xpath或cssSelector处理。
selenium2个综合元素定位方式
根据Xpath表达式定位
- XPath 是一门在 XML 文档中查找信息的语言
- XPath 使用路径表达式来选取 XML 文档中的节点或者节点集
示例:
driver.find_element_by_xpath(".#input[@class='s_ipt']");
浏览器中的开发者工具
F12---打开或关闭浏览器自带开发者工具
针对UI界面查找元素,可获取对应前端代码或者进一步xpath,cssSelector值
- 绝对路径,从根节点开始,以/html开头:
xpathstr = "/html/body/div[1]/div[1]/div/div[1]/div/form/span[1]/input";driver.find_element_by_xpath(xpathstr)
特点:路径唯一,但是通常比较深,容易受页面改动影响
- 相对路径,以#*开头,从任意位置开始:
xpathstr="#input[@id='kw']"driver.find_element_by_xpath(xpathstr);
特点:书写形式灵活多样,推荐使用
根据标签类型定位:
xpathStr="#input" #input类型的所有元素
根据元素顺序定位:
xpathStr="#input[2]" #所有层级中的第二个input元素xpathStr="#div[last()-1]" #查找页面上各个层级中倒数第二个div元素
根据元素属性定位:
xpathStr="#input[@value]" #input类型的标签,并且有value属性的元素xpathStr="#input[@value='查询']" #input类型value值为'查询'的元素
使用运算符:
xpathStr="#input[@value='查询' and @id='xx']" #input类型value属性值为'
查询'并且id属性为xx的元素
xpathStr="#input[@maxlength<256]" #maxlength值小于256的input元素
层级与属性结合定位:
xpathStr="#form/input" #form元素下的input子元素xpathStr="#div[@class]/a[3]" #div的第三个a标签元素,div具有class属性
使用通配符:
xpathStr="#tools/*" # 选出所有的tools所有的子元素xpathStr="#*[@*="s_tab"]" #任意类型,任意属性值为's_tab'的元素
模糊匹配模式:
xpathStr="#a[contains(@href, 'logout')]" #使用contains函数进行部分匹配:xpathStr="#a[contains(text(),'退出')]" #超链接文本内容包括'退出'字符:
根据CSS Selector选择器定位
CSS: Cascading Style Sheets层叠样式表,用来为HTML标签添加样式。
CSS Selector:css选择器可以帮助我们选中需要添加样式的标签。是css中进行元素查找的方式。
选择器类型:
- 标签选择器
- 类选择器
- ID选择器
- 属性选择器
- 子元素选择器
- 后代选择器
- 兄弟选择器
- 交集选择器
- 并集选择器
- 序列选择器
多个属性合并查找
cssStr="input#username");查找input类型且id为username的元素cssStr=".passwd-clss.name1";#查找class属性为passwd-class name1的元素
根据序号查找:
cssStr="form :first-child" #定位到form下所有级别的第一个子元素cssStr="form>:last-child" #定位到form的最后一个子元素cssStr="form :nth-child(2)" #定位到form的第二个子元素cssStr="form input:first-child") #定位到form下所有级别的第一个并且为input的元素
模糊匹配
cssStr="input[id ^= 'ctrl']" #匹配id以ctrl开头的input类型元素cssStr="input[id $= 'ctrl']" #匹配id以ctrl结尾的input类型元素cssStr="input[id *= 'ctrl']" #匹配id包含ctrl的input类型元素cssStr="input:not([type='radio'])" #/匹配input节点中type不为radio的所有节点
三、定位方式选择
- 当页面元素有id属性时,尽量用id来定位;
- 当有链接需要定位时,可以考虑linkText或partialLinkText方式;
- 当要定位一组元素相同元素时,可以考虑用tagName或className;
- xpath很强悍,但采用遍历页面的方式性能不是很好,
- cssSelector定位速度比较快,效率高。
- 考虑稳定性。
- 一般ID>Name>CSS>XPath
find_element_xx与find_elements_xx
两者都是元素定位方法,使用时区别如下:
find_element_by_xx:
如果没有匹配到元素则执行报错;
如果匹配到一个元素返回元素;
如果匹配到多个元素返回第一个元素;
find_elements_by_xx:
如果没有匹配到元素则返回空列表;
如果匹配到一个元素返回包含一个元素的列表;
如果匹配到多个元素返回所有匹配元素列表;
driver.find_xx与webElement.find_xx
除了使用driver对象提供的方法进行元素定位,也可以通过Web Element对象提供的方法进行元素定位:
通过driver对象调用:
driver.find_element_by_id(id_)
通过webElement对象调用:
ele = driver.find_element_by_id(id_)ele.find_element_by_id(,id_)
两者元素查找范围不同:
driver的方法是在当前DOM树中进行元素查找。webElement的方法是在当前元素范围内进行查找。
猜你喜欢
- 2024-11-09 「项目实战」.作家管理系统之Web应用(四)
- 2024-11-09 jQuery 单引号和双引号区别 js单双引号转义
- 2024-11-09 jQuery的DOM操作 jquery对象和dom对象
- 2024-11-09 CSS2与CSS3中常用的伪类汇总大全 css伪类hover
- 2024-11-09 想让AI 驱动 UI 测试?大佬推荐这个自动化工具!
- 2024-11-09 CSS怎么选择除了第一个子元素外的其余同级子元素
- 2024-11-09 js函数--倒计时模块+无缝滚动 js实现倒计时60秒的简单代码
- 2024-11-09 Web前端开发-CSS中伪类和伪元素 css3伪类和伪元素
- 2024-11-09 CSS 中的最后一个子级选择器与最后一个类型选择器
- 2024-11-09 关于前端开发的20篇文档与指南 前端开发方法
- 标签列表
-
- content-disposition (47)
- nth-child (56)
- math.pow (44)
- 原型和原型链 (63)
- canvas mdn (36)
- css @media (49)
- promise mdn (39)
- readasdataurl (52)
- if-modified-since (49)
- css ::after (50)
- border-image-slice (40)
- flex mdn (37)
- .join (41)
- function.apply (60)
- input type number (64)
- weakmap (62)
- js arguments (45)
- js delete方法 (61)
- blob type (44)
- math.max.apply (51)
- js (44)
- firefox 3 (47)
- cssbox-sizing (52)
- js删除 (49)
- js for continue (56)
- 最新留言
-