XPTH选择器介绍

XPTH选择器介绍

xpath全文叫 xml path language  （xml路径语言）

从xpath的视角来看，xml 或html文档就是文件系统结构，元素节点可以看做其中某一个文件

 

在HTML文档中，以html标签作为根节点，整个文档的形式可以看成是一个树形结构

 

xpath比CSS多一点功能，比如前向兄弟选择器，父元素选择器

我们在后期学习移动应用自动化的时候，它是不支持CSS的，只支持XPATH，所以你现在不学，后面还要学。

 

XPATH写法

绝对路径

以/开始，逐个增加节点名称用/分割

举例：

/html/body/div/p

表示html文档中的P节点，xpath路径就表示了元素的位置

特点：不能跨级，类似CSS中的直接子元素选择器 >

 

相对路径

写法很简单：就是把再加一个/，变成两个//

举例：

//footer//p

表示footer元素中所有的后代P类型元素

使用相对定位法一定要用//开头

特点：类似css的后代元素选择器，不要求每层元素都写

混合使用

相对定位法可以和绝对定位法结合起来使用

如 //footer/div/p

表示html文档中footer元素下的div元素下的p元素

 

通配符

*表示所有节点，同CSS

 

根据属性选择

属性用[]包裹，属性名加@符号，属性值需要用引号包裹

举例：

//*[@style]  表示选择HTML文档下所有包含style属性的元素

//p[@spec='len2'] 选择所有具有spec 值为 len2 的元素

 

子元素选择器

补充学习CSS子元素选择器

http://www.w3school.com.cn/cssref/css_selectors.asp

:nth-child(n)

 

:nth-of-type(n)

 

xpath中选择第几个子元素方式

通过下标方式获取：

//div[@id='food']/p[1]

在这里，下标从1开始

 

倒数索引

//div[@id='food']/*[last()]

last()代表倒数第一个元素

表示倒数第二第三个用：

//div[@id='food']/*[last()-1]

//div[@id='food']/*[last()-2]

 

CSS中表示倒数第几个元素的方法

:nth-last-child(n)

 

:nth-last-of-type(n)

 

postion()的用法

表示第几个元素除了可以用[1]指定下标这种方式，还有一种方式就是

//div[@id='food']/*[position()=2]

这里position()就是代表元素的位置，这种写法也是xpath中的一部分

 

高级用法：

//div[@id='food']/*[position()=last()]  表示最后一个元素

//div[@id='food']/*[position()=last()-2] 表示倒数第三个元素

//div[@id='food']/*[position()>=last()-2] 表示最后三个元素

 

组选择器

与css组选择器类似的是，xpath也是用组选择器来选择多组元素

css中要表示多个选择器，用逗号来分割

xpath中 用竖线来隔开

 

//p | //button

等价于css中的

p, button

 

 

相邻兄弟选择器

举例，xpath表示相邻兄弟的方法

//*[@id=’food’]/following-sibling::div   

解释：

//*[@id=’food’]/ div   表示id为food的直接子元素的div

我们这里加上following-sibling::  就变成了id=food节点的相邻兄弟元素

 

前向兄弟节点选择

选择某个元素前面的兄弟节点，在CSS里无法实现

在xpath里我们可以用 preceding-sibling:: 来表示

 

父元素选择器

在xpath里面，你还可以选择指定元素的父元素，CSS也不支持此种方法

比如 //*[@class='special']  （先找到这个元素）

我们可以通过模拟linux路径表现方式获取到它的父元素：

//*[@class='special']/..  （获取父元素）然后依次类推，还可以获取父元素的父元素

使用场景：通常你想定位的元素没有特征，只有他的子节点有id这种特征

 

 

webelement相对定位法

比如我想获取id为food的元素，然后用获取到元素继续找它下面的子节点，比如我想获取p节点，通过xpath表达式 //p来获取

然后，这里大家注意，如果我这么写了，即使我用的是food这个元素来获取的，其实它获取的元素范围还是整个html页面的p元素，和用driver获取的效果是一样的

如果我想获取的是food这个元素范围内的呢，大家就要在这个表达式前面加一个点，这个点表示在当前的元素范围内。

 

如：

food = driver.find_element_by_id("food")
eles = food.find_elements_by_xpath('./p')

如果不加点

eles = food.find_elements_by_xpath('/p')

eles = driver.find_elements_by_xpath('/p')

这两个方式效果是一样的

 

扩展阅读：为什么css不支持前向兄弟节点选择器，和父元素选择器

https://www.zhangxinxu.com/wordpress/2016/08/css-parent-selector/