? ? CSS（即層疊樣式表Cascading Stylesheet） Selector來(lái)定位（locate）頁(yè)面上的元素（Elements）。Selenium官網(wǎng)的Document里極力推薦使用CSS locator，而不是XPath來(lái)定位元素，原因是CSS locator比XPath locator速度快，特別是在IE下面（IE沒(méi)有自己的XPath 解析器(Parser)）。有很多跟Selenium相關(guān)的Blog文章都有提到使用CSS Selector的技術(shù)。之前我不會(huì)CSS Selector，甚至一看到CSS就頭疼。但我相信用CSS Selector能非常精準(zhǔn)的定位到我想測(cè)試的Elements。因?yàn)榍岸碎_(kāi)發(fā)人員就是用CSS Selector設(shè)定頁(yè)面上每一個(gè)元素的樣式，無(wú)論那個(gè)元素的位置有多復(fù)雜，他們能定位到，那我也能定位到。

讀一下這個(gè)文檔就能明白大部分的CSS Selector了

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

?

如果button上有class屬性的，如:

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

可以這樣寫(xiě)：

css=button.x-right-button

.代表class

?

如果class里帶的空格，用.來(lái)代替空格如：

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

可以這樣寫(xiě)：

css=button.x-btn-text.module_picker_icon

?

?

如果想用別的屬性值定位，用方括號(hào)【屬性名=屬性值】的方式，如：

<abbr>Abc<abbr/>

css=abbr[title="Abc"]

?

如果button上有id屬性的，如：

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

可以這樣寫(xiě)：

css=input#ag_name ?

或者直接寫(xiě)?

css=#ag_name

#代表id

但是在實(shí)際應(yīng)該中，如果有元素固定id的，可以直接用id locator,這樣寫(xiě):

id=ag_name

這通常是在Form里的input元素， 需要用戶(hù)填寫(xiě)內(nèi)容然后提交的部分，也是最簡(jiǎn)單的部分。

?

沒(méi)有固定id的，通常是由javascript框架自動(dòng)生成的id如,每次加載頁(yè)面都會(huì)改變的，如：

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

這種情況不能使用id屬性來(lái)定位。

?

如果你想定位一個(gè)顯示OK的Button，但頁(yè)面上有幾個(gè)Button，id是自動(dòng)生成的，class是一樣的，我又想用一個(gè)簡(jiǎn)單點(diǎn)的CSS locator的時(shí)候，

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

<button id="ext-eng-1027" class="x-right-button">Cancel</button>

?

可以這樣寫(xiě)：?

css=button.x-right-button:contains("OK")

:contains是個(gè)Pseudo-class，用冒號(hào)開(kāi)頭，括號(hào)里是內(nèi)容。

Pseudo-classes是CSS提供的偽類(lèi)，用來(lái)訪問(wèn)頁(yè)面上DOM tree之外的信息，還有Pseudo-elements 用來(lái)最精準(zhǔn)的定位頁(yè)面上的某一行文字，甚至某一行文字的第一個(gè)字母。我也是昨天頭一回聽(tīng)說(shuō)有這玩意兒，具體可以研究一下css3 selector文檔的Chapter 6.6 Pseudo-classes 和 Chapter 7 Pseudo-elements

?

?

基本上用XPath能定位的元素，都能用CSS Selector定位到。

它兩最相似的是這樣寫(xiě)：?

<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）

?

一個(gè)非常好的blog，不看可惜了。

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

?

綜上所述，就是:

有固定id的用id selector，?

沒(méi)有固定id的用css selector。?

Pseudo-selements ：contains（）很好用。

會(huì)了這幾下子，基本上定位就不成問(wèn)題了。

?

轉(zhuǎn)載別人的，解決了我的問(wèn)題，感覺(jué)對(duì)初學(xué)者都很有用，記錄了。