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。

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

參考文章:

1.WebDriver Element Locators

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

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

廣告

3 thoughts on “Selenium 使用 CSS locator 定位 HTML element

  1. Hello, 請問 若 element 被 iframe 擋住, 導致 Selenium 定位不到 element.
    有試著用driver.switch_to_frame去定位iframe
    但好像還是無法找到在iframe中被擋住的element , 此狀況可否有解,謝謝。

發表迴響

Please log in using one of these methods to post your comment:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s