cssSelector定位
一.为什么使用cssSelector定位元素?
目前针对一些常规定位方式有:By.id、、By.LinkTest(针对<a>标签)、By.ClassName 针对不太好定位的,比如:没有id、name、class的定位方式,或者说id、name、class的value值显示重复,不太方便一下写出定位方式,这样可以考虑下其它定位方式。
以下主要介绍cssSelector如何解决id、name、class的value值显示重复的定位方式。
二.基础语法
三.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']:多属性选择器,针对一个标签有多个属性,做并且的关系同时满
足条件;
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代码的网页
<div class="formdiv">
<form name="fnfn">
<input name="username" type="text"></input>
<input name="password" type="text"></input>
<input name="continue" type="button"></input>
<input name="cancel" type="button"></input>
<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>
2.匹配示例:
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提供的伪类,用来访问页面上DOM tree之外的信息,还有Pseudo-elements 用来最精准的定位页面上的某一行文字,甚至某一行文字的第一个字母。
这个得具体研究一下css3 selector文档的Chapter 6.6 Pseudo-classes 和 Chapter 7 Pseudo-elements
4.综上所述,就是:
有固定id的用id selector,
没有固定id的用css selector。
Pseudo-selements :contains()很好用。
会了这几下子,基本上定位就不成问题了。