[TOC] ## **4.1.8 CSS 定位** CSS 是一種語言，用來描述 HTML 和 XML 文檔的表現。CSS 使用選擇器為頁面元素綁定屬性。 CSS 選擇器可以較為靈活地選擇控件的任意屬性，一般情況下，CSS 定位速度比 XPath定位速度快，但對于初學者來說，學習起來稍微有點難度，下面介紹 CSS 選擇器的語法與使用。 CSS 選擇器的常見語法如表 4-1 所示  下面同樣以百度輸入框和百度搜索按鈕為例，介紹 CSS 定位的用法。 ``` <span class="bg s_ipt_wr"> <input id="kw" class="s_ipt" autocomplete="off" maxlength="100" name="wd"> </span> <span class="bg s_btn_wr"> <input id="su" class="s_btn" type="submit" value="百度一下"> </span> ``` <br /> 1. **通過 class 定位** ``` find_element_by_css_selector(".s_ipt") find_element_by_css_selector(".s_btn") ``` find_element_by_css_selector()方法用于在 CSS 中定位元素，點號（.）表示通過 class來定位元素。 2. **通過 id 定位** ``` find_element_by_css_selector("#kw") find_element_by_css_selector("#su") ``` 井號（#）表示通過 id 來定位元素。 3. **通過標簽名定位** ``` find_element_by_css_selector("input") ``` 在 CSS 中，用標簽名定位元素時不需要任何符號標識，直接使用標簽名即可。 4. **通過標簽層級關系定位** ``` find_element_by_css_selector("span > input") ``` 這種寫法表示有父元素，父元素的標簽名為 span。查找 span 中所有標簽名為 input 的子元素。 5. **通過屬性定位** ``` find_element_by_css_selector("[autocomplete=off]") find_element_by_css_selector("[name='kw']") find_element_by_css_selector('[type="submit"]') ``` 在 CSS 中可以使用元素的任意屬性定位，只要這些屬性可以唯一標識這個元素。對屬性值來說，可以加引號，也可以不加，注意和整個字符串的引號進行區分。 6. **組合定位** 我們可以把上面的定位策略組合起來使用，這就大大加強了定位元素的唯一性。 ``` find_element_by_css_selector("form.fm > span > input.s_ipt") find_element_by_css_selector("form#form > span > input#kw") ``` 我們要定位的這個元素標簽名為 input，這個元素的 class 屬性為 s_ipt；并且它有一個父元素，標簽名為 span。它的父元素還有父元素，標簽名為 form，class 屬性為 fm。我們要找的就是必須滿足這些條件的一個元素。 7. 更多定位用法 ``` find_element_by_css_selector("[class*=s_ipt_wr]") ``` 查找 class 屬性包含“s_ipt_wr”字符串的元素。 ``` find_element_by_css_selector("[class^=bg]") ``` 查找 class 屬性以“bg”字符串開頭的元素。 ``` find_element_by_css_selector("[class$=wrap]") ``` 查找 class 屬性以“wrap”字符串結尾的元素。 ``` find_element_by_css_selector("form > input:nth-child(2)") ``` 查找 form 標簽下面第 2 個 input 標簽的元素。 <br /> CSS 選擇器的更多用法可以查看 W3CSchool 網站中的 CSS 選擇器參考手冊 （http://www.w3school.com.cn/cssref/css_selectors.asp）。 通過前面的學習我們了解到，XPath 和 CSS 都提供了非常強大而靈活的定位方法。相比較而言，CSS 語法更加簡潔，但理解和使用的難度要大一點。根據經驗，這兩種定位方式我們只需掌握一種即可解決大部分定位問題。 <br /> ## **4.1.9 用 By 定位元素** 針對前面介紹的 8 種定位方法，WebDriver 還提供了另外一套寫法，即統一調用 find_element()方法，通過 By 來聲明定位，并且傳入對應定位方法的定位參數，具體如下。 ``` find_element(By.ID,"kw") find_element(By.NAME,"wd") find_element(By.CLASS_NAME,"s_ipt") find_element(By.TAG_NAME,"input") find_element(By.LINK_TEXT,"新聞") find_element(By.PARTIAL_LINK_TEXT,"新") find_element(By.XPATH,"//*[@class='bg s_btn']") find_element(By.CSS_SELECTOR,"span.bg s_btn_wr>input#su") ``` find_element()方法只用于定位元素，它需要兩個參數。第一個參數是定位的類型，由By 提供；第二個參數是定位的值，在使用 By 之前需要先導入。 ``` from selenium.webdriver.common.by import By ``` 通過查看 WebDriver 的底層實現代碼可以發現，它們其實是一回事兒。例如，id 定位方法的實現。 ``` def find_element_by_id(self, id_): """Finds an element by id. :Args: - id_ - The id of the element to be found. :Returns: - WebElement - the element if it was found :Raises: - NoSuchElementException - if the element wasn't found :Usage: element = driver.find_element_by_id('foo') """ return self.find_element(by=By.ID, value=id_) ``` 對于 Web 自動化來說，學會元素的定位相當于自動化已經學會了一半，剩下的就是學會使用 WebDriver 中提供的各種方法，接下來我們將通過實例介紹這些方法的具體使用。