首页 > 代码库 > Selenium 中 cssSelector定位
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常用的定位方式介绍
- E代表的是标签。
- E>F：F也是代表的标签，称为子代元素，F是E的子代元素，说通俗一点F是E的儿子关系，F紧跟着E后面的第一个元素，直接的下一级。
- E F：隔着多层标签，称为后代元素。通俗称为祖宗辈，例如爷爷和孙子关系。
- E+F：匹配紧随E元素之后的同级元素F（只匹配第一个），称为毗邻元素选择器。通俗点解释E是大哥，后面有多个弟弟，只取它最近一个弟弟F。
- E ~ F：同级标签，称为同级元素选择器。通俗称为兄弟关系，例如哥哥和弟弟关系。
- E[att=‘val‘] ：E代表标签，att代表属性，val指属性的值。例如：span[class=’ui-tg-text’]
- E[att1=‘v1‘][att2*=‘v2‘]:多属性选择器，针对一个标签有多个属性，做并且的关系同时满足条件。
- .info class：点代表class。例如上述图中：.ui-tg-text
- #footer id：#号代表id。例如上述图中：#operation
- 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();
Selenium 中 cssSelector定位