Python爬蟲模擬登..
常見錯誤訊息

软件开发平台及语言笔记大全(超详细)

Selenium 使用 CSS locator 定位 HTML element

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。

<input value="Google" id="igl" class="cgl">
<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">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']")

Tip	[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" alt="yahoo">Yahoo!</a>
<a title="t2" href="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，抓到 First，程式碼如下所示。

find_element_by_css_selector("td:first-child")

如要抓取 td 標籤中第 3 個 element，可以在節點名稱後加入:nth-child(3)，括號中代入索引值，會抓到 Third，程式碼如下所示。

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 均已能滿足大部份的需求，其他更進階的應用可以參考這邊。

##參考文章：

  1. WebDriver Element Locators

  2. selenium+python find_element_by_css_selector方法使用- 你堅持了嗎- 博客園

  3. 利用 CSS Selector 定位網頁元件 | 科科和測試

书籍推荐