之前總結了使用ID，Name，Xpath等方式來定位頁面元素，其實CSS選擇器也是一個非常好用的定位元素的方法，甚至比Xpath強大。在自動化裡我們用CSS選擇器來定位頁面元素一定要牢記一個準則：唯一定位，通常使用CSS選擇器修改樣式時會盡量多的選擇元素，但是，在自動化裡，必須要唯一定位到元素，否則自動化很可能因為找不到頁面元素而失敗。CSS選擇器有很多，像標籤選擇器、類選擇器、ID選擇器、關係選擇器、偽類選擇器、分組選擇器等等，但是隻需要掌握常用的幾種就可以滿足定位元素的需求。

以下述HTML為例，總結下CSS選擇器的用法：

<div id="menu" class="menu" title="menu">  
    <ul>  
        <li id="first" class="catagory book">  
            <a id="book"></a>  
        </li>  
        <li id="second" class="catagory food">  
            <a id="food"></a>  
        </li>  
        <li>  
            <a id="clothes"></a>  
        </li>  
        <li title="submenu">  
            <a id="furniture"></a>  
        </li>  
    </ul>  
    <a href="....">Welcome to Our Store</a>  
</div> 
 

1. 標籤選擇器

使用HTML標籤來選擇元素，例如： 

driver.findElement(By.cssSelector("li"));   //將選擇所有li元素

driver.findElement(By.cssSelector("a")); //將選擇所有a元素

2. 類選擇器

使用類名來選擇元素，使用方法：.class， 例如：

driver.findElement(By.cssSelector("div.menu")); //將選擇class為menu的div元素driver.findElement(By.cssSelector(".catagory")); //將選擇id為first的元素和id為second的元素，因為這兩個元素

3. ID選擇器

使用ID來選擇元素，使用方法：#id，例如：

driver.findElement(By.cssSelector("a#clothes")); //將選擇id為clothes的a元素

也可以寫成：

driver.findElement(By.cssSelector("#clothes")); //因為id是唯一的所以還是會選擇id為clothes的a元素

3. 關係選擇器

a.div,p 作用：選擇所有div元素和p元素

b.div>p 作用：選擇div的直接子元素中的所有p元素

c. div p   作用：選擇div的後代元素中的所有p元素

4. 屬性選擇器

a. [title]   作用：選擇所有具有title屬性的元素

b. [title='menu']   作用：選擇所有title屬性值等於'menu'的元素

c. [title~='menu']   作用：選擇所有title屬性值包含menu的元素，注意：menu必須是一個word，

且有空格與其他單詞分開

d. [title*='menu']   作用：選擇所有title屬性值包含menu的元素，注意：此時menu為substring，而不是word

e. [title|='menu']   作用：選擇所有title屬性值以menu開頭或者等於menu的元素

f. [title^='menu']   作用：選擇所有title屬性值以menu開頭的元素

g. [title$='menu']   作用：選擇所有title屬性值以menu結尾的元素

h. div[title='menu']   作用： 選擇所有title屬性值等於menu的div元素

4. 通用選擇器

方法：*

例如： div ul *; //選擇div ul 下的所有子元素，包括li和a元素

5. 偽類選擇器

偽類選擇器很多，只總結下用過的:nth-child(n)

例如：p:nth-child(2) 作用：選擇作為第二孩子的p元素