Python3+Selenium2完整的自動化測試實現之旅（三）：Selenium-webdriver提供的元素定位方法

    本篇以實例介紹selenium下的webdriver模塊提供的定位頁面元素（也能夠稱爲對象）的方法和使用技巧，在此注意：在作WEB自動化測試前，須要對前端相關的技術有所瞭解，如HTML、XML、Xpath、CSS、JS等，另外還須要學習Pyhton基礎語法和編程規範，好比python代碼塊的縮進。

1     前端技術名詞解釋

（1）    HTML：超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用於建立網頁的標準標記語言。能夠理解爲千姿百態的網頁最原始的形態。

（2）    XML：擴展標記語言，設計用來傳輸和存儲數據。HTML能夠當作是XML的一種呈現。

（3）    Xpath：一種在XML文檔中查找信息的語言，一般爲路徑表達式。

（4）    CSS：層疊樣式表。

（5）    JS：即JavaScript，web編程語言，現代軟件網頁JS腳本都會嵌入到HTML的標籤中。

這些前端技術和語言，咱們無須深刻學習，只須要知道這些前端技術的特色和做用以及基本的語法特色便可，能夠學習參考菜鳥教程：

https://www.runoob.com/

2     Selenium-webdriver定位元素

下面以博客園註冊頁面爲例，以下圖：

 

你們都知道頁面上有輸入框、文本信息、按鈕等，這些是什麼？這些都是一個個元素，在軟件中均可以看作是一個個對象。怎麼經過自動化來識別並定位到這些元素或者對象呢？

Selenium-webdriver模塊庫提供了8種定位元素的方法：

（1）    find_element_by_id （）

（2）    find_element_by_name（）

（3）    find_element_by_class_name（）

（4）    find_element_by_tag_name（）

（5）    find_element_by_link_text（）

（6）    find_element_by_partial_link_text（）

（7）    find_element_by_xpath（）

（8）    find_element_by_css_selector（）

 接下來咱們就要將鼠標移動到郵箱的輸入框準備輸入用戶了，但是自動化工具沒你聰明啊！它不知道這個輸入框在哪啊，這個時候咱們來看下網頁的真實面目,經過按F12或者右鍵選擇【查看源】來看看網頁原始的面貌，以下圖：

 沒錯它就是網頁最原始的HTML形態，咱們能夠看到頁面上的每個元素都是一行HTML代碼。

上圖定位的就是郵箱輸入框所在的HTML代碼行，HTML代碼都是以標籤對的形式存在，咱們能夠看到輸入框是一個input的標籤，嘿嘿，咱們看到了id，沒錯，這個標籤中描述的就是【郵箱】這個輸入框的屬性，有name、class、id等屬性，就好像一我的同樣，有名稱、性別、體重等屬性同樣。有了這些咱們就可使用webdriver提供的方法來找到它。

一．        經過id定位

webdriver提供的方法爲find_element_by_id()

咱們在Pycharm中新建一個register_page.py文件，經過id的方法定位到【郵箱】輸入框這個元素並輸入郵箱，而後退出瀏覽器，腳本以下：

二． 經過name定位
上面的【郵箱】輸入框的元素HTML中也提供了name的屬性了，這樣咱們只須要把上面的腳本文件的email = driver.find_element_by_id(‘Email’)改成對應的name屬性方法便可：
email = driver.find_element_by_name(‘Email’)，若是HTML沒有提供該元素的name屬性，那咱們就無法使用name來定位它

三．        經過class定位

Class也是網頁不少元素都有的一個屬性，它的定位和id/name相似，註冊頁面的【註冊】按鈕，查看HTML可知其class屬性值，以下圖：

所以咱們定位該按鈕元素是可使用：driver.find_element_by_class_name（'btn ladda-button center-block cnblogs-btn-blue'）來定位到該元素。

但該方法不建議常用，由於頁面不少元素都會有class屬性，若是網頁複雜，經過class定位不免會出現class屬性值同樣的元素，那就沒法徹底定位到該元素，仍是註冊頁面：咱們看看【密碼】和【確認密碼】兩個元素屬性，以下面HTML中這兩個元素的class屬性：

沒錯，它們的class屬性徹底同樣，這樣，在定位這兩個元素時是不能用class屬性來定位的

四．        經過tag定位

tag 定位是取的該元素的HTML中描述該元素的標籤的名稱，如上面的【郵箱】輸入框，它的tag標籤就是一個input，咱們能夠寫爲email=driver.find_element_by_tag_name(‘input’)，可想而知一個網頁通常會有不少input標籤，此方法也是不建議單獨使用，該方法只是針對很是簡單的頁面纔有那麼點用

五．        經過link定位

link_text()方法是經過元素標籤對間的的文本信息定位，如上面的【註冊】按鈕咱們除了使用class、id等定位外，還可使用link定位：

這樣咱們定位【註冊】這個元素還能夠寫成：driver.find_element_by_link_text(‘註冊’)

六．        經過partial_link定位

Partial_link其實只是對link方法的一種補充，也就是部分標籤對文本信息定位。適用於標籤對之間文本信息比較長的狀況，咱們只需選取一部分文本就行。

咱們能夠將上面定位的【註冊】元素那行代碼改成：
driver.find_element_by_partial_link(「注」)也是能夠定位的

七．        經過Xpath定位

Xpath是一種在XML文檔中查找信息的語言，通常爲一段路徑表達式，在學習Xpath定位前請務必先學習下XML、HTML以及Xpath的基本語法，這個方法也是最重要的準肯定位元素的方法，這樣會對之後頁面元素定位更加遊刃有餘。

學習能夠參考W3SChool網站：

http://www.w3school.com.cn/index.html

Selenium-webdriver提供了find_element_by_xpath（）的方法

（1）     經過絕對路徑定位

因爲HTML網頁源代碼也是一層一層的，經過Xpath絕對路徑查找，就如找一我的同樣，這我的必定存在某個惟一的空間地理位置，好比xx 省xx 市xx 區xx 路xx 號，一樣咱們要找的這個輸入框也是在HTML的一個位置，上圖能夠看到HTML是有不少層級的，這樣咱們能夠一層一層像剝筍同樣找到它，以下爲【郵箱】這個元素在HTML的層級位置

那麼咱們的腳本定位【郵箱】輸入框能夠寫成這樣：

 這就是Xpath方法絕對路徑寫法，使用絕對路徑你是徹底能夠找到該元素的，只不過，你懂得，現代的網頁多複雜多絢麗，可想而知HTML層級會不少，難道你還傻不拉幾的從源頭的html標籤對開始寫起嗎？接下來，咱們使用xpath的相對路徑寫法來照樣找到這個【郵箱】輸入框的位置

 

（2）     經過相對路徑定位

在使用相對路徑定位前，須要去學習下HTML代碼的相關知識和特色以及Xpath路徑表達式的語法編寫特色，多學點老是好的。

 下面使用相對路徑來定位它,以下代碼：

【郵箱】輸入框的xpath表達式爲//*[@id=’Email’]

這個表達式什麼意思？雙斜槓//表示從當前HTML文檔中查找而不考慮它的位置，*匹配整個HTML，@表示獲取元素屬性，最後id=表示該元素的屬性id值，這樣咱們合理的使用Xpath的相對路徑語法來定位元素將會起到事半功倍的效果。

後續的Xpath相關的步語法、軸語法以及相關的函數功能方法得學習靈活使用哦。

若是有使用Chrome瀏覽器的，還能夠copy相關的Xpath路徑哦，打開Chrome，按F12，以下圖：

 

八．        經過CSS定位

此種方法其實和xpath相似，看我的習慣和愛好，也是須要咱們學習css的語法，這裏不介紹。selenium-webdriver提供的方法爲：find_element_by_css_selector()

總結：這樣咱們瞭解selenium-webdriver模塊提供的元素定位方法，這裏LZ首推的方法：Xpath定位，而後再是id、name、link等定位，這些方法須要不斷地學習和實踐方纔能運用的遊刃有餘，若是寫多了元素定位的方法就知道Xpath必定是要掌握的，另外這些定位方法也能夠結合起來共同定位給一個元素，目的就是要在一個網頁中惟必定位到該元素。

下篇：介紹selenium-webdriver處理瀏覽器cookie、網頁提示框處理、多窗口切換、鼠標鍵盤控制等方法