文章目录
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 绝对路径选择
从根节点开始的，到某个节点，每层都依次写下来，每层之间用 / 分隔的表达式，就是某元素的绝对路径。
# 选择html下面的body下面的div元素
wd.find_element_by_xpath('/html/body/div')
# 等价于:
wd.find_element_by_css_selector('html>body>div')
1.2 相对路径选择
Xpath在前面加 // , 表示从当前节点往下寻找所有的后代元素，不管它在什么位置。
# 要选择所有的div元素里面的所有的p元素
wd.find_elements_by_xpath('//div//p')
# 等价于：
wd.find_element_by_css_selector('div p')
1.3 通配符
* 是一个通配符，对应任意节点名的元素，等价于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 按次序选择
直接在方括号中使用数字表示次序。
3.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)')
3.2 第几个子元素
# 选择父元素为span的第2个子元素，不管是什么类型
wd.find_elements_by_xpath('//span/*[2]')
# 等价于：
wd.find_elements_by_css_selector('span>:nth-of-child(2)')
3.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)')
3.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]')
4 组选择
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')
5 父节点
Xpath可以选择父节点， CSS做不到。
某个元素的父节点用 /… （斜杠+两点）表示。
当某个元素没有特征可以直接选择，但是它有子节点有特征， 就可以采用这种方法，先选择子节点，再指定父节点。
# 选择class属性为text-color的节点的父节点
wd.find_elements_by_xpath('//*[@class="text-color"]/..')
还可以继续找上层父节点，比如： //*[@class="text-color"]/../../..
6 兄弟节点
6.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"] ~ *')
6.2 选择前面的兄弟节点
Xpath语法：preceding-sibling:: ; CSS选择器目前还没有方法选择前面的兄弟节点。
# 选择class属性为title-content-title的元素的前面的类型为span的兄弟节点
wd.find_elements_by_xpath('//*[@class="title-content-title"]/preceding-sibling::span'）
7 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')
8 Xpath VS CSS 对比图
