16. XPath 与 CSS Selector 兼容

两种语法都能用

DrissionPage 支持两种经典的定位语法：XPath 和 CSS Selector。

如果你之前用过 selenium，对这两种应该不陌生。DrissionPage 兼容它们的写法，迁移成本很低。

XPath 定位

用 xpath: 开头，后面跟 XPath 表达式。

from DrissionPage import SessionPage

page = SessionPage()
page.get('https://www.baidu.com')

# 用 xpath 查找百度输入框
ele = page.ele('xpath://input[@id="kw"]')
print(ele.tag)  # 输出：input

xpath: 和 xpath= 效果一样，没有 xpath^ 和 xpath$ 语法。

在元素内部用 XPath

元素对象的 ele() 也支持 XPath，而且有个贴心设计：// 前面的 . 可以省略。

# 在某个元素下用 xpath 查找
div = page.ele('#content')
p = div.ele('xpath:.//p')  # 标准写法
p = div.ele('xpath://p')   # 省略 .，效果一样

selenium 里省略 . 会变成全局查找，DrissionPage 不会。在元素下查找，就只在该元素内部找。

用 XPath 直接获取属性

这是 DrissionPage 特有的能力。XPath 里可以直接提取属性值，不用先找到元素再取属性。

# 直接获取 div 的 class 属性值
class_str = ele.ele('xpath://div/@class')
print(class_str)  # 输出 class 的字符串值

CSS Selector 定位

用 css: 开头，后面跟 CSS 选择器。

# 用 css selector 查找元素
ele = page.ele('css:#kw')
print(ele.tag)  # 输出：input

# 查找 class 为 nav 的元素
ele = page.ele('css:.nav')

css: 和 css= 效果一致。

子元素选择器

DrissionPage 的 CSS 定位支持 > 直接子元素选择器，和原生 CSS 语法一致。

# 查找 form 下的直接子元素 input
ele = page.ele('css:>input')

简化写法

XPath 和 CSS 都有简化写法，写起来更短。

# xpath 简化为 x:
ele = page.ele('x://input[@id="kw"]')

# css 简化为 c:
ele = page.ele('c:#kw')

完整对应关系：

原写法	简化写法	说明
xpath:	x:	XPath 定位
css:	c:	CSS Selector 定位
tag:	t:	按标签名定位
text:	tx:	按文本定位

直接写 CSS 选择器

如果定位语句没有任何前缀，默认当作 CSS Selector。

# 这两种写法效果一样
ele = page.ele('css:#kw')
ele = page.ele('#kw')

# class 选择器
ele = page.ele('.nav')

# 组合选择器
ele = page.ele('div.container > p.text')

所以平时写 #id 和 .class 的时候，你已经在用 CSS Selector 了。

接收 selenium 定位元组

从 selenium 迁移过来的项目，可能已经写了很多 (By.ID, 'xxx') 这种元组。

DrissionPage 能直接接收这些元组，不用改代码。

from DrissionPage.common import By

# selenium 风格的定位元组
loc = (By.ID, 'kw')
ele = page.ele(loc)

# xpath 元组
loc = (By.XPATH, '//input[@class="s_ipt"]')
ele = page.ele(loc)

XPath 还是 CSS？

两种语法各有特点，选择依据：

维度	XPath	CSS Selector
功能	更强，能向上查找、按文本查找	稍弱，只能向下查找
语法	稍复杂	简洁直观
性能	稍慢	稍快
适用场景	复杂定位、文本查找	日常简单定位

实际使用中，80% 的场景用 CSS Selector 就够了。遇到复杂情况再上 XPath。

实际例子

假设页面上有个列表，要找到”价格”列中数值大于 100 的行：

# 用 xpath 查找文本包含"100"的 span
ele = page.ele('xpath://span[contains(text(),"100")]')

# 用 css 找 class 为 price 的元素
eles = page.eles('css:.price')

两种写法都能干活，选你觉得顺手的就行。

小结

• xpath: 开头用 XPath，css: 开头用 CSS Selector
• 简化写法：x: 和 c:
• 无前缀默认当作 CSS Selector
• 支持 selenium 的 loc 元组，迁移方便
• 元素下查找时，XPath 的 // 前不需要加 .
• 复杂场景用 XPath，简单场景用 CSS