CSS Selector

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

• 1
• 2
• 3

---

实战积累：

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

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

• 1

• 非隐藏

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

• 1

• 部分匹配

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

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

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

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

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

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

• 1
• 2
• 3

• 子节点和兄弟节点

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