热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

元素定位之xpath和css定位

xpath定位具有很高的灵活性,在文档树中既可以向前搜索,也可以先后搜索。相对于css定位来说,具备更大的灵活性,但是定位速度比css慢。一、XPath节点1.1、XML实例文档

xpath定位具有很高的灵活性,在文档树中既可以向前搜索,也可以先后搜索。相对于css定位来说,具备更大的灵活性,但是定位速度比css慢。

一、XPath节点
1.1、XML实例文档




耳根

400


上面XML文档实例中展示的节点如下:
:文档节点(根节点)




div1-img1src="https://img.php1.cn/3cd4a/18ace/696/1d8e759bd3e6bbec.jpeg?v=d6bfe569"/>

搜狗搜索



div2-img2src="https://img.php1.cn/3cd4a/1eebe/cd5/ed19db63ee478b98.png"/>

百度搜索




2.1、使用相对路径定位元素
相对路径的每一步都根据当前节点集之中的节点来进行计算,起始于双斜杠(//)。

Xpath定位表达式://input[@value=“查询”]

上述Xpath定位表达式中的“//”表示从匹配选择的当前节点开始选择文档中的节点,而不考虑它们的位置。input[@value=“查询”] 表示定位value属性值为“查询”的input页面元素。

2.2、使用索引号定位元素
索引号表示某个被定位的页面元素在其父元素节点下的同名元素中的位置序号,需要从1开始。

Xpath定位表达式://input[2]

上述Xpath定位表达式表示查找页面中第二个出现的input元素,即被测试页面上的“查询”按钮。由于input元素的父节点是div,所以结果有两个。

更多通过索引号定位的实例:


2.3、使用页面元素的属性值定位元素
被测试网页的元素通常会包含各种各样的属性值,并且很多属性值具有唯一性。

若能确认属性值不变并且唯一,可以使用此方法定位,可以解决大部分定位问题。

Xpath定位表达式://img[@alt=“div1-img1”]

表达式使用了相对路径再结合元素拥有的特定属性的方法进行定位,定位元素img的属性是“alt”,其属性值为“div1-img1”,使用@符号指明后面接的是属性,并同属性及属性值一起写到元素后的方括号中。

更多通过元素属性值定位的实例:

 

2.4、使用模糊属性值定位元素
模糊属性值定位方式表示使用属性值的一部分内容进行定位,这部分内容不要保持不变。

contains()函数属于Xpath的高级用法,使用场景比较多,尽管页面元素的属性值经常发生变化,但只要其属性值有几个固定不变的关键词,就可以使用contains()函数进行定位。

2.5、使用Xpath轴(Axes)定位元素
轴可以定义相对于当前节点的节点集。使用Xpath(Axes)定位方式可根据在文档树中的元素相对位置关系进行页面元素定位。先找到一个相对好定位的元素,让它作为轴,根据它和要定位元素间的相对位置关系进行定位,可解决一些元素难以定位的问题。

 

 

 

有时候我们会在轴后面加一个星号(*),表示通配符,比如//input[@value=“查询”]/preceding-sibling : : *,它表示查找属性value值为“查询”的输入框input元素前面所有的同级元素,但不包括input元素本身。

2.6、使用页面元素的文本定位元素
通过text()函数可以定位到元素文本包含某些关键字内容的页面元素。

Xpath表达式

1、//a[text()="搜狗搜索"]
2、//a[.="搜狗搜索"]
3、//a[contains(., "百度")]
4、//a[contains(text(), "百度")]
5、//a[contains(text(), "百度")]/parent::div
6、//a[contains(., "百度")]/..
表达式解释:
Xpath表达式1和表达式2等价,使用的是精确匹配文字方式,文本内容必须完全匹配;
第二个Xpath语句中使用了一个点(.),这里的点等价于text()函数,都指代的是当前节点的文本内容。
Xpath表达式3和表达式4等价,使用的是模糊匹配方式,即可以根据部分文本内容进行匹配。
Xpath表达式5和表达式6等级,都是查找文本内容包含“百度”的链接元素a的上层父元素div,
表达式6最后使用了两个点(..),它表示选取当前节点的父节点,等价于preceding::div。


使用文本内容匹配模式进行定位,为定位复杂的页面元素又提供了一种强大的定位模式,在遇到定为困难时,可以优先考虑使用此方法进行定位。

三、CSS定位


CSS定位方式和Xpath定位方式基本相同,只是CSS定位表达式有自己的格式。

CSS定位方式拥有比Xpath定位速度快,且比Xpath稳定的特性

测试网页HTML代码










div1-img1src="https://img.php1.cn/3cd4a/18ace/696/1d8e759bd3e6bbec.jpeg?v=d6bfe569"/>

搜狗搜索

第一段文字

第二段文字

第三段文字




div2-img2src="https://img.php1.cn/3cd4a/1eebe/cd5/ed19db63ee478b98.png"/>

百度搜索



    土豆


  • 黄瓜

  • 西红柿

  • 冬瓜

  • 茄子





3.1、使用相对路径定位元素
CSS定位表达式:input[value=“查询”]

上述CSS表达式通过相对路径使用元素名称和元素的属性及属性值进行页面元素的定位。

3.2、使用class名称定位元素
CSS定位表达式:input.spread

上述CSS表达式使用input页面元素的class属性名称“spread”来进行定位,"."用来表示类选择器,input指定标签,也可以不加,表示查找所有class属性值相等的元素。

3.3、使用id属性值定位元素
CSS定位表达式:input#div1input

上述CSS定位表达式使用input页面元素的id属性值“div1input”进行定位,“#”用来表示id选择器,input指定标签,也可以不加,表示查找所有id值相等的元素。

3.4、使用页面其他属性值定位
CSS定位表达式:

表达式1:img[alt=“div1-img1”]
表达式2:img[alt=“div1-img1”][href=“https://www.sogou.com/”]

表达式1和表达式2是等价的,在某些复杂的定位场景下,可以使用多个属性来确保定位元素的唯一性。

3.5、使用属性值的一部分内容进行定位
CSS定位表达式:

表达式1:a[href^="https://www.sogou"]
表达式2:a[href$="sogou.com/"]
表达式3:a[href*="sogou"]
上述三个CSS定位表达式在提供的被测试网页中是等价的,都是查找“搜狗搜索”链接
CSS表达式1:表示匹配链接地址开始包含“https://www.sogou”字符串的链接元素,以字符“^”指明从字符串的开始匹配
CSS表达式2:表示匹配链接地址结尾包含“sogou.com/”字符串的链接元素,以字符“$”指明在字符串的结尾匹配。
CSS表达式3:表示匹配链接地址包含“sogou”字符串的链接元素,以字符“*”指明需要进行模糊匹配。

3.6、使用页面元素进行子页面元素的查找

"""
CSS定位表达式
表达式1:div#div1>input#div1input
表达式2:div input
"""
表达式1中的"div#div1",表示在被测试网页上定位到id属性值为div1的div页面元素,“>”表示在以查找到的
div元素的子页面元素中进行查找,"input#div1input"表示查找id属性值为div1input的input页面元素。此方法可实现查找div下子页面元素的目的。
表达式2表示匹配所有属于div元素后台的input元素,父元素div和子元素input间必须用空格分割。


3.7、使用伪类定位元素

'''
CSS定位表达式
表达式1:div#div1 :first-child
表达式2:div#div1 :nth-child(2)
表达式3:div#div1 :last-child
表达式4:input:focus
表达式5:input:enabled
表达式6:input:checked
表达式7: input:not([id])
'''
伪类表达式是CSS语法支持的定位方式,前三个CSS定位表达式要特别注意是,在冒号(:)前一定要有一个空格。
表达式1表示查找id属性值为div1的div页面元素下的第一个子元素,:first-child表示查找某个页面元素下的第一个子页面元素。
表达式2表示查找id属性值为div1的div页面元素下的第二个子元素,:nth-child(2)表示查找某个元素下的第二个子页面元素。nth-last-child:表示从最后面开始选取子元素
表达式3表示查找id属性值为div1的div页面元素下的最后一个子元素,:last-child表示查找某个页面元素下的最后一个子页面元素。
表达式4表示查找当前获取焦点的input页面元素
表达式5表示查找可操作的input页面元素
表达式6表示查找处于勾选状态的checkbox页面元素
表达式7表示查找所有无id属性的input页面元素


伪类定位方式可基于子元素的相对位置和元素的状态进行定位,此定位方式可解决自动化测试中一部分页面元素定位难的问题。

3.8、查找同级兄弟页面元素

'''
CSS定位表达式
表达式1:div#div1>input + a
表达式2:div#div1>input+a+img
表达式3:div#div1>input+*+img
表达式4:ul#recordlist>p~li
'''
表达式1表示在id属性值为div1的div页面元素下,查找input页面元素后面的同级且临近的a元素
表达式2表示在id属性值为div1的div页面元素下,查找input和a页面元素后面的同级且临近的img元素
表达式3表示在id属性值为div1的div页面元素下,查找input和任意一种页面元素后面的同级且临近的img元素
表达式4表示在id属性值为recordlist的ul页面元素下,查找p页面元素以后所有的li元素

3.9、多元素选择器

CSS定位表达式
div#div1,input,a
表达式表示同时查找所有id属性值为div1的div元素,所有的input元素,所有的a元素


四、Xpath定位与CSS定位的比较
Xpath定位方式与CSS定位方式很相似,Xpath定位功能相对更强大一些,但是CSS定位方式执行速度更快。

定位方式比较

 

 


————————————————
版权声明:本文为CSDN博主「紫陌翌晨」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/cjw1991/article/details/116546301



推荐阅读
  • 获得所需要的信息数据几乎成为大部分人工作中重要的一个部分,这篇文章总结和收集了一些常用的方法,用于自查和分享。活用搜索引擎常用搜索引擎搜索引擎是信息 ... [详细]
  • 知识图谱——机器大脑中的知识库
    本文介绍了知识图谱在机器大脑中的应用,以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例,说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案,如搜索关键词"Marie Curie",会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革,不仅美国的微软必应,中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • javascript  – 概述在Firefox上无法正常工作
    我试图提出一些自定义大纲,以达到一些Web可访问性建议.但我不能用Firefox制作.这就是它在Chrome上的外观:而那个图标实际上是一个锚点.在Firefox上,它只概述了整个 ... [详细]
  • 推荐系统遇上深度学习(十七)详解推荐系统中的常用评测指标
    原创:石晓文小小挖掘机2018-06-18笔者是一个痴迷于挖掘数据中的价值的学习人,希望在平日的工作学习中,挖掘数据的价值, ... [详细]
  • 本文介绍了互联网思维中的三个段子,涵盖了餐饮行业、淘品牌和创业企业的案例。通过这些案例,探讨了互联网思维的九大分类和十九条法则。其中包括雕爷牛腩餐厅的成功经验,三只松鼠淘品牌的包装策略以及一家创业企业的销售额增长情况。这些案例展示了互联网思维在不同领域的应用和成功之道。 ... [详细]
  • TerraformVersionTerraformv0.9.11AffectedResource(s)Pleas ... [详细]
  • TerraformVersionTerraformv0.10.6AffectedResource(s)Pleas ... [详细]
  • ubuntu软件商店加载不出来_这款年度最爱的效率软件,其实我不太舍得分享出来...
    文章来源:工具狂人今天的这篇文章,想给大家介绍一个我近半年来一直在用的软件——滴答清单,相信不少朋友可能也用过或听过这个软件。滴答清单&# ... [详细]
  • 《网络营销》实验报告实验名称网站搜索引擎友好性分析实验室实验日期2020-04-03网络营销实验二网站搜索引擎友好性分析实验课程时间安排:在学习完第5章“资源积累能力与 ... [详细]
  • 学习SLAM的女生,很酷
    本文介绍了学习SLAM的女生的故事,她们选择SLAM作为研究方向,面临各种学习挑战,但坚持不懈,最终获得成功。文章鼓励未来想走科研道路的女生勇敢追求自己的梦想,同时提到了一位正在英国攻读硕士学位的女生与SLAM结缘的经历。 ... [详细]
  • Python正则表达式学习记录及常用方法
    本文记录了学习Python正则表达式的过程,介绍了re模块的常用方法re.search,并解释了rawstring的作用。正则表达式是一种方便检查字符串匹配模式的工具,通过本文的学习可以掌握Python中使用正则表达式的基本方法。 ... [详细]
  • 本文讨论了Kotlin中扩展函数的一些惯用用法以及其合理性。作者认为在某些情况下,定义扩展函数没有意义,但官方的编码约定支持这种方式。文章还介绍了在类之外定义扩展函数的具体用法,并讨论了避免使用扩展函数的边缘情况。作者提出了对于扩展函数的合理性的质疑,并给出了自己的反驳。最后,文章强调了在编写Kotlin代码时可以自由地使用扩展函数的重要性。 ... [详细]
  • 微信键盘输入法会不会“高开低走”?
    前段时间,“微信键盘”已经在微信读书上进行了测试,而就在12月18日,“微信键盘”APP正式在应用商店里上线了,这一上线则让人不禁思考起了几个问题,比如“微信键盘”的推出是否会影响到其他家输入法 ... [详细]
  • 上周五是搜狗输入法三周年纪念日,搜狐做了专题搜狗输入法三周年,三年前是搜狗这个搜狐的子品牌最低谷的时期。搜狗搜索和搜狗工具条都面临着许多问题。一个在当时看来异想天开的提议进入了 ... [详细]
author-avatar
梅花七
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有