【第四章 selenium学习之xpath】

---

一、xpath 是什么？

XPath (XML Path Language) 是由国际标准化组织W3C指定的，用来在 XML 和 HTML 文档中选择节点的语言。

也是一种灵活的选择元素的方式。

目前主流浏览器 (chrome、firefox，edge，safari) 都支持的是 xpath 1的语法。

同样也可以在

---

二、根据路径选择

1.绝对路径

从根节点下 逐条写出的，用 / 进行分隔
例如：

elements = driver.find_elements(By.XPATH, "/html/body/div")

如果用css，则为

elements = wd.find_elements(By.CSS_SELECTOR, "html>body>div")

2.相对路径

1.要选择 所有的 div 元素里面的 所有的 p 元素 ，不管div 在什么位置，也不管p元素在div下面的什么位置

xpath例如：

elements = wd.find_elements(By.XPATH, "//div//p")

如果用css，则为

elements = wd.find_elements(By.CSS_SELECTOR, "div  p")

2.要选择 所有的 div 元素里面的 直接子节点 p

xpath例如：

elements = wd.find_elements(By.XPATH, "//div/p")

如果用css，则为

elements = wd.find_elements(By.CSS_SELECTOR, "div>p")

3.要选择所有div节点的所有直接子节点(*为通配符)
xpath例如：

elements = wd.find_elements(By.XPATH, "//div/*")

如果用css，则为

elements = wd.find_elements(By.CSS_SELECTOR, "div>*")

---

三、根据属性

1.id

选择 id 为 west 的元素
xpath例如：

elements = wd.find_elements(By.XPATH, "//*[@id='west']")

如果用css，则为

elements = wd.find_elements(By.CSS_SELECTOR, '#west')

2.class

选择所有 select 元素中 class为 single_choice 的元素
xpath例如：

elements = wd.find_elements(By.XPATH, "//*[@id='west']")

3.其他属性

1.选择 具有multiple属性的所有页面元素 ， //*[@multiple]

也就是说，对于其他属性的查找都可以这样写 //*[@属性名]

2.其属性值包括字符串

• 选择 style属性值包含 color 字符串的页面元素
  xpath： //*[contains(@style,‘color’)]
  css： [style=‘color’]*

• 选择 style属性值以 color 字符串开头的页面元素
  xpath： //*[starts-with(@style,‘color’)]
  css： [style^=‘color’]

---

四、根据次序

xpath根据次序进行选择比css更加简洁

1. 选择 p类型第2个的子元素 //p[2]；
2. 选取父元素为div 中的 p类型 第2个子元素 //div/p[2]；
3. 选择父元素为div的第2个子元素，不管是什么类型 //div/*[2]；
4. 选取p类型倒数第1个子元素 //p[last()]；
5. 选取p类型倒数第2个子元素 //p[last()-1]，以此类推；
6. 选取option类型第1到2个子元素 //option[position()<=2] 或者 //option[position()< 3]；
7. 选择class属性为multi_choice的前3个子元素 // * [@class=‘multi_choice’]/*[position()<=3]；
8. 选择class属性为multi_choice的后3个子元素 // [@class=‘multi_choice’]/*[position()>=last()-2]*

---

五、根据节点

1.组选择

• 选择所有的option元素和所有的 h4 元素:
  xpath ：//option | //h4 (用 竖线 隔开多个表达式)
  css: option , h4 (用 逗号 隔开多个表达式)

• 选择所有的 class 为 single_choice 和 class 为 multi_choice 的元素
  xpath ：//* [@class=‘signal_choice’] | // //*[@class=‘multi_choice’]
  css: .single_choice , .multi_choice

2. 父节点

css不能选择父节点，xpath可以
选择 id 为 china 的节点的父节点 //*[@id=‘china’]/…

（当要找的元素没有什么属性特征，就可以通过父节点进行选择）

3. 兄弟节点

1.要选择某个节点的后续兄弟节点

• 选择 class 为 single_choice 的元素的所有后续兄弟节点
  xpath： // * [@class=‘single_choice’]/following-sibling::* （ 语法为：following-sibling::）
  css：.single_choice ~ * （语法为~）、

• 选择 class 为 single_choice 的元素的后续兄弟节点的div节点
  xpath： // * [@class=‘single_choice’]/following-sibling::div （
  css：.single_choice ~ div

2.要选择某个节点的**前*兄弟节点

• 选择 class 为 single_choice 的元素的所有前面的兄弟节点
  xpath： // * [@class=‘single_choice’]/preceding-sibling::*
  css不行

---

六、xpath注意事项

# 先寻找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')

---

总结

1.xpath更多教程
2.css“只能向后看”
3.文中表达式由于格式限制打出的标点为中文格式，所有符号应为英文，请注意
4.参考教程
5.学习网址