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
xpath中选择第几个子元素方式
通过下标方式获取:
//div[@id='food']/p[1]
在这里,下标从1开始
倒数索引
//div[@id='food']/*[last()]
last()代表倒数第一个元素
表示倒数第二第三个用:
//div[@id='food']/*[last()-1]
//div[@id='food']/*[last()-2]
CSS中表示倒数第几个元素的方法
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/