前言

前面已經把環境搭建好了，現在開始使用 Selenium 中的 Webdriver 框架編寫自動化程式碼指令碼，我們常見的在瀏覽器中的操作都會有相對應的類方法，這些方法需要定位才能操作元素，不同網頁的元素也不同，可以根據自己情況選擇使用類方法。下面開始學習元素定位；

New一個字尾為.py的Python檔案寫一段程式碼，先感受一下程式碼吧！寫完以後Ctrl+Shift+F10執行程式碼。

# -*- coding:utf-8 -*-
from selenium import webdriver   # 從selenium模組中匯入webdrive類

driver = webdriver.Chrome()   # 定義新的變數名,開啟瀏覽器
 

driver.maximize_window()   # 瀏覽器視窗最大化

driver.get("https://baidu.com")  # 開啟百度網址

# 定位百度首頁的搜尋框,然後在搜尋框中輸入Selenium
driver.find_element_by_id('kw').send_keys('Selenium')

# 定位百度首頁的百度一下,然後點選一下
driver.find_element_by_id('su').click()

瀏覽不同的網頁元素也不同，可以選擇使用最合適你的情況的方法使用，下面介紹Selenium其中的16種定位方法：

WebDriver8種基本元素定位方式：

id定位：find_element_by_id(self, id_)
name定位：find_element_by_name(self, name)
class定位：find_element_by_class_name(self, name)
tag定位：find_element_by_tag_name(self, name)
link定位：find_element_by_link_text(self, link_text)
partial_link定位：find_element_by_partial_link_text(self, link_text)
xpath定位：find_element_by_xpath(self, xpath)
css定位：find_element_by_css_selector(self, css_selector）

這8種其實和上面的8種一樣的只不過後者是以複數形式出現(這些複數定位方法會返回一個列表的值)：

id複數定位：find_elements_by_id(self, id_)
name複數定位：find_elements_by_name(self, name)
class複數定位：find_elements_by_class_name(self, name)
tag複數定位：find_elements_by_tag_name(self, name)
link複數定位：find_elements_by_link_text(self, text)
partial_link複數定位：find_elements_by_partial_link_text(self, link_text)
xpath複數定位：find_elements_by_xpath(self, xpath)
css複數定位：find_elements_by_css_selector(self, css_selector)

8種基本定位介紹，掌握這8種基本可以橫著走了：

以百度為例這張圖是百度輸入框的，一眼看過去就看到了三種定位方式：

1. 通過id定位：

driver.find_element_by_id('kw').send_keys('Selenium')

2. 通過name定位：

driver.find_element_by_name('wd').send_keys('Selenium')

3. 通過class定位：

driver.find_element_by_class_name('s_ipt').send_keys('Selenium')

4. 通過tag定位：

tag其實是通過標籤名去定位的，一般情況下一個頁面會存在大量相同的標籤名這種定位方式不是很實用，所以用的也就比較少；

driver.find_element_by_tag_name('input').send_keys('Selenium')

5. 通過link_text定位：

HTML程式碼中以a標籤開頭的一般是超連結元素的標記可以使用link_text可以精準匹配；

<a href="http://news.baidu.com" name="tj_trnews" class="mnav">新聞</a>

driver.find_element_by_link_text('新聞').click()

6. 通過partial_link_text定位：

這種定位方式和上面的一樣也是通過HTML的a標籤定位，唯一不同的這種方式是模糊匹配，當超連結名稱過長時，這時候可以使用模糊匹配方式，擷取其中一部分字串就可以了；

driver.find_element_by_partial_link_text('聞').click()

7. 通過xpath定位：

xpath是XML路徑語言，它可以用來確定xml文件中的節點元素位置，通過元素的路徑來完成對元素的查詢。HTML就是XML的一種實現方式，可以自行選擇絕對路徑和相對路徑作為匹配的路徑

雙斜槓(//) = 相對路徑，可以選擇任何一個節點作為起始點

單斜杆(/) = 絕對路徑，就是從網頁程式碼的html開始一層一層找

(*)= 匹配任何元素節點；(@*)= 匹配任何屬性節點

1. xpath可以使用id，name，class元素進行定位：
   

   
   

   # 使用xpath方法的id屬性定位'
   driver.find_element_by_xpath("//*[@id='kw']").send_keys('Selenium')
   
   # 使用xpath方法的name屬性定位
   driver.find_element_by_xpath("//*[@name='wd']").send_keys('Selenium')
   
   # 使用xpath方法的class屬性定位
   driver.find_element_by_xpath("//*[@class='s_ipt']").send_keys('Selenium')

2. 除了使用class，id，name定位，也可以手動選取節點來進行定位：

   # 使用 // 選取當前節點
   driver.find_element_by_xpath("//input[@id='kw']").send_keys('Selenium')
   
   # 使用 // 選取父節點
   driver.find_element_by_xpath("//span[@class='bg s_ipt_wr quickdelete-wrap']/input").send_keys('Selenium')
   
   # 使用 // 選取爺節點
   driver.find_element_by_xpath("//form[@id='form']/span[1]/input").send_keys('Selenium')

3. 使用絕對路徑定位程式碼會很長，有其中一個元素髮生變化就會失效還有程式在執行的時候會檢索會比較慢，剝絲抽繭一層層的找會很慢，不建議使用；
   

    

   driver.find_element_by_xpath('html/body/div[1]/div[1]/div/div[1]/div/form/span[1]/input').send_keys('Selenium')

8. 通過css定位：

1. css也頗為強大xpath可以乾的事css也可以幹，css的語法更為簡潔，更為高效。而相對初學者xpath看起來更直觀，更好理解；
   
   

   # 使用 css 通過 id 定位
   driver.find_element_by_css_selector('#kw').send_keys('Selenium')
   
   # 使用 css 通過 class 定位
   driver.find_element_by_css_selector('.s_ipt').send_keys('Selenium')
   
   # 使用 css 通過 name 定位
   driver.find_element_by_css_selector("[name='wd']").send_keys('Selenium')
   
   # 使用 css 通過 autocomplete 定位
   driver.find_element_by_css_selector("[autocomplete='off']").send_keys('Selenium')

2. css除了使用元素的屬性定位也可以和xpath一樣使用層級關係進行定位：
   
   

   # 使用 css 通過 標籤定位
   driver.find_element_by_css_selector('input').send_keys('Selenium')
   # 使用 css 標籤屬性定位
   driver.find_element_by_css_selector('input.s_ipt').send_keys('Selenium')
   driver.find_element_by_css_selector('input#kw').send_keys('Selenium')
   # 層級關係
   driver.find_element_by_css_selector("input[id='kw']").send_keys('Selenium')
   driver.find_element_by_css_selector("input[name='wd']").send_keys('Selenium')
   driver.find_element_by_css_selector("input[autocomplete='off']").send_keys('Selenium')
   # 層級關係
   driver.find_element_by_css_selector("form#form>span>input").send_keys('Selenium')
   driver.find_element_by_css_selector("form.fm>span>input").send_keys('Selenium')
   driver.find_element_by_css_selector("form[name='f']>span>input").send_keys('Seleniu

本章說的是8種基本定位的方法，學會了8種就足夠日常使用了，其中xpath和css的定位方法遠遠不止我寫的幾種，想要深入瞭解xpath、css、複數定位的請自行百度進行學習。

&nb