html定位方式的选择,CssSelector定位详解

目前针对一些常规定位方式有: By.id、By.name、By.LinkTest(针对 标签 )、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 代码的网页

Heading

CatDogCarGoat

2. 匹配示例:

locator

匹配

css=div css=div.formdiv

css=#recordlist css=ul#recordlist

css=div.subdiv p css=div.subdiv>ul>

Heading

css=form + div

css=p + li

css=p ~ li

二者定位到的都是

Cat

但是 storeCssCount的时候，前者得到 1，

后者得到 4

css=form > input[name=username]

css=input[name$=id][value^=SYS]

css=input:not([name$=id][value^=SYS])

css=#recordlistli:nth-of-type(4)

Goat

3.针对特殊标签定位方式:

a). 如果 class 里带的空格，用 . 来代替空格如:

...

可以这样写:

css=button.x-btn-text.module_picker_icon

b).如果你想定位一个显示 OK的 Button ，但页面上有几个 Button ，id 是自动生 成的， class 是一样的，我又想用一个简单点的 CSS locator 的时候，

OK

Cancel

可以这样写:

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