详解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表达式呢？

1. 非手写情况，直接在浏览器F12打开调试窗口，点击Elements标签，选中需要确定xpath表达式的元素，右键copy，copy xpath，就可以复制出完整的xpath表达式。

2. 很多时候，自动生成的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元素的第2个子元素，如图所示：

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等。

有兴趣可以继续了解。