Selenium 中 cssSelector定位

一.为什么使用cssSelector定位元素？

目前针对一些常规定位方式有：By.id、By.name、By.LinkTest(针对<a>标签)、By.ClassName

针对不太好定位的，比如：没有id、name、class的定位方式，或者说id、name、class的value值显示重复，不太方便一下写出定位方式，这样可以考虑下其它定位方式。以下主要介绍cssSelector如何解决id、name、class的value值显示重复的定位方式。

二.基础语法

E	标签选择器，匹配所有使用E标签的元素
E F	后代元素选择器，匹配所有属于E元素后代的F元素，E和 F之间用空格分隔
E > F	子元素选择器，匹配所有E元素的子元素F
E + F	毗邻元素选择器，匹配紧随E元素之后的同级元素F （只 匹配第一个）
E ~ F	同级元素选择器，匹配所有在E元素之后的同级F元素
.info  class	选择器，匹配所有class属性中包含info的元素
#footer  id	选择器，匹配所有id属性等于footer的元素
E[att='val']	属性att的值为val的E元素 （区分大小写）
E[att^='val']	属性att的值以val开头的E元素 （区分大小写）
E[att$='val']	属性att的值以val结尾的E元素 （区分大小写）
E[att*='val']	属性att的值包含val的E元素 （区分大小写）
E[att1='v1'][att2*='v2']	属性att1的值为v1，att2的值包含v2 （区分大小写）
E:contains('xxxx')	内容包含xxxx的E元素（已经废弃的伪类，不再支持）
:nth-of-type和:nth-child	以"type"来区分的,也就是说 ele:nth-of-type(n)是指其父元素下第n个ele元素，  ele:nth-child(n)是指其父元素下第n个元素且这个元素为ele，若不是，则选择失败。

案例图：

 

   

三.css常用的定位方式介绍

1. E代表的是标签。
2. E>F：F也是代表的标签，称为子代元素，F是E的子代元素，说通俗一点F是E的儿子关系，F紧跟着E后面的第一个元素，直接的下一级。
3. E F：隔着多层标签，称为后代元素。通俗称为祖宗辈，例如爷爷和孙子关系。
4. E+F：匹配紧随E元素之后的同级元素F（只匹配第一个），称为毗邻元素选择器。通俗点解释E是大哥，后面有多个弟弟，只取它最近一个弟弟F。
5. E ~ F：同级标签，称为同级元素选择器。通俗称为兄弟关系，例如哥哥和弟弟关系。
6. E[att='val'] ：E代表标签，att代表属性，val指属性的值。例如：span[class=’ui-tg-text’]
7. E[att1='v1'][att2*='v2']:多属性选择器，针对一个标签有多个属性，做并且的关系同时满足条件。
8. .info  class：点代表class。例如上述图中：.ui-tg-text
9. #footer  id：#号代表id。例如上述图中：#operation
10. ele:nth-of-type(n) 是指其父元素下第n个ele元素。 例如：同一级下有10个div标签，那么只需要定位其中6个div，这时代码可以这样写：div:nth-of-type(6)，括号中的数据代表索引查找第n个元素。

例如：

drvier.findElement(By.cssSelector("#operation a span~span")).click();