Xpath选择器-上篇

Xpath简介

XPath (XML Path Language)是由国际标准化组织W3C( World Wide Web Consortium)提出的,用来在XML文档中选择节点的语言。

目前主流浏览器(chrome、firefox,edge,safari)都支持XPath语法,xpath有1.x 和2.x两个版本,目前浏览器支持的主要是xpath 1.X的版本。

XPath语法也能用来选择HTML中的元素。

有些场景 用 css 选择web 元素 很麻烦,而xpath 却比较方便。

xpath语法

打开百度(www.baidu.com),按F12调试窗口,可以看到整个html文档可以看成类似于文件系统一样的树状结构

image

xpath 语法中,选择元素的表达式,可以在console窗口输入 这样的格式 $x('//node1/node2')

其中, 括号里面的内容,就是xpath表达式。


xpath 语法中,文件系统树的根节点用’/’表示,在console窗口输入

$x('/')

点击下图中document节点,后就可以发现, 高亮显示的元素对应整个html 文档,

image


如果我们想选择的是根节点下面的html节点,则可以在console输入

$x('/html')

点击显示的元素,对应的是html 节点。


如果输入下面的表达式

$x('/html/body/div')  

这个表达式表示选择html下面的body下面的div元素, 注意’/’对应的是直接子节点。点击显示的元素,可以发现对应选中/html/body/下面所有的div子元素。

绝对路径选择

从上面的例子可以看出,如果Xpath路径以正斜杠(/)开始,就表示 从根节点开始

从根节点开始的路径表达式,就是某元素的绝对路径

上面的xpath表达式 /html/body/div , 等价于 css表达式 html >body>div


这很像Linux里面的绝对路径的概念, 熟悉Linux的同学应该知道,在Linux里面的根节点就是’/’,比如Linux下面的网站目录的绝对路径一般类似这样: /var/www/html/htdoc


selenium代码里面使用Xpath来选择web元素,应该使用 WebDriver对象的 方法 find_elements_by_xpath,像这样:

eleList = driver.find_elements_by_xpath("/html/body/div")

相对路径选择

有的时候,我们需要选择web中某一类型的所有web元素, 不管它在什么位置

比如,选择baidu搜索页面的所有标签名为 div 的元素,如果使用css表达式,直接写一个 div 就行了。

那xpath怎么实现同样的功能呢?xpath需要前面加 // , //表示从当前节点往下寻找所有的后代元素,不管它在什么位置。

所以xpath表达式,应该这样写: //div


’//’ 符号也可以继续加在后面,比如,要选择 所有的div元素里面的 所有的p元素 ,不管div 在什么位置,也不管p元素在div下面的什么位置,则可以这样写 //div//p

selenium代码使用xpath表达式

如果我们的Python自动化代码里面使用xpath表达式来 选择元素,要使用WebDriver对象的 find_element_by_xpath 或者 find_elements_by_xpath 方法。

比如,要选择所有div节点里面的所有 p 节点

elements = driver.find_elements_by_xpath("//div//p")


如果使用CSS选择器,对应代码如下

elements = driver.find_elements_by_css_selector("div p")

CSS选择元素的表达式,Xpath基本上都有等价的表达式 ,后面将向大家一一介绍。


扫码分享给朋友,一起学更有动力哦



上一页 下一页