Selenium中cssSelector定位
css 属性选择器⼀.为什么使⽤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();

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。