一 ，为什么使用 cssSelector定位元素?
目前针对一些常规定位方式有: By.id、By.name、By.LinkTest(针对 <a>标签 )、By.ClassName 针对不太好定位的，比如:没有 id、name、class 的定位方式，或者说 id、name、class 的
value 值显示重复，不太方便一下写出定位方式，这样可以考虑下其它定位方式。以下主要介绍 cssSelector 如何解决id 、 name 、 class 的 value 值显示重复的定位方式。
二，cssSelector选择器使用语法：
三 .css常用的定位方式介绍
四. 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> |
|
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 ()很好用。会了这几下子，基本上定位就不成
问题了。
原文：https://www.cnblogs.com/Alexr/p/13198114.html