Web元素定位之CSS Selector

最新推荐文章于 2025-02-18 21:17:31 发布

义甬君

最新推荐文章于 2025-02-18 21:17:31 发布

阅读量1.5w

点赞数 3

分类专栏： Selenium 文章标签： css 自动化测试 web xpath Selenium

本文链接：https://blog.youkuaiyun.com/ywyxb/article/details/58607218

版权

Selenium 专栏收录该内容

6 篇文章

订阅专栏

本文探讨了CSS Selector与XPath在web自动化测试中的应用，指出XPath功能更强大，但CSS选择器语法简洁且运行速度快。Selenium推荐使用CSS选择器以优化性能。虽然XPath有便利的插件支持，但在某些场景下，可能需要优化为CSS以提升效率。文中还提到Selenium IDE自动录制脚本的不足，强调理解XPath和CSS的必要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

XPath与CSS Selector的差别

上一篇文章中总结了web自动化测试中用xpath来进行元素定位的方法，那么CSS Selector又是什么鬼？
其实，对于使用者来讲，哪个用的习惯就选哪个。总的来说，XPath更强大，而CSS选择器通常语法比较简洁，运行速度更快些。

Target	CSS 3	XPath
所有元素	*	//*
所有的P元素	p	//p
所有的p元素的子元素	p > *	//p/*
根据ID获取元素	/转义/#id	//*[@id= ‘id’]
根据Class获取元素	.class	//*[contains(@class, ‘class’)]
拥有某个属性的元素	*[title]	//*[@title]
所有P元素的第一个子元素	p > *:first-child	//p/*[0]
所有拥有子元素a的P元素	无法实现	//p[a]
下一个兄弟元素	P + *	//p/following-sibling::*[0]

由于Selenium使用xpath定位时采用遍历页面的方式，在性能上采用CSS选择器的方式更优。Xpath虽然性能指标较差，但是在浏览器中有比较好的插件支持，定位元素比较方便，对于性能要求严格的场景，可考虑通过xpath改写css的方式进行替换，比较以下2种方式：

XPATH地址: id('index')/div[2]/div/ul/div/li[2]/a
CSS选择器地址: #index div:nth-of-type(2) div ul li:nth-of-type(2) a
或者： #index>div:nth-of-type(2)>div>ul>li:nth-of-type(2)>a

实战积累：

“>”表示直接子节点，“ ”空格表示任意子节点

css=div.resource-list>div:nth-child(1)>div:nth-child(1) div.progress

非隐藏

css=div:not(.hidden) div.resource-buttons

部分匹配

css=.dijitReset.dijitInline.dijitButtonText:contains("Join Event")

css=a[href*='/scheduledDeployment/45d67'] 包含了

css=a[href^='/scheduledDeployment/45d67'] 以xxx开头的

css=a[href$='/scheduledDeployment/45d67'] 以xxx结尾的

如果class里带的空格，用.来代替空格如：

 <button class="x-btn-text module_picker_icon">...
 可以这样写： css=button.x-btn-text.module_picker_icon

子节点和兄弟节点

div+p:  紧接在 <div> 元素之后的所有 <p> 元素
p~ul:  前面有 <p> 元素的每个 <ul> 元素
p:nth-of-type(2):  第二个 <p> 元素
p:nth-last-child(2):  父元素的倒数第二个 <p> 子元素

详细的语法和使用参考：

番外篇：为什么要自己写xpath或css path
有人说，现在有了Selenium IDE自动录制脚本，我们根本不需要会xpath和css，但我要说的是虽然Selenium IDE会帮助自动识别元素，但其录制的脚本非常不稳定，回放失败率极高：

以dojo框架实现的动态页面为例，主要问题：
1. dojo框架所给出的各个控件并不会像传统的html标签一样，一旦代码书写完成就有固定的html id和html结构，dojo会自动为每个所使用的控件创建一系列节点，并随机给每个控件一个”控件类别+顺序号”的html id，这样就给书写selenium用例带来了麻烦.
2. dojo框架提供的控件使用的事件机制无法用普通的Selenium IDE录制来完成，必须给以加工才可以使用，否则无法触发实际控件的动作。
3. dojo作为一个ajax工具包，当然使用了ajax框架，所以web的行为具有异步特征，在进行事件的模拟（类似单击下拉框进行选择时）由于一般此种控件的数据源会在服务器处获得由此会产生一个ajax调用，在此时直接执行单击动作会无法找到相应节点（因为数据还木有返回，节点当然就无法生成），从而产生一个element not found的错误而导致测试出错.

想要学习Xpath进行元素定位的童鞋，请移步：

Selenium自动化测试之Xpath网页元素定位
http://blog.youkuaiyun.com/ywyxb/article/details/58601160