1. CSS v.s. XPATH
- 总的来说，css 的定位效率相较于 xpath 更高，需要使用的代码的数量更少，更简洁美观。
例如：
多个属性匹配
xpath --> //a[@class='name' and value='123']
css --> a[.name][value='123']
-----------------------------------------------------------------------------------------------------------------------------------------
拥有某个属性的元素
xpath --> //*[@title]
css --> *[title]
- CSS 的适用性相比 XPATH 要更少;
-- 尤其是在查找 父节点、兄弟节点、模糊匹配 等场景中，一般使用 XPTAH 而不是 CSS;
-- 详情可以参考下面的对比分析。
2. CSS 和 XPATH 的功能对比
| 对比项 |
定位方式 |
CSS |
XPATH |
| 常规属性 |
id |
#id_keyword |
//*[@id=‘id关键字‘] |
| 常规属性 |
class |
.class_name |
//*[@class=‘class属性名‘] |
| 常规属性 |
name |
[name=‘name关键字‘] |
//*[@name=‘name关键字‘] |
| 多个属性组合 |
—— |
[type=‘type关键字‘][name=‘name关键字‘] |
//input[@type=‘type关键字‘ and @name=‘name关键字‘] |
| 文本属性 |
—— |
不支持 |
//*[text()=‘text字符串‘] |
| 层级关系 |
相对路径 |
form#form>span>input |
//form[@id=‘form]/span/input |
| 层级关系 |
索引 |
select#nr>option:nth-child(3) |
//select[@id=‘nr‘]/option[3] |
| 找父节点 |
—— |
不支持 |
//*[@id=‘id关键字‘]/../.. |
| 模糊匹配 |
模糊匹配text |
不支持 |
//*[contains(text(),'text字符串')] |
| 模糊匹配 |
模糊匹配某个属性 |
不支持 |
/*[contains(@class,'class属性名')] |
| 模糊匹配 |
模糊匹配以xx开头 |
不支持 |
//*[starts-with(@id,'开头字符串')] |
网友评论