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常用的定位方式介绍

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 指属性的值;

7.E[att1='v1'][att2*='v2']: 多属性选择器，针对一个标签有多个属性，做并且的关系同时满足条件;

8..info class:点代表 class;

9.#footer id: #号代表 id ;

10.ele:nth-of-type(n) 是指其父元素下第 n 个 ele 元素。例如: 同一级下有 10 个 div 标签，那么只需要定位其中 6 个 div，这时代码可以这样写: div:nth-of-type(6) ，括号中的数据代表索引查找第 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> 
     <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=button.x-btn-text.module_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 ()很好用。会了这几下子，基本上定位就不成问题了。

CssSelector定位详解

猜你喜欢