Selenium(九)：Xpath选择器
1. Xpath选择器
1.1 Xpath语法简介
前面我们学习了CSS选择元素。
大家可以发现非常灵活、强大。
还有一种灵活、强大的选择元素的方式，就是使用Xpath表达式。
XPath (XML Path Language) 是由国际标准化组织W3C指定的，用来在XML和HTML文档中选择节点的语言。
目前主流浏览器 (chrome、firefox，edge，safari) 都支持XPath语法，xpath有1和2两个版本，目前浏览器支持的是xpath 1的语法。
既然已经有了CSS，为什么还要学习Xpath呢？因为
有些场景用 css选择web元素很麻烦，而xpath却比较方便。
另外Xpath还有其他领域会使用到，比如爬虫框架Scrapy，手机App框架Appium。
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h3 style="color: brown">select框</h3> <h4 style="color: rgb(22, 118, 173)">单选</h4> <p>姓名:</p>
<select class="single_choice" >
<option value="小江老师">小江老师</option>
<option value="小雷老师">小雷老师</option>
<option value="小凯老师" selected="selected">小凯老师</option>
</select> <hr> <h4 style="color: rgb(22, 118, 173)">多选</h4>
<p>课程:</p>
<select class="multi_choice" multiple>
<option value="小江老师">小江老师</option>
<option value="小雷老师">小雷老师</option>
<option value="小王老师">小王老师</option>
<option value="小凯老师" selected="selected">小凯老师</option>
</select> <hr> <div> <p style="color: brown; font-weight: bold;">
城市选择
</p> <div id="china"> <p id="beijing" class='capital huge-city'>
北京
</p>
<p id="shanghai" class='huge-city'>
上海
</p>
</div> <div id="us">
<span id="west" style="color:darkgreen">
<p id="newyork">
纽约
</p>
<p id="huston">
休斯顿
</p>
</span>
<span id="east" style="color:darkred">
<p id="chigaco">
芝加哥
</p>
</span>
</div>
</div>
</body>
</html>
按F12打开调试窗口，点击 Elements标签。
要验证Xpath语法是否能成功选择元素，也可以像验证CSS语法那样，按组合键Ctrl + F ，就会出现搜索框。
xpath语法中，整个HTML文档根节点用‘/’表示，如果我们想选择的是根节点下面的html节点，则可以在搜索框输入。
/html
如果输入下面的表达式：
/html/body/div
这个表达式表示选择html下面的body下面的div元素。
注意/有点像CSS中的> , 表示直接子节点关系。
1.1.1 绝对路径选择
从根节点开始的，到某个节点，每层都依次写下来，每层之间用/分隔的表达式，就是某元素的绝对路径。
上面的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")
1.1.2 相对路径选择
有的时候，我们需要选择网页中某个元素，不管它在什么位置。
比如，选择示例页面的所有标签名为div的元素，如果使用css表达式，直接写一个div就行了。
那xpath怎么实现同样的功能呢？ xpath需要前面加//，表示从当前节点往下小赵所有的后代元素，不管它在上面位置。
所以xpath表达式，应该这样写：//div。
’//’ 符号也可以继续加在后面,比如，要选择所有的div元素里面的所有的p元素，不管div在什么位置，也不管p元素在div下面的什么位置，则可以这样写//div//p
对应的自动化程序如下：
elements = driver.find_elements_by_xpath("//div//p")
如果使用CSS选择器，对应代码如下：
elements = driver.find_elements_by_css_selector("div p")
如果，要选择所有的div元素里面的直接子节点p，xpath，就应该这样写了//div/p
如果使用CSS选择器，则为div > p>。
1.1.3 通配符
如果要选择所有div节点的所有直接子节点，可以使用表达式//div/*。
* 是一个通配符，对应任意节点名的元素，等价于CSS选择器div > *。
代码如下：
elements = driver.find_elements_by_xpath("//div/*")
for element in elements:
print(element.get_attribute('outerHTML'))
1.2 根据元素选择
Xpath可以根据属性来选择元素。
根据属性来选择元素是通过这种格式来的[@属性名='属性值']
注意：
属性名注意前面有个@
属性值一定要用引号， 可以是单引号，也可以是双引号
1.2.1 根据id属性选择
选择id为west的元素，可以这样//*[id='west'] 。
1.2.2 根据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"]则不行。
1.2.3 根据其他属性
同样的道理，我们也可以利用其它的属性选择。
比如选择具有multiple属性的所有页面元素，可以这样//*[@multiple]。
1.2.4 属性值包含字符串
要选择style属性值包含color字符串的页面元素，可以这样//*[@contains(@style,'color')]。
要选择style属性值以color字符串开头的页面元素，可以这样//*[@starts-with(@style,'color')]
要选择style属性值以某个字符串结尾的页面元素，大家可以推测是//*[@ends-with(@style,'color')]， 但是，很遗憾，这是xpath 2.0的语法，目前浏览器都不支持。
1.3 按次序选择
前面学过css表达式可以根据元素在父节点中的次序选择，非常实用。
xpath也可以根据次序选择元素。语法比css更简洁，直接在方括号中使用数字表示次序。
1.3.1 某类型第几个子元素
要选择p类型第2个的子元素，就是
//p[2]
注意，选择的是p类型第2个的子元素，不是第2个子元素，并且是p类型。
还有，要选择父元素的div中的p类型第2个子元素。
//div/p[2]
1.3.2 第几个子元素
也可以选择第2个子元素，不管是什么类型，采用通配符。
比如选择父元素为div的第2个子元素，不管是什么类型。
//div/*[2]
1.3.3 某类型倒数第几个子元素
当然也可以选取倒数第几个子元素
例如：
选取p类型倒数第1个子元素
//p[last()]
选取p类型倒数第2个子元素
//p[last()-1]
选择父元素为div中p类型倒数第二个子元素
//div/p[last()-2]
1.3.4 范围选择
xpath还可以选择子元素的次序范围。
例如：
选取option类型第1到2个子元素
//option[position()<=2]
或者
//option[position()<]
选择class属性为multi_choice的前3个子元素
//*[@class='multi_choice']/*[position()<=3]
选择class属性为multi_choice的后3个子元素
//*[@class='multi_choice']/*[position()>=last()-2]
为什么不是last()-3呢？因为
last() 本身代表最后一个元素
last()-1 本身代表倒数第2个元素
last()-2 本身代表倒数第3个元素
1.4 组选择、父节点、兄弟节点
1.4.1 组选择
css有组选择，可以同时使用多个表达式，多个表达式选择的结果都是要选择的元素。
css 组选择，表达式之间用逗号隔开。
xpath也有组选择，是用竖线隔开多个表达式。
比如，要选所有的option元素和所有的h4元素，可以使用
//option | //h4
等同于CSS选择器
option , h4
比如，要选所有的class为single_choice和class为multi_choice的元素，可以使用
//*[@class='single_choice'] | //*[@class='multi_choice']
等同于CSS选择器
.single_choice , .multi_choice
1.4.2 选择父节点
xpath可以选择父节点，这是css做不到的。
某个元素的父节点用/..表示
比如，要选择id为china的节点的父节点，可以这样写//*[@id='china']/..。
当某个元素没有特征可以直接选择，但是它的子节点有特征，就可以采用这种方法，先选择子节点，在指定父节点。
还可以继续找上层父节点，比如//*[@id='china']/../../..。
1.4.3 兄弟节点选择
前面学过css选择器，要选择某个节点的后续兄弟节点，用波浪线。
xpath也可以选择后续兄弟节点，用这样的语法forllowing-sibling::。
比如，要选择class为single_choice的元素的所有后续兄弟节点//*[@class='single_choice']/forllowing-sibling::*。
等同于CSS选择器.single_choice ~ *
如果，要选择后续节点中的div节点，就应该这样写//*[@class='single_choice']/forllowing-sibling::div。
xpath还可以选择前面的兄弟节点，用这样的语法preceding-sibling::。
比如，要选择class为single_choice的元素的所有后续兄弟节点//*[@class='single_choice']/preceding-sibling::*。
而CSS选择器目前还没有选择前面的兄弟节点。
要了解更多Xpath选择语法，可以这里，打开Xpath选择器参考手册。
1.5 selenium注意点
我们来看一个例子
我们的代码：
先选择示例网页中，id是china的元素。
然后通过这个元素的WebElement对象，使用find_elements_by_xpath，选择里面的p元素。
# 先寻找id是china的元素
china = wd.find_element_by_id('china') # 再选择该元素内部的p元素
elements = china.find_elements_by_xpath('//p') # 打印结果
for element in elements:
print('----------------')
print(element.get_attribute('outerHTML'))
运行发现，打印的 不仅仅是china内部的p元素，而是所有的p元素。
要在某个元素内部使用xpath选择元素，需要在xpath表达式最前面加个点。
像这样
elements = china.find_elements_by_xpath('.//p')
Selenium(九)：Xpath选择器的更多相关文章
- selenium中Xpath和CSS Selector的使用方法
一.selenium中Xpath的使用方法 1. 什么是xpath? Xpath是XML的路径语言,通俗一点讲就是通过元素的路径来查找这个标签元素 2. 练习Xpath的工具 火狐浏览器,下载插件Fi ...
- 爬虫系列(九) xpath的基本使用
一.xpath 简介 究竟什么是 xpath 呢?简单来说,xpath 就是一种在 XML 文档中查找信息的语言 而 XML 文档就是由一系列节点构成的树,例如,下面是一份简单的 XML 文档: &l ...
- selenium使用Xpath+CSS+JavaScript+jQuery的定位方法（治疗selenium各种定位不到，点击不了的并发症）
跟你说,你总是靠那个firebug,chrome的F12啥的右击复制xpath绝对总有一天踩着地雷炸的你死活定位不到,这个时候就需要自己学会动手写xpath,人脑总比电脑聪明,开始把xpath语法给我 ...
- selenium之xpath定位和input文本
selenium之xpath定位和input文本 xpath简单定位: 打开浏览器的F12 在自己需要定位的元素的那里右键 选择copy->xpath selenium获取input下的文本: ...
- 23、jQuery九类选择器/jQuery常用Method-API/jQuery常用Event-API
1)掌握jQuery九类选择器及应用 2)掌握jQuery常用Method-API 3)掌握jQuery常用Event-API 一)jQuery九类选择器[参见jQueryAPI.chm手册] 目 ...
- Python爬虫与数据分析之爬虫技能：urlib库、xpath选择器、正则表达式
专栏目录: Python爬虫与数据分析之python教学视频.python源码分享,python Python爬虫与数据分析之基础教程:Python的语法.字典.元组.列表 Python爬虫与数据分析 ...
- 使用scrapy中xpath选择器的一个坑点
情景如下: 一个网页下有一个ul,这个ur下有125个li标签,每个li标签下有我们想要的 url 字段(每个 url 是唯一的)和 price 字段,我们现在要访问每个li下的url并在生成的请求中 ...
- 常用xpath选择器和css选择器总结
xpath选择器 表达式 说明 article 选取所有article元素的所有子节点 /article 选取根元素article article/a 选取所有属于article的子元素的a元素 // ...
- 用XPath精确定位节点元素&selenium使用Xpath定位之完整篇
在利用XSL进行转换的过程中,匹配的概念非常重要.在模板声明语句 xsl:template match = ""和模板应用语句xsl:apply-templates select ...
随机推荐
- 外键(foreign key)的使用及其优缺点
如果公共关键字在一个关系中是主关键字,那么这个公共关键字被称为另一个关系的外键.由此可见,外键表示了两个关系之间的相关联系.以另一个关系的外键作主关键字的表被称为主表,具有此外键的表被称为主表的从表. ...
- react-native中TextInput在ios平台下不能输入中文
目录 1. github上相关资料 2.需要满足defultValue和value属性 react-native 0.55.4版本,发现TextInput 在iOS平台上无法输入中文的问题. 1. g ...
- Yii2框架那些折磨人的坑
说点闲话 距离上次写博客,已经有一年了.在动手写之前,总是带着深深的罪恶感.被它折磨许久,终于,还是,动手了. 值得庆祝的一件事:最近开始健身了.每天动感单车45分钟,游泳45分钟,真的是(生)爽(不 ...
- 模拟实现 Promise（小白版）
模拟实现 Promise(小白版) 本篇来讲讲如何模拟实现一个 Promise 的基本功能,网上这类文章已经很多,本篇笔墨会比较多,因为想用自己的理解,用白话文来讲讲 Promise 的基本规范,参考 ...
- linux—netstat
netstat--option -a: 列出所有端口,监听的没有监听的 -t: 显示tcp相关的选项 -u: 显示udp相关的选项 -l: 仅仅显示监听选项 -p: 显示与连接有关的程序名和 ...
- windows下tomcat闪退问题（启动失败）
1. 第一种情况:Java jdk环境变量没配置或配置有问题 java jdk详细的配置过程这里贴一下:https://jingyan.baidu.com/article/6dad5075d1dc40 ...
- telnet远程登陆
这篇文章是第二次更新,内容为telnet远程登陆路由器,非常简单.直接进入正题,在网络配通的情况下,为路由器设置登陆密码和管理员密码,就可以通过pc机远程管理路由器或交换机. 目的: 网络拓扑图如下, ...
- Go 修改map slice array元素值
在“range”语句中生成的数据的值其实是集合元素的拷贝.它们不是原有元素的引用.这就意味着更新这些值将不会修改原来的数据.我们来直接看段示例: package main import "f ...
- ASP.NET Core开发者指南（）
你可以在下面找到一张图,该图展示了你可以选取的路径及你想学习的库,从而成为一名 ASP.NET Core 开发者.“作为 ASP.NET Core 开发者,我接下来应该学习什么?”,我把这张图作为建议 ...
- Redis基础知识、命令以及java操作Redis
1 nosql的概念 sql:操作(关系型)数据库的标准查询语言 关系型数据库(rdbms):以关系(由行和列组成的二维表)模型为核心数据库,有表的储存系统.(mysql.oracle.sqlserv ...