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选择器的更多相关文章

  1. selenium中Xpath和CSS Selector的使用方法

    一.selenium中Xpath的使用方法 1. 什么是xpath? Xpath是XML的路径语言,通俗一点讲就是通过元素的路径来查找这个标签元素 2. 练习Xpath的工具 火狐浏览器,下载插件Fi ...

  2. 爬虫系列(九) xpath的基本使用

    一.xpath 简介 究竟什么是 xpath 呢?简单来说,xpath 就是一种在 XML 文档中查找信息的语言 而 XML 文档就是由一系列节点构成的树,例如,下面是一份简单的 XML 文档: &l ...

  3. selenium使用Xpath+CSS+JavaScript+jQuery的定位方法(治疗selenium各种定位不到,点击不了的并发症)

    跟你说,你总是靠那个firebug,chrome的F12啥的右击复制xpath绝对总有一天踩着地雷炸的你死活定位不到,这个时候就需要自己学会动手写xpath,人脑总比电脑聪明,开始把xpath语法给我 ...

  4. selenium之xpath定位和input文本

    selenium之xpath定位和input文本 xpath简单定位: 打开浏览器的F12 在自己需要定位的元素的那里右键 选择copy->xpath selenium获取input下的文本: ...

  5. 23、jQuery九类选择器/jQuery常用Method-API/jQuery常用Event-API

      1)掌握jQuery九类选择器及应用 2)掌握jQuery常用Method-API 3)掌握jQuery常用Event-API 一)jQuery九类选择器[参见jQueryAPI.chm手册] 目 ...

  6. Python爬虫与数据分析之爬虫技能:urlib库、xpath选择器、正则表达式

    专栏目录: Python爬虫与数据分析之python教学视频.python源码分享,python Python爬虫与数据分析之基础教程:Python的语法.字典.元组.列表 Python爬虫与数据分析 ...

  7. 使用scrapy中xpath选择器的一个坑点

    情景如下: 一个网页下有一个ul,这个ur下有125个li标签,每个li标签下有我们想要的 url 字段(每个 url 是唯一的)和 price 字段,我们现在要访问每个li下的url并在生成的请求中 ...

  8. 常用xpath选择器和css选择器总结

    xpath选择器 表达式 说明 article 选取所有article元素的所有子节点 /article 选取根元素article article/a 选取所有属于article的子元素的a元素 // ...

  9. 用XPath精确定位节点元素&selenium使用Xpath定位之完整篇

    在利用XSL进行转换的过程中,匹配的概念非常重要.在模板声明语句 xsl:template match = ""和模板应用语句xsl:apply-templates select ...

随机推荐

  1. 配置基于接口地址池的DHCP

    配置基于接口地址池的DHCP 原理概述 DHCP(动态主机配置协议),采用C/S方式工作,C向S动态请求配置信息,S自动分配配置信息. 基于接口地址池的DHCP服务器,链接这个接口网段的用户都可以从该 ...

  2. Java修炼——冒泡排序

    核心思想: 1)如有一个数列有 N(5)个元素,则至多需要 N-1(4)趟循环 才能保证数列有序 2) 每一趟循环都从数列的第一个元素开始比较,依次比较 相邻的两个元素,比较到数列的最后 3) 如果前 ...

  3. dubbo 订阅 RPC 服务

    Dubbo 订阅 RPC 服务 建立消费者者项目 pom.xml <?xml version="1.0" encoding="UTF-8"?> &l ...

  4. [TimLinux] Django 中间件

    1. 定义 中间件是一个钩子框架,深入到django的请求/响应处理过程中.这是一个轻量.底层插件系统,目的是全局修改django的输入或输出.每一个中间件组件都是用来处理特定的功能.例如django ...

  5. Selnium IDE插件的安装与简单使用

    一.Firefox在线安装IDE插件 1.启动Firefox,点击菜单工具->附加组件,如图: 2.在附件管理页面,手动输入Selenium IDE,搜索 3.在搜索结果中点击Selenium ...

  6. 用HAL库结合STM cube编写代码控制stm32f103c8t6来驱动减速电机实现慢快逐步切换转动

    用到的模块 TB6612FNG电机驱动模块 stm32F103C8T6最小系统板 LM2596S降压模块 直流减速电机(不涉及编码器知识) 模块介绍 1.TB6612FNG电机驱动模块 (1)< ...

  7. oc实现小型学生管理系统

                              首先,创建一个工程,然后加入两个cocoaclass,分别命名为Student   和 StudentSystem.   然后就可以开始写代码喽   ...

  8. 使用for语句输出1-100之间的所有偶数

    使用for语句输出1-100之间的所有偶数 for i in range(1,101): if i%2==0: print(i) 使用while语句输出1-100之间能够被3整除的数字 j=1 whi ...

  9. 在Atmel Studio7中创建ASF项目

    使用ASF自带例程的方式创建程序是很方便,但是因为系统例程支持的ATMEL开发板往往和用户板配置不同,所以我们需要自己创建项目.下面介绍在AS7.0中快速创建一个ASF项目的方法. 1.首先从菜单开始 ...

  10. Spring Cloud第十一篇 | 分布式配置中心高可用

    ​ 本文是Spring Cloud专栏的第十一篇文章,了解前十篇文章内容有助于更好的理解本文: Spring Cloud第一篇 | Spring Cloud前言及其常用组件介绍概览 Spring Cl ...