Selenium - CSS Selector

標籤：style   blog   http   color   ar   使用   java   for   sp   

昨天我練習了用CSS（即層疊樣式表Cascading Stylesheet） Selector來定位（locate）頁面上的元素（Elements）。Selenium官網的Document裡極力推薦使用CSS locator，而不是XPath來定位元素，原因是CSS locator比XPath locator速度快，特別是在IE下面（IE沒有自己的XPath 解析器(Parser)）。有很多跟Selenium相關的Blog文章都有提到使用CSS Selector的技術。之前我不會CSS Selector，甚至一看到CSS就頭疼。但我相信用CSS Selector能非常精準的定位到我想測試的Elements。因為前端開發人員就是用CSS Selector設定頁面上每一個元素的樣式，無論那個元素的位置有多複雜，他們能定位到，那我也能定位到。讀一下這個文檔就能明白大部分的CSS Selector了http://www.w3.org/TR/css3-selectors/ 如果button上有class屬性的，如:

//html源碼：<button id="ext-eng=1026" class="x-right-button"...>//css可以這樣寫：css=button.x-right-button//其中.代表class

 

註：如果class裡帶的空格，用.來代替空格如：

1 //html:2 <button class="x-btn-text module_picker_icon">...3 4 //css可以這樣寫：5 css=button.x-btn-text.module_picker_icon

 如果想用別的屬性值定位，用方括弧【屬性名稱=屬性值】的方式，如：<abbr>Abc<abbr/>css=abbr[title="Abc"] 如果button上有id屬性的，如：

 1 //html: 2 <input id="ag_name" type="text"...> 3  4 //css可以這樣寫： 5 css=input#ag_name 6  7 //或者直接寫 8 css=#ag_name 9 //其中#代表id10 11 //但是在實際應該中，如果有元素固定id的，可以直接用id locator,這樣寫:12 id=ag_name13 14 這通常是在Form裡的input元素， 需要使用者填寫內容然後提交的部分，也是最簡單的部分。

 2.沒有固定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 基本上用XPath能定位的元素，都能用CSS Selector定位到。它兩最相似的是這樣寫：<table><tr><td><div><span>abcd</span><span>1234</span></div></td></tr></table>xpath=//table/tr/td/div/span[1] 、 //button[@type=‘submit‘] 、 //input[@type=‘button‘] 、 //a[@data-role=‘button‘]css=table>tr>td>div>span:nth-child（1）一個非常好的blog，不看可惜了。http://saucelabs.com/blog/index.php/2009/10/selenium-tip-of-the-week-start-improving-your-locators/ 綜上所述，就是:有固定id的用id selector，沒有固定id的用css selector。Pseudo-selements ：contains（）很好用。會了這幾下子，基本上定位就不成問題了。

Selenium - CSS Selector