利用 CSS Selector 定位網頁元件

透過觀察網頁原始碼取得元件屬性,是最基本的方法,但網頁往往結構複雜,trial and error 要花上不少時間。Selenium 支援用 CSS Selector 的方式定位元件,再配合 Chrome 的外掛程式 SelectorGadget 自動產生精準的 CSS Selector 語法,大幅提升實作速度。

舉個例子,我想擷取搜尋 “css selector" 的結果頁面,所有的標題及其超連結,如下面截圖標示的項目:

google result highlight

安裝並啟用 SelectorGadget 之後,你可以點擊想要擷取的元件,SelctorGadget 會協助你產生對應的 CSS selector,但一開始產生的語法範圍太廣泛,會多抓到許多不需要的元件。(所有符合的元件會被黃色標示)

請你點擊不需要的元件,將他們移除,語法就會自動進化得更為精準!你也可以透過旁邊顯示的「符合元件數」確認是不是已經符合你要的結果。以這個例子來說,最後產生的語法是 “.r a",有 10 個元件命中,符合我們的預期。

螢幕快照 2015-02-19 下午10.03.31

用 Python 搭配 Chrome webdriver 實作,輸入欄位一樣是用 SelectorGadget 自動產生:

from selenium import webdriver
from selenium.webdriver.common.keys import Keys
import os</code>

cwd = os.getcwd() + '/'
wd = webdriver.Chrome(cwd + 'chromedriver')
wd.implicitly_wait(10)

url = "http://www.google.com"
wd.get(url)

input = wd.find_element_by_css_selector("#lst-ib")
input.send_keys("css selector")
input.send_keys(Keys.RETURN);

list = wd.find_elements_by_css_selector(".r a")

for item in list:
link = item.get_attribute("href")
print item.text,link

得到的結果:

CSS Selectors Reference - W3Schools http://www.w3schools.com/cssref/css_selectors.asp
CSS 選擇器、選取器(Selector)種類簡介 - 魚躍創意 http://blog.fishsaut.com/2010/03/css-selector.html
CSS Class 與CSS ID - 1Keydata CSS 語法教學 http://www.1keydata.com/css-tutorial/tw/class-id.php
Selectors - Web developer guide | MDN https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors
The 30 CSS Selectors you Must Memorize - Tuts+ Code ... http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
如何撰寫有效率的CSS選擇器(CSS Selector) @ WordPress ... http://www.mrmu.com.tw/2011/10/11/writing-efficient-css-selectors/
Selectors http://www.w3.org/TR/CSS21/selector.html
Selectors Level 3 - World Wide Web Consortium http://www.w3.org/TR/css3-selectors/
CSS 选择器参考手册 - w3school 在线教程 http://www.w3school.com.cn/cssref/css_selectors.asp
CSS Selectors | Codecademy http://www.codecademy.com/courses/web-beginner-en-XUclI\
廣告

2 thoughts on “利用 CSS Selector 定位網頁元件

發表迴響

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