【Selenium】Xpath选择器

1 Xpath语法简介

XPath (XML Path Language) 是由国际标准化组织W3C指定的，用来在XML和HTML文档中选择节点的语言。
目前主流浏览器 (Chrome, Firefox, Edge, Safari) 都支持Xpath语法。
既然已经有了CSS，为什么还要学习Xpath？

• 有些场景用CSS选择Web元素很麻烦，而Xpath却比较方便。
• Xpath还有其他领域会使用到，比如：爬虫框架Scrapy， 手机App框架Appium（不支持CSS）。

Xpath语法中，整个HTML文档根节点用 / 表示，与CSS选择器中的 > 类似，表示直接子节点关系。如

# 选择html下面的body下面的div元素
/html/body/div

1.1 查看元素Xpath

浏览器支持查看、复制元素Xpath：定位元素后右键选择Copy>>Copy Xpath

1.2 绝对路径选择

从根节点开始的，到某个节点，每层都依次写下来，每层之间用 / 分隔的表达式，就是某元素的绝对路径。

# 选择html下面的body下面的div元素
wd.find_element_by_xpath('/html/body/div')

# 等价于:
wd.find_element_by_css_selector('html>body>div')

1.3 相对路径选择

Xpath在前面加 // , 表示从当前节点往下寻找所有的后代元素，不管它在什么位置。

# 要选择所有的div元素里面的所有的p元素
wd.find_elements_by_xpath('//div//p')

# 等价于：
wd.find_element_by_css_selector('div p')

1.4 通配符

* 是一个通配符，对应任意节点名的元素，等价于CSS选择器 div > *

# 如果要选择所有div节点的所有直接子节点
wd.find_elements_by_xpath('//div/*')

# # 等价于：
wd.find_element_by_css_selector('div>*')

2 根据属性选择

格式： [@属性名=‘属性值’]
注意：

• 属性名注意前面有个@
• 属性值一定要用引号， 可以是单引号，也可以是双引号

2.1 根据id属性选择

# 选择id为kw的元素
wd.find_element_by_xpath('//*[@id="kw"]')

# 等价于：
wd.find_element_by_css_selector('#kw')

2.2 根据class属性选择

注意：若一个元素class有多个，要写全。（CSS选择器只需选一即可）

from selenium import webdriver
from time import sleep

wd = webdriver.Chrome()

# 调用Webdriver对象的get方法，打开网址
wd.get('https://www.baidu.com/')

# 选择所有a元素中class属性为mnav c-font-normal c-color-t的元素
elements = wd.find_elements_by_xpath('//a[@class="mnav c-font-normal c-color-t"]')

# 打印所有元素的文本内容
for element in elements:
    print(element.text)

# 等待3秒
sleep(3)

# 关闭浏览器并释放进程资源
wd.quit()

2.3 根据其他属性选择

同样的道理，我们也可以利用其它的属性选择。

# 选择具有style属性的所有页面元素 
wd.find_elements_by_xpath('//*[@style]')

# 等价于：
wd.find_elements_by_css_selector('[style]')

2.4 属性值包含字符串

属性值包含：contains()
属性值以…开头：starts-with()
属性值以…结尾：ends-with() （Xpath 2.0的语法 ，目前浏览器都不支持）

# 选择style属性值包含font-family字符串的元素
wd.find_elements_by_xpath('//*[contains(@style, "font-family")]')
# 等价于：
wd.find_elements_by_css_selector('[style*="font-family"]')

# 选择style属性值以font-family字符串开头的元素
wd.find_element_by_xpath('//*[starts-with(@style,"font-family")]')
# 等价于：
wd.find_element_by_css_selector('[style^="font-family"]')

# 选择style属性值以font-family字符串开头的元素
wd.find_element_by_xpath('//*[ends-with(@style, "Arial;")]') # Obsoleted
# 仅CSS选择器支持以…结尾：
wd.find_element_by_css_selector('[style$="Arial;"]')

3 根据文本选择

# 选择文本为“新闻”的元素
wd.find_elements_by_xpath('//*[text()="新闻"]')

4 按次序选择

直接在方括号中使用数字表示次序。

4.1 某类型第几个子元素

# 选择span类型第2个的子元素
wd.find_elements_by_xpath('//span[2]')
# 等价于：
wd.find_elements_by_css_selector('span:nth-of-type(2)')

# 选择父元素为div中的span类型第2个的子元素
wd.find_elements_by_xpath('//div/span[2]')
# 等价于：
wd.find_elements_by_css_selector('div>span:nth-of-type(2)')

4.2 第几个子元素

# 选择父元素为span的第2个子元素，不管是什么类型
wd.find_elements_by_xpath('//span/*[2]')
# 等价于：
wd.find_elements_by_css_selector('span>:nth-of-child(2)')

4.3 某类型倒数第几个子元素

Xpath语法：last()

# 选择span类型倒数第1个子元素
wd.find_elements_by_xpath('//span[last()]')
# 等价于：
wd.find_elements_by_css_selector('span:nth-last-of-type(1)')

# 选择span类型倒数第2个子元素
wd.find_elements_by_xpath('//span[last()-1]')
# 等价于：
wd.find_elements_by_css_selector('span:nth-last-of-type(2)')

4.4 范围选择

Xpath可以选择子元素的次序范围，CSS做不到。Xpath语法：position()

# 选择option类型第1到2个子元素
wd.find_elements_by_xpath('//option[position()<=2]')

# 选择class属性为multi_choice的前3个子元素
wd.find_elements_by_xpath('//*[@class="multi_choice"]/*[position()<4]')

# 选择class属性为multi_choice的后3个子元素
wd.find_elements_by_xpath('//*[@class="multi_choice"]/*[position()>=last()-2]')

5 组选择

Xpath组选择用竖线 | 隔开多个表达式；CSS组选择用 逗号 ， 隔开。

# 选择所有的div元素和所有的span元素
wd.find_elements_by_xpath('//div | //span')
# 等价于：
wd.find_elements_by_css_selector('div , span')

# 选择https://www.baidu.com/热搜中的所有新和热元素
wd.find_elements_by_xpath('//*[contains(@class,"c-text-hot")] | //*[contains(@class,"c-text-new")]')
# 等价于：
wd.find_elements_by_css_selector('.c-text-hot , .c-text-new')

6 父节点

Xpath可以选择父节点， CSS做不到。
某个元素的父节点用 /… （斜杠+两点）表示。
当某个元素没有特征可以直接选择，但是它有子节点有特征， 就可以采用这种方法，先选择子节点，再指定父节点。

# 选择class属性为text-color的节点的父节点
wd.find_elements_by_xpath('//*[@class="text-color"]/..')

还可以继续找上层父节点，比如： //*[@class="text-color"]/../../..

7 兄弟节点

7.1 选择后续的兄弟节点

Xpath语法：following-sibling::

# 选择data-index属性为0的元素的所有后续兄弟节点
wd.find_elements_by_xpath('//*[@data-index="0"]/following-sibling::*')
# 等价于：
wd.find_elements_by_css_selector('[data-index="0"] ~ *')

7.2 选择前面的兄弟节点

Xpath语法：preceding-sibling:: ; CSS选择器目前还没有方法选择前面的兄弟节点。

# 选择class属性为title-content-title的元素的前面的类型为span的兄弟节点
wd.find_elements_by_xpath('//*[@class="title-content-title"]/preceding-sibling::span'）

8 Selenium注意点

如果要在某个元素内部使用Xpath选择元素，需要在Xpath表达式前面加个点 。
示例：先选择示例网页中id属性值为china的元素，然后通过这个元素的WebElement对象，使用find_elements_by_xpath，选择里面的p元素。

from selenium import webdriver
from time import sleep

wd = webdriver.Chrome()

# 调用Webdriver对象的get方法，打开网址
wd.get('https://cdn2.byhy.net/files/selenium/test1.html')

# 先选择id是china的元素
china = wd.find_element_by_xpath('//*[@id="china"]')

# 再选择该元素内部所有的p元素
elements = china.find_elements_by_xpath('//p')

# 打印p元素的文本内容
for element in elements:
    print('----------------')
    print(element.text)

# 等待3秒
sleep(3)

# 关闭浏览器并释放进程资源
wd.quit()

运行发现，打印的不仅仅是china对象内部的p元素， 而是所有的p元素。正确写法如下：

# 再选择该元素内部所有的p元素
elements = china.find_elements_by_xpath('.//p')

9 Xpath VS CSS

	CSS 选择器	Xpath选择器
选择tag名为div的元素	div	//div
选择id属性为su的元素	#su	//*[@id=“su”]
选择class属性为c-text c-text-hot的元素	.c-text 或者 .c-text-hot	//*[@class=“c-text c-text-hot”]
选择name属性为wd的元素（其他属性）	[name=“wd”]	//*[@name=“wd”]
选择属性名为name的元素（不指定属性值）	[name]	//*[@name]
选择标签名为input，且type属性为submit的元素（加上标签名的限制）	input[type=“submit”]	//input[@type=“submit”]
选择class属性包含text-hot字符串的元素	[class*=“text-hot”]	//*[contains(@class, “text-hot”)]
选择class属性以mnav字符串开头的元素	[class^=“mnav”]	//*[starts-with(@class, “mnav”)]
选择class属性以color字符串结尾的元素	[class$=“color”]	-
选择type属性为text且name属性为wd的元素（多属性限制）	[type=“text”][name=“wd”]	//*[@type=“text”][@name=“wd”]
选择文本为“新闻”的元素	-	//*[text()=“新闻”]
选择span的直接子元素div	span>div	//span/div
选择form的后代元素span	form span	//form//span
选择所有div元素和所有span元素（组选择）	div , span	//*[div] | //*[span]
选择是父元素的第10个子节点的元素	:nth-child(10)	//*[10]
选择类型是ul且是父元素的第1个子节点的元素	ul:nth-child(1)	-
选择类型是ul且是父元素的倒数第1个子节点的元素	ul:nth-last-child(1)	-
选择是父元素的第1个ul类型的子节点	ul:nth-of-type(1)	//ul[1]
选择是父元素的倒数第2个ul类型的子节点	ul:nth-last-of-type(2)	//ul[last()-1]
选择是类型是ul且是父元素的奇数节点	ul:nth-child(odd)	-
选择是父元素的ul类型的偶数节点	ul:nth-of-type(even)	-
选择id属性为s-top-left的后3个子元素（范围选择）	-	//*[@id=“s-top-left”]/*[position()>last()-3]
选择class属性为text-color的节点的父节点	-	//*[@class=“text-color”]/. .
选择i的相邻兄弟节点span	i + span	-
选择data-index属性为0的元素的所有类型为ul的后续兄弟节点	[data-index=“0”] ~ ul	//*[@data-index=“0”]/following-sibling::ul
选择data-index属性为5的元素的所有前面兄弟节点	-	//*[@data-index=“5”]/preceding-sibling:: *