標籤：區別 html 聯絡 語言 靈活 imp 唯一性 value 瀏覽器
如果把頁面上的元素看作人的話，在現實世界如何找到某人呢？方法有三：
一、通過人本身的屬性，例如他的姓名，手機號，社會安全號碼，性別，這些可區別他人的屬性。在web頁面上的元素也有這些屬性，例如，id、name、class name、tag name等。
二、在找查某人的時候可以通過位置屬性，例如，x國、x市、x路、x號。Xpath和CSS就提供了這種以標籤名為層級關係的定位方式。
三、可以藉助相關他人的屬性來找到某人，例如，我沒有小明的連絡方式，但我有他爸爸的手機號，那麼通過他爸爸手機號也可以找到小明。Xpath和CSS同樣提供通過相關元素來尋找最終元素的方式。
WebDriver提供多種元素定位方法，下面用Python語言來介紹這些元素定位：
1、id定位
HTML規定id屬性在HTML文檔中必須是唯一的，這類似於公民的社會安全號碼。webdriver提供的id定位方法就是通過元素的id屬性來尋找元素。例如通過id定位瀏覽器下百度輸入框與百度搜尋按鈕，用法如下：
find_element_by_id("kw") 百度輸入框
find_element_by_id("su") 百度搜尋
即find_element_by_id()方法通過id屬性來定位元素。
2、name定位
HTML規定name來指定元素的名稱，就像人的姓名，所以不是唯一的。如通過name來定位百度輸入框：
find_element_by_name("wd")
即find_element_by_name()方法通過name屬性來定位元素。由於百度搜尋按鈕沒有提供name屬性，故不能通過name屬性來定位它。
3、class定位
HTML規定clss來指定元素的類名。其用法與id、name類似，如通過class屬性定位百度輸入框和搜尋按鈕：
find_element_by_class_name("s_ipt")
find_element_by_class_name("s_btn")
即find_element_by_class_name()方法通過class屬性來定位元素。
4、tag定位
HTML的本質就是通過tag來定義實現不同的功能，每一個元素本質上也是一個tag。因為一個tag往往用來定義一類功能，所以通過tag識別某個元素機率很低。一般一個頁面有大量的<div>、<input>、<a>等tag，所以很難通過標tag name去區分不同元素。但有時也可以用，如通過tag name定位百度的輸入框，百度按鈕與其相同：
find_element_by_tag_name("input")
即find_element_by_tag_name()方法通過元素的tag name來定位元素。
5、link定位
link用來定位文本連結。如百度右上方的幾個文本連結的代碼如下：
通過link定位連結如下 ：
find_element_by_link_text("新聞")
find_element_by_link_text("hao123")
find_element_by_link_text("地圖")
find_element_by_link_text("視頻")
find_element_by_link_text("貼吧")
find_element_by_link_text()方法通過元素標籤對之間的文本資訊來定位元素。
6、partial link定位
partial link定位是對link定位的一種補充，有些文本連結會比較長，這時候我們可以取文本連結的一部分定位，只要這一部分資訊可以唯一地標識這個連結。如下：
通過partial link定位如下：
find_element_by_partial_link_text("一個很長的")
find_element_by_partial_link_text("文本連結")
find_element_by_partial_link_text()方法通過元素標籤對之間的部分文本資訊來定位元素。
7、Xpath定位
Xpath是一種在XML文檔中定位元素的語言。因為HTML可以看作XML的一種實現，所以可以使用這種強大的語言在web應用中定位元素。
絕對路徑定位
如：
一個元素總有一個絕對路徑，可以通過下面的方式找到百度輸入框和搜尋按鈕：
find_element_by_xpath("html/body/div/div/div/div/div/form/span/input")
find_element_by_xpath("html/body/div/div/div/div/div/form/span[2]/input")
find_element_by_xpath()方法使用Xpath語言來定位元素。Xpath主要用標籤名的層級關係來定位元素的絕對路徑，最外層為html語言。在body文本內，一級一級往下尋找，如果一個層級下有多個相同的標籤名，那個就按上下順序確定是第幾個，例如span[2]表示當前層級下的第二個span標籤。
利用元素屬性定位
除了使用絕對路徑外，Xpath也可以使用元素的屬性來定位。同樣以百度輸入框和搜尋按鈕為例：
find_element_by_xpath("//input[@id=‘kw‘]")
find_element_by_xpath("//input[@id=‘su‘]")
//表示當前頁面某個目錄下，input表示定位元素的標籤名，[@id=‘kw‘]表示這個元素的id屬性值等於kw。下面通過name和class屬性值來定位：
find_element_by_xpath("//input[@name=‘wd‘]")
find_element_by_xpath("//input[@class=‘s_ipt‘]")
find_element_by_xpath("//*[@class=‘s_btn‘]")
如果不想指定標籤名，可以用星號（*）代替。當然，使用Xpath不局限於id、name、class三個屬性值，元素的任意屬性值都可以使用，只要它能唯一的標識一個元素。
find_element_by_xpath("//input[@maxlength=‘100‘]")
find_element_by_xpath("//input[@value=‘‘]")
find_element_by_xpath("//input[@type=‘snbmit‘]")
層級與屬性結合
如果一個元素本身沒有可以唯一標識這個元素的屬性值，那麼可以找其上一級元素，如果它的上一級元素有可以唯一識別屬性的值，也可使用。
假如百度輸入框本身沒有可以利用的屬性值，那麼可以尋找它的上一級屬性，如下：
find_element_by_xpath("//span[@class=‘s_ipt_wr‘]/input")
span[@class=‘bg s_ipt_wr‘]通過class屬性定位父元素，後面/input就表示父元素下面的子項目。如果父元素沒有可利用的屬性值，那麼可以繼續向上尋找“爺爺”元素。
find_element_by_xpath("//form[@id=‘form‘]/span/input")
find_element_by_xpath("//form[@id=‘form‘]/span[2]/input") #百度搜尋按鈕
可以通過這種方法一級一級地向上尋找，直到最外層的<html>標籤，也是一個絕對路徑的寫法了。
使用邏輯運算子
如果一個屬性不能唯一地區分一個元素，我們還可以使用邏輯運算子串連多個屬性來尋找元素。如同時使用id和class來唯一標識百度輸入框，通過邏輯運算子“and”來串連兩個條件。如下：
find_element_by_xpath("//input[@id=‘kw‘ and @class=‘s_ipt‘]/span/input")
當然可以用“and”串連更多的屬性來唯一地標識一個元素。
8、CSS定位
CSS（Cascading Style Sheets）是一種語言，它作來描述HTML和XML文檔的表現。CSS使用選取器來為頁面元素繫結屬性。CSS可以較為靈活地選擇控制項的任意屬性，一般情況下定位速度比XPath快，但也比較難。下面就簡單介紹下CSS的文法和使用。
css選取器的覺文法如下表：
| 選取器 | 例子 | 描述 |
| .class | .inrto | class選取器，選擇class="intro"的所有元素 |
| #id | #firstname | id選取器，選擇id="firstname"的所有元素 |
| * | * | 選擇所有過元素 |
| element | p | 元素所有<p>元素 |
| element>element | div>input | 選擇父元素為<div>的所有元素之後的所有<input>元素 |
| element+element | div+input | 選擇同一級中緊接在<div>元素之後的所有<input>元素 |
| [attribute=value] | [target=_blank] | 選擇target="_black"的所有元素 |
同樣以百度輸入框和搜尋按鈕為例介紹CSS定位的用法
1）通過class屬性定位：
find_element_by_css_selector(".s_ipt")
find_elemetn_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語言中，用標籤名定位元素不需要任何符號標識，直接使用標籤名即可。可以通過下面幾種方式定位：
（1）通過父子關係定位：
find_element_by_css_selector("span>input")
表示有父親元素，它的標籤名為span，尋找它的所有標籤名叫input的子項目。
（2）通過屬性定位：
find_element_by_css_selector("[value=‘‘]")
find_element_by_css_selector("[name=‘wd‘]")
find_element_by_css_selector("[type=‘submit‘]")
在CSS當中也可使用元素的任意屬性，只要這些屬性可以唯一標識這個元素。對於屬性值可加引號，也可以不加，但注意和整個字串的引號進行區分。
（3）組合定位：
可以把上面的定位策略組合起來使用，可大大增強定位元素的唯一性。
find_element_by_css_selector("span.s_ipt_wr>input.s_ipt")
find_element_by_css_selector("span.s_btn_wr>input#su")
有一個父元素，它的標籤名叫span；它有一個class屬性值叫s_ipt_wr；它有一個子項目，標籤名叫input，並且這個子項目的class的屬性值叫s_ipt。要找的就是具有這麼多特徵的一個子項目。
9、用By定位元素
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=‘s_btn‘]")
find_element(By.CSS_SELECTOR,"span.s_btn_wr>input#su")
find_element()方法只用於定位元素。它需要兩個參數，第一個參數是定位的類型，由By提供；第二個參數是定位的具體方式。
在使用By之前需要交By類匯入。
from selenium.webdriver.common.by import By
一般WebDriver更推薦前面介紹的寫法。
對於Web自動化來說，學會元素的定位相當於已學會了一半，剩下的就是WebDriver中所提供的各種方法使用。所以多多練習元素定位方法吧，為後面打基礎。
WebDriver定位元素方法
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
