欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

详解XPath选择器

程序员文章站 2022-07-06 15:41:06
详解XPath选择器文章目录详解XPath选择器一、概述二、工具三、XPath语法3.1路径与通配符3.1.1绝对路径3.1.2相对路径3.1.3通配符3.2根据属性选择3.2.1根据id属性选择3.2.2根据class属性选择3.3根据次序选择3.3.1某类型的第几个子元素3.3.2某类型的倒数第几个子元素3.3.3范围选择3.4组选择、父节点、兄弟节点3.4.1组选择3.4.2父节点3.4.3兄弟节点四、总结一、概述之前在Selenium框架的文章中,我们提到了有八大定位方法。其中提到了最万能...

详解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插件。
    详解XPath选择器

    打开后,在chrome上部就出现一个输入框和一个结果框。实时显示手写xpath表达式的结果。
    详解XPath选择器

三、XPath语法

接下来,我们就详细解释xpath的各种语法

3.1路径与通配符

3.1.1绝对路径

在html超文本中,从根节点开始的,到某个节点,每层依次写下来,每层之间用/分隔的表达式,就是某元素的绝对路径

比如这里以百度首页为例,需要定位到"百度一下"这几个字,打开F12和xpath helper后,从根节点一步一步往下写,如图所示:

详解XPath选择器

3.1.2相对路径

在实际脚本代码中,使用绝对路径,表达式可能会太长而不好管理。如果你的研发小伙伴改动了标签,那脚本代码的变动频率也会大大增加。

使用相对路径,可以大大减少表达式的长度。

比如//div,表示从当前节点往下寻找所有的div元素,不管他在哪个位置。

还可以在相对路径中继续写相对路径,比如//div//span,就是选择所有div中所有的span元素,不管他们中间隔了多少层。

比如刚才的百度一下也可以这样写:

详解XPath选择器

现在,大家知道了吧,xpath是很*的,当你掌握所有语法后,一个元素可以有很多种的表达式实现方式。

3.1.3通配符

*是通配符,对应任意节点名的元素。

拿实例说话:

详解XPath选择器

//*[@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选择可以帮我们选择所有匹配的元素。

比如:

详解XPath选择器

使用//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个子元素,如图所示:

详解XPath选择器

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