详解XPath选择器
详解XPath选择器
文章目录
一、概述
之前在Selenium框架的文章中,我们提到了有八大定位方法。
其中提到了最万能的一种定位方法就是xpath表达式定位。
XPath本质是一个在XML文档中查找信息的语言。在1999年11月16日成为W3C标准。目前主流浏览器(chrome、firefox、edge、safari)都支持XPath语法,XPath有1和2两个版本,目前浏览器支持的是xpath1的语法。
- 为什么专门写个xpath的文章呢,因为在Selenium,Appium和Python爬虫框架Scrapy中都可以用到xpath表达式。
- 在定位方法中,除了id,name定位外,用的最多的应该就是xpath表达式定位了。
二、工具
工欲善其事必先利其器,先看看日常使用中,我们可以怎样产生想要的xpath表达式呢?
-
非手写情况,直接在浏览器F12打开调试窗口,点击Elements标签,选中需要确定xpath表达式的元素,右键copy,copy xpath,就可以复制出完整的xpath表达式。
-
很多时候,自动生成的xpath表达式较臃肿,这时就需要手写了,这里推荐大家在谷歌扩展程序中,安装XPath Helper插件。
打开后,在chrome上部就出现一个输入框和一个结果框。实时显示手写xpath表达式的结果。
三、XPath语法
接下来,我们就详细解释xpath的各种语法
3.1路径与通配符
3.1.1绝对路径
在html超文本中,从根节点开始的,到某个节点,每层依次写下来,每层之间用/分隔的表达式,就是某元素的绝对路径
比如这里以百度首页为例,需要定位到"百度一下"这几个字,打开F12和xpath helper后,从根节点一步一步往下写,如图所示:
3.1.2相对路径
在实际脚本代码中,使用绝对路径,表达式可能会太长而不好管理。如果你的研发小伙伴改动了标签,那脚本代码的变动频率也会大大增加。
使用相对路径
,可以大大减少表达式的长度。
比如//div
,表示从当前节点往下寻找所有的div元素,不管他在哪个位置。
还可以在相对路径中继续写相对路径,比如//div//span
,就是选择所有div中所有的span元素,不管他们中间隔了多少层。
比如刚才的百度一下
也可以这样写:
现在,大家知道了吧,xpath是很*的,当你掌握所有语法后,一个元素可以有很多种的表达式实现方式。
3.1.3通配符
*是通配符,对应任意节点名的元素。
拿实例说话:
//*[@id="su"]/value
,这里的//*代表了任意节点
3.2根据属性选择
在上一节中,我们写了一个//*[@id=“su”]/value,其中的[@id=“su”]就是通过属性来选择元素的。
格式为[@属性名=‘属性值’]
- 属性名注意前面有个@
- 属性值一定要用引号,单双不限
3.2.1根据id属性选择
只要具备HTML初级知识的都知道,id属性在html文本中是唯一标识,那么根据id属性选择就是最简单的了,如:
//*[@id="kw"]
3.2.2根据class属性选择
在html中,class标签运用非常广泛,class选择可以帮我们选择所有匹配的元素。
比如:
使用//li[@class="news-meta-item clearfix"]
就可以定位到所有class值为"news-meta-item clearfix"的元素。
注意:
不能只写其中一个属性,像//li[@class="news-meta-item"]
这样是不行的,必须写全。
3.3根据次序选择
如果学过java,python,都知道数组是有索引的,根据索引可以选择相应的对象。
在xpath中,也有类似的用法:根据次序选择元素,直接在方括号中使用数字表示次序。
3.3.1某类型的第几个子元素
比如:
要选择span的第2个子元素
//span[2]
这里选择的就是所有span的第2个子元素
//ul/li[2]
这个选择的就是所有ul下的li元素的第3个子元素,如图所示:
3.3.2某类型的倒数第几个子元素
其实和上一个差不多,使用一个last()
函数,也可以选取倒数第几个子元素。
比如:
- 选取li类型的倒数第1个子元素
//li[last()]
- 选取li类型的倒数第2个子元素
//li[last()-1]
- 选取li类型的倒数第3个子元素
//li[last()-2]
注意:
last()是最后一个元素,last()-1是倒数第二个元素
3.3.3范围选择
xpath还可以选择子元素的次序范围,使用position()
函数搭配<,<=,>,>=运算符即可实现。
比如,
- 选取li第1到3个子元素
//li[position<=3]或//li[positon<4]
3.4组选择、父节点、兄弟节点
3.4.1组选择
和3.3.3范围选择一样,组选择也是批量选择的一种。
在XPath中,使用|
隔开多个表达式以实现组选择。
比如,要选择所有的ul元素和所有的li元素,可以使用
//ul | //li
再比如,要选择所有class为san_box和san_info的元素,可以使用
//*[@class='san_box'] | //\*[@class='san_info']
3.4.2父节点
xpath可以选择父节点。某个元素的父节点使用/..
表示
比如,要选择id为"kw"的节点的父节点,可以这样写//*[@id=‘kw’]/…
现实场景可能存在某个元素没法直接选择,但他的子节点可以直接选择,就可以采用这种方法,先定位到子节点,再定位到他的父节点。
3.4.3兄弟节点
XPath也可以选择某个节点的后续兄弟节点,使用语法:following-sibling::
比如,要选择class为single_choice的元素的所有后续兄弟节点
//*[@class="single_choice"]/following-sibling::*
如果要指定后续兄弟节点中的div节点,就这样写
//*[@class='single_choice']/following-sibling::div
XPath也可以选择前面的兄弟节点,使用语法:preceding-sibling::
四、总结
至此,XPath表达式在Selenium,Appium等框架中的运用方法基本就这些。
由此可见,XPath不愧为最万能的定位方法。
当然,XPath本身还有很多其他的知识点,如xpath函数,XQuery以及XSLT等。
有兴趣可以继续了解。
本文地址:https://blog.csdn.net/qq_42831466/article/details/113995666