详解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
下一篇： css实现视差滚动