XPath (XML Path Language) 是由国际标准化组织W3C指定的,用来在 XML 和 HTML 文档中选择节点的语言。
xpath 语法中,整个HTML文档根节点用'/'表示,如果我们想选择的是根节点下面的html节点,则可以在搜索框输入
/html
如果输入下面的表达式
/html/body/div
这个表达式表示选择html下面的body下面的div元素。
注意
/
有点像 CSS中的
>
, 表示直接子节点关系。
绝对路径写法:
xpath表达式
/html/body/div
,就是一个绝对路径的xpath表达式, 等价于 css表达式
html>body>div。
自动化程序要使用Xpath来选择web元素,应该调用 WebDriver对象的方法
find_element_by_xpath
或者
find_elements_by_xpath
,像这样:
elements = driver.find_elements(By.XPATH, '/html/body/div')
相对路径写法:
例如选择示例页面的所有标签名为
div
的元素,如果使用css表达式,直接写一个**
div
** 就行了。
那xpath怎么实现同样的功能呢? xpath需要前面加**
//
** , 表示从当前节点往下寻找所有的后代元素,不管它在什么位置。
所以xpath表达式,应该这样写: **
//div。
**
//div/p这是选择div下面的直接子节点。CSS里面的写法是div > p。
通配符
如果要选择所有div节点的所有直接子节点,可以使用表达式**
//div/*
**
**
*
**是一个通配符,对应任意节点名的元素,等价于CSS选择器 **
div > *
**
根据属性选择元素
根据属性来选择元素 是通过 这种格式来的
[@属性名='属性值']
注意:
- 属性名注意前面有个@
- 属性值一定要用引号, 可以是单引号,也可以是双引号
根据id选择元素
选择 id 为 west 的元素,可以这样
//*[@id='west']
根据class属性选择元素
选择所有 select 元素中 class为 single_choice 的元素,可以这样
//select[@class='single_choice']
如果一个元素class 有多个,比如
<p id="beijing" class='capital huge-city'>
北京
</p>
如果要选 它, 对应的 xpath 就应该是
//p[@class="capital huge-city"]
不能只写一个属性,像这样
//p[@class="capital"]
这样写不行。
根据次序选择元素
某类型 第几个 子元素
要选择 p类型第2个的子元素,就是
//p[2]
再比如,要选取父元素为div 中的 p类型 第2个子元素
//div/p[2]
第几个子元素
也可以选择第2个子元素,不管是什么类型,采用通配符
比如 选择父元素为div的第2个子元素,不管是什么类型
//div/*[2]
*代表任何类型。
某类型 倒数第几个 子元素
- 选取p类型倒数第1个子元素
//p[last()]
- 选取p类型倒数第2个子元素
//p[last()-1]
- 选择父元素为div中p类型倒数第3个子元素
//div/p[last()-2]
根据范围选择元素
选取option类型第1到2个子元素
//option[position()<=2]
或者
//option[position()<3]
选择class属性为multi_choice的前3个子元素
//*[@class='multi_choice']/*[position()<=3]
选择class属性为multi_choice的后3个子元素
//*[@class='multi_choice']/*[position()>=last()-2]
组选择
css 组选择,表达式之间用 逗号 隔开。
xpath也有组选择, 是用 竖线 隔开多个表达式。
比如,要选所有的option元素 和所有的 h4 元素,可以使用
//option | //h4
等于CSS中的
option , h4
选择父节点
xpath可以选择父节点, css做不到。
某个元素的父节点用 **
/..
** 表示
比如,要选择 id 为 china 的节点的父节点,
//*[@id='china']/..
为什么这样做:我们需要的这个节点没有什么特别的特征,但是它有子节点有特征,我们就可以用这种方法。
还可以继续找上层父节点,比如
//*[@id='china']/../../..
兄弟节点选择
使用
following-sibling::
比如,要选择 class 为 single_choice 的元素的所有后续兄弟节点
//*[@class='single_choice']/following-sibling::*
在CSS中:
.single_choice ~ *
xpath还可以选择
前面的
兄弟节点,用这样的语法 **
preceding-sibling::
**
比如,要选择 class 为 single_choice 的元素的
所有
前面的兄弟节点,这样写
//*[@class='single_choice']/preceding-sibling::*
版权归原作者 KristinSun 所有, 如有侵权,请联系我们删除。