selenium之cssSelector

Selenium官网的Document里极力推荐使用CSS locator，而不是XPath来定位元素，原因是CSS locator比XPath locator速度快，特别是在IE下面（IE没有自己的XPath 解析器(Parser)）。原来对CSS定位元素一直不太明白，今天看了一下，发现其实它和XPath很像，基本上用XPath能定位的元素，都能用CSS Selector定位到。

如果元素上有class属性的，如:<button id="ext-eng=1026" class="x-right-button" />
可以这样写：
driver.findElement(By.cssSelector("button.x-right-button"));
由于多个元素可能由相同的class，所以通过class属性值定位到的元素可能由多个，此时如果使用findElement，那么只选取定位到的第一个元素，使用findElements可将定位到的所有元素保存到链表中：
List<WebElement> list = driver.findElements(By.cssSelector("button.x-right-button"));

如果有多个class，即class里带空格，用.来代替空格如：
<button class="x-btn-text module_picker_icon" />
可以这样写：
driver.findElement(By.cssSelector("button.x-btn-text.module_picker_icon"));
.代表class

如果想用别的属性值定位，用方括号【属性名=属性值】的方式，如：
<button id="stop" class="om-btn-txt">ok</button>
driver.findElement(By.cssSelector("button[id='stop']"));
id属性也可以这样写：
driver.findElement(By.cssSelector("button#stop"));
或者直接写
driver.findElement(By.cssSelector("#stop"));
#代表id
没有固定id的情况则不能用id属性来定位，如：
<button id="ext-eng-1026" >，下回可能就是<button id="ext-eng-2047">

//下面这种方法测试不通过，提示an invalid or illegal string was specified，有待研究（eclipse firefox）
如果你想定位一个显示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


综上所述，就是:
有固定id的用id selector，
没有固定id的用css selector。
Pseudo-selements:nth-child(4) 表示查找第四个Pseudo-selements元素
Pseudo-selements:contains("string") 表示查找包含string的Pseudo-selements元素（该方法还有待研究）
会了以上方法，基本上定位就不成问题了。


这里记录我用到的复杂点的定位：
driver.findElement(By.cssSelector("div#west-panel>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div"));
driver.findElement(By.cssSelector("td.col5>div>input:nth-child(4)"));