Selenium 提供多種 locator strategy，本篇文章將說明透過 CSS locator 來定位 HTML element。將用以下幾個 Case 說明：
Case 1.
首先，我們先了解透過 CSS 抓取 element 的方式與透過 id、class name 與節點名稱方式來抓取 element，以下面 HTML 原始碼來說明。
<input value="Google" id="igl" class="cgl">
要透過 id 抓取 element，呼叫 find_element_by_css_selector() 帶入的參數為 id 屬性值前面加上「#」，此方法與 find_element_by_id() 執行結果一樣。
find_element_by_css_selector("#igl")
find_element_by_id("igl")
透過 class 抓取 element，帶入的參數為 class 屬性值前面加上「.」，結果與 find_element_by_class_name() 一樣。
find_element_by_css_selector(".cgl")
find_element_by_class_name("cgl")
如果一個 class 裡包含多個 class 情況，HTML 原始碼如下。
<input value="Google" id="igl" class="cgl_a cgl_b">
則不管抓取 cgl_a 或 cgl_b 的結果都會一樣，程式碼如下所示。
find_element_by_css_selector(".cgl_a")
find_element_by_css_selector(".cgl_b")
但如果就是想抓取 class="cgl_a cgl_b" 屬性值為 “cgl_a cgl_b" 的 element 的話，無法透過 find_element_by_css_selector(“.cgl_a cgl_b") 方式抓取，則要用下面 Case 3 提到的方法來抓取 element。
透過節點名稱抓取 element，參數直接帶入節點的名稱，與 find_element_by_tag_name() 執行結果一樣。
find_element_by_css_selector("input")
find_element_by_tag_name("input")
Case 2.
要抓取某個節點內的 element，HTML 原始碼如下所示，我們要抓取第 5 行的 element。
<li class="st1">
<h2 class="sub_title">Chrome</h2>
</li>
<li class="st2">
<h2 class="sub_title">Firefox</h2>
<li>
如果我們直接抓取 class 屬性值為 sub_title 會找到兩個 element，分別會找到第 2 行與第 5 行 element，但我們只想抓到第 5 行 element。
可看到要抓取的 element 是在 li 節點內，且 li element 的 class 為 st2 ，因此可以透過 “li.st2″ 先抓到父節點，再往下找 “h2″ 子節點，就可以正確抓取到 element，程式碼如下所示。
find_element_by_css_selector("li.st2 h2")
Case 3.
透過 element 裡的屬性值定位 element，HTML 原始碼如下所示。
`<``a` `title``=``"yh"` `href``=``"[http://www.yahoo.com](http://www.yahoo.com/)"``>Yahoo</``a``>`
抓取 element 中 title 屬性值為 yh，要在 [ ] 裡代入識別的屬性值與某個值相同，程式碼如下所示。
find_element_by_css_selector("a[title='yh']")
Case 4.
在上一個例子，能抓取到屬性值相符的 element，但有時候我們會看到某些屬性值，會有某些字串開頭、結尾或包含有某些字串，以下面為 HTML 程式碼為範例，每個 class 屬性值都是 cls 開頭的值。
<h1 class="cls_a1">A1</h1>
<h1 class="cls_b2">B2</h1>
<h1 class="cls_c3">C3</h1>
我們就可以透過以下程式碼，抓取到 3 個 class 屬性值為 cls 開頭的 element。
driver.find_elements_by_css_selector("h1[class^='cls']")
[class^=’cls’] 抓取 class 屬性值為 “cls" 開頭的 element
[class$=’cls’] 抓取 class 屬性值為 “cls" 結尾的 element
[class*=’cls’] 抓取 class 屬性值中包含字串 “cls" 的 element
Case 5.
只抓取含有特定屬性的 element，我們要抓取第 2 行超連結的element，HTML 原始碼如下所示。
`<``a` `href``=``"[http://www.yahoo.com](http://www.yahoo.com/)"` `alt``=``"yahoo"``>Yahoo!</``a``>`
`<``a` `title``=``"t2"` `href``=``"[http://www.google.com](http://www.google.com/)"` `class``=``"gls"``>Google 2</``a``>`
我們只想抓取含有 title、href 與 class 屬性的 element，程式碼如下所示。
find_element_by_css_selector("a[title][href][class]")
Case 6.
只抓取某節點中第幾個 element，以下面 HTML 原始碼為範例。
<table>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
</table>
如要抓取 td 標籤中第 1 個 element，可以在節點名稱後加入:first-child，抓到 <td>First</td>，程式碼如下所示。
find_element_by_css_selector("td:first-child")
如要抓取 td 標籤中第 3 個 element，可以在節點名稱後加入:nth-child(3)，括號中代入索引值，會抓到 <td>Third</td>，程式碼如下所示。
find_element_by_css_selector("td:nth-child(3)")
Case 7.
最後我們用一個例子，來說明抓取 element 可以透過多種方式來抓取同一個 element，HTML 原始碼如下所示。
<div class="dgl">
<input value="Google" id="igl">
</div>
我們欲抓取第 2 行的 input element，可以透過下列方法抓取到 input element，使用者根據不同的結構選擇不同的定位方式。
find_element_by_css_selector("#igl")
find_element_by_css_selector("input")
find_element_by_css_selector("div input")
find_element_by_css_selector("div input#igl")
find_element_by_css_selector("div.dgl input")
find_element_by_css_selector("div.dgl input#igl")
find_element_by_css_selector("div input[value='Google']")
find_element_by_css_selector("div[class='dgl'] input[value='Google'][id='igl']")
以上幾個 Case 均已能滿足大部份的需求，其他更進階的應用可以參考這邊。
网友评论