首页 > 代码库 > 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常用的定位方式介绍

  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();

 

Selenium 中 cssSelector定位