Selenium - CSS Selector

用CSS（即层叠样式表Cascading Stylesheet） Selector来定位（locate）页面上的元素（Elements）。

Selenium官网的Document里极力推荐使用CSS locator，而不是XPath来定位元素，原因是CSS locator比XPath locator速度快，特别是在IE下面（IE没有自己的XPath 解析器(Parser)）。用CSS Selector能非常精准的定位到想测试的Elements，因为前端开发人员就是用CSS Selector设定页面上每一个元素的样式，无论那个元素的位置有多复杂，他们能定位到，那我们也能定位到。

读一下这个文档就能明白大部分的CSS Selector了

http://www.w3.org/TR/css3-selectors/

 

1.button上有class属性的，如:

 <button id="ext-eng=1026" class="x-right-button"...>

 可以这样写：

 css=button.x-right-button

 .代表class

 如果class里带的空格，用.来代替空格如：

 <button class="x-btn-text module_picker_icon">...

 可以这样写：

 css=button.x-btn-text.module_picker_icon

 

2.如果想用别的属性值定位，用方括号【属性名=属性值】的方式，如：

 <abbr>Abc<abbr/>

 css=abbr[title="Abc"]

 

3.如果button上有id属性的，如：

 <input id="ag_name" type="text"...>

 可以这样写：

 css=input#ag_name 

 或者直接写 

 css=#ag_name

 #代表id

 但是在实际应该中，如果有元素固定id的，可以直接用id locator,这样写:

 id=ag_name

 这通常是在Form里的input元素， 需要用户填写内容然后提交的部分，也是最简单的部分。

 没有固定id的，通常是由javascript框架自动生成的id如,每次加载页面都会改变的，如：

 <button id="ext-eng-1026" >，下回可能就是<button id="ext-eng-2047">

 这种情况不能使用id属性来定位。

 如果你想定位一个显示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.基本上用XPath能定位的元素，都能用CSS Selector定位到。

  它两最相似的是这样写： 

  <table><tr><td><div><span>abcd</span><span>1234</span></div></td></tr></table>

  xpath=//table/tr/td/div/span[1]

  css=table>tr>td>div>span:nth-child（1）

  *xpath没在页面上测试过。

  一个非常好的blog，不看可惜了。

  http://saucelabs.com/blog/index.php/2009/10/selenium-tip-of-the-week-start-improving-your-locators/

  http://bbs.opentest.cn/thread-594-1-1.html

 

5.综上所述，就是:

  有固定id的用id selector， 

  没有固定id的用css selector。 

  Pseudo-selements ：contains（）很好用。


来自：http://blog.csdn.net/hwm831002/article/details/8424239