CssSelector定位详解
⼀，为什么使⽤ cssSelector定位元素?
⽬前针对⼀些常规定位⽅式有: By.id、By.name、By.LinkTest(针对 <a>标签 )、By.ClassName 针对不太好定位的，⽐如：没有 id、name、class 的定位⽅式，或者说 id、name、class 的
value 值显⽰重复，不太⽅便⼀下写出定位⽅式，这样可以考虑下其它定位⽅式。以下主要介绍 cssSelector 如何解决id 、 name 、 class 的value 值显⽰重复的定位⽅式。
⼆，cssSelector选择器使⽤语法：
三 .css常⽤的定位⽅式介绍
*：
E：代表的是标签;
EF：隔着多层标签，称为后代元素。通俗点说祖宗辈关系，例如爷爷和孙⼦关系;
E>F： F 也是代表的标签，称为⼦代元素， F 是 E 的⼦代元素，说通俗⼀点 F 是 E 的⼉⼦关系， F紧跟着 E后⾯的第⼀个元素，直接
的下⼀级;
E+F：匹配紧随 E 元素之后的同级元素 F(只匹配第⼀个) ，称为毗邻元素选择器。通俗点解释 E 是⼤哥，后⾯有多个弟弟，只取它最近⼀个弟弟 F;
E ~ F：同级标签，称为同级元素选择器。通俗称为兄弟关系，例如哥哥和弟弟关系;
.info class：点代表 class;
#footer id: #号代表 id ;
E[att='val'] : E 代表标签， att 代表属性， val 指属性的值;
E[att^='val']：
E[att$='val']：
E[att*='val'] ：
E[att1='v1'][att2*='v2']: 多属性选择器，针对⼀个标签有多个属性，做并且的关系同时满⾜条件;
E:contains('xxxx')：
E:not(s)：：
:nth-of-type和:nth-child：
ele:nth-of-type(n) 是指其⽗元素下第 n 个 ele 元素。例如: 同⼀级下有 10 个 div 标签，那么只需要定位其中 6 个 div，这时代码可以这样写: div:nth-of-type(6) ，括号中的数据代表索引查第 n 个元素;
ele:nth-child(n)
四. cssSelector常⽤定位⽅式的案例
1.例如这样⼀段 html 代码的⽹页
<html>
<head></head>
<body>
<div class="formdiv">
<form name="fnfn">
<input name="username" type="text" />
<input name="password" type="text" />
<input name="continue" type="button" />
<input name="cancel" type="button" />
<input value="SYS123456" name="vid" type="text" />
<input value="ks10cf6d6" name="cid" type="text" />
</form>
<div class="subdiv">
<ul id="recordlist">
<p>Heading</p>
<li>Cat</li>
<li>Dog</li>
<li>Car</li>
css固定定位
<li>Goat</li>
</ul>
</div>
</div>
</body>
</html>
2. 匹配⽰例:
locator 匹配
css=div css=div.formdiv <div class="formdiv">
css=#recordlist css=ul#recordlist
<ul id="recordlist"> <ul id="recordlist">
css=div.subdiv p css=div.subdiv>ul>
<p>Heading</p> css=form + div <div class="subdiv">
css=p + li css=p ~ li ⼆者定位到的都是 <li>Cat</li>
但是 storeCssCount的时候，前者得到 1，后者得到 4
css=form > input[name=username] <input name="username">
css=input[name$=id][value^=SYS] <input value="SYS123456" name="vid" type="hidden"> css=input:not([name$=id][value^=SYS]) <input type="text"></input>
css=#recordlistli:nth-of-type(4) <li>Goat</li>
3.针对特殊标签定位⽅式:
a). 如果 class ⾥带的空格，⽤ . 来代替空格如:
<button class="x-btn-text module_picker_icon">...
可以这样写:
css=dule_picker_icon
b).如果你想定位⼀个显⽰ OK的 Button ，但页⾯上有⼏个 Button ，id 是⾃动⽣成的， class 是⼀样的，我⼜想⽤⼀个简单点的 CSS locator 的时候，
<button id="ext-eng-1026" class="x-right-button">OK</button>
<button id="ext-eng-1027" class="x-right-button">Cancel</button>
可以这样写:
css=button.x-right-button:contains("OK")
:contains 是个 Pseudo-class ，⽤冒号开头，括号⾥是内容。
Pseudo-classes 是 CSS提供的伪类，⽤来访问页⾯上 DOMtree 之外的信息，还有 Pseudo-elements ⽤来最精准的定位页⾯上的某⼀⾏⽂字，甚⾄某⼀⾏⽂字
的第⼀个字母。这个得具体研究⼀下 css3 selector ⽂档的 Chapter 6.6 Pseudo-classes 和 Chapter 7 Pseudo-elements
4. 综上所述，就是 :
有固定 id 的⽤ id selector ，
没有固定 id 的⽤ css selector 。
Pseudo-selements : contains ()很好⽤。会了这⼏下⼦，基本上定位就不成问题了。

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