path chrome ring .net 核心 簡單 tail 查看 data-

【selenium學習筆記】webdriver進行頁面元素定位

進行Web頁面自動化測試，對頁面上的元素進行定位和操作是核心。而操作又是以定位為前提的，因此，對頁面元素的定位是進行自動化測試的基礎。

頁面上的元素就像人一樣，有各種屬性，比如元素名字，元素id，元素屬性（class屬性，name屬性）等等。webdriver就是利用元素的這些屬性來進行定位的。

可以用於定位的常用的元素屬性：

• id
• name
• class name
• tag name
• link text
• partial link text
• xpath
• css selector

對應於webdriver中的定位方法分別是：

• driver.find_element_by_name()——最常用，簡單
• driver.find_element_by_id()——最常用，簡單
• driver.find_element_by_class_name()
• driver.find_element_by_tag_name()——最不靠譜
• driver.find_element_by_link_text()——定位文字連接好用
• driver.find_element_by_partial_link_text()——定位文字連接好用
• driver.find_element_by_xpath()——最靈活，萬能
• driver.find_element_by_css_selector()

上面是定位一個元素的方法，相應的webdriver也有定位一組元素的方法：

• driver.find_elements_by_name()
• driver.find_elements_by_id()
• driver.find_elements_by_class_name()
• driver.find_elements_by_tag_name()
• driver.find_elements_by_link_text()
• driver.find_elements_by_partial_link_text()
• driver.find_elements_by_xpath()
• driver.find_elements_by_css_selector()

那麽問題來了？怎麽查看元素的name，id，class，tag，text，xpath，css選擇器呢？可以借助firefox瀏覽器的firebug插件（需要手動安裝）中firepath工具或者chrome的開發者工具（chrome自帶）。

• Friebug

打開firefox 瀏覽器的firebug 插件，點擊插件左上角的鼠標箭頭，再點擊頁面上的元素，firebug插件的HTML 標簽頁將看到頁面代碼，鼠標移動到元素的標簽上點擊一下。例如我們點擊百度首頁的“百度一下”按鈕： 從FirePath中可以看到該元素的id，tag，class等屬性。

• Chrome開發者工具（F12）

打開Chrome瀏覽器，按下鍵盤的F12，即可以打開開發者工具。從開發者工具中可以得到和FirePath相同的結果： 那麽問題又來了，這麽多屬性都可以用來定位，那麽我們選擇哪種呢？其實，定位元素的方法沒有好壞之分，不同的場景有不同的適用方法，只要定位的唯一的一個元素的方法都是可以使用的。

• id 和name 定位

這是簡單的高效的方法。 比如定位百度首頁文本框的方法，我們可以使用id來定位（該元素提供的id屬性，可以唯一定位到它）： [python] view plain copy

1. driver.find_element_by_id(‘kw‘)

定位百度首頁右上角的“設置”鏈接，我們可以使用name來定位（該元素提供的name屬性，可以唯一定位到它）： [python] view plain copy

1. driver.find_element_by_name(‘tj_trnews‘)

• class name和tag name定位

不是所有的前端開發人員都喜歡為每一個元素添加id 和name 兩個屬性，但除此之外你一定發現了一個元素不單單只有id 和name，它還有class 屬性；而且每個元素都會有tag標簽。 還是定位百度首頁的文本框，除了用id方法定位之外，我們還可以用class name來定位（該元素提供的class屬性，也可以唯一定位到它）。 [python] view plain copy

1. driver.find_element_by_class_name("s_ipt")

tag name 定位應該是所有定位方式中最不靠譜的一種了，因為在一個頁面中具有相同tag name 的元素極其容易出現，很少具有唯一性。不用學習它了。

• link text 與partial link text 定位

有時候需要操作的元素是一個文字鏈接，那麽我們可以通過link text 或partial link text 進行元素定位。 比如，定位百度首頁右上角的“新聞”，“hao123”，。。。。等等這些文字連接。就可以使用link text和partail link text定位方式。可以先使用FireBug看下網頁源碼： 通過linx text定位： [python] view plain copy

1. find_element_by_link_text("新聞")
2. find_element_by_link_text("貼吧")

通過partail link text定位： [python] view plain copy

1. find_element_by_link_text("新")
2. find_element_by_link_text("貼")

• XPath 定位

XPath是一種文檔定位語言。因為HTML可以看做是XML的一種實現，所以selenium用戶可使用這種強大的語言在web應用中定位。 絕對路徑方法： 從根元素寫起，當元素層級很深的時候，路徑寫的會很長，閱讀性不好，也很難維護。不建議使絕對路徑這樣的方法。 相對路徑方法： 通過Firebug很容易得到相對路徑的xpath，打開Firebug插件，在頁面上的搜索文本框，就可以顯示出xpath了： [python] view plain copy

1. <pre name="code" class="python">driver.find_element_by_xpath("//*[@id=‘kw‘]").click()

上面的寫法可以理解為，通過xpath尋找，任意（*代表）id屬性為’kw‘的元素。當然我們也可以把*替換成input，即： [python] view plain copy

1. driver.find_element_by_xpath("//input[@id=‘kw‘]").click()

這種寫法可以理解為，通過xpath尋找，任意id屬性為’kw‘的input元素。
有的時候，需要根據上級目錄的屬性來定位當前元素： [python] view plain copy

1. find_element_by_xpath("//span[@id=’input-container’]/input") #通過上一級目錄的id 屬性定位
2. find_element_by_xpath("//div[@id=’hd’]/form/span/input") #通過上三級目錄的id 屬性定位
3. find_element_by_xpath("//div[@name=’q’]/form/span/input")#通過上三級目錄的name 屬性定位

• CSS定位

這種定位方法是比較難理解的。TBD，當前工作中也沒有遇到，必須使用這種方式才能定位到元素的情況。

• 關於自動化的定位問題

自動化測試的元素定位一直是困擾自動化測試新手的一個障礙，因為我們在自動化實施過程中會碰到各式各樣的對象元素。雖然XPath 和CSS 可以定位到復雜且比較難定位的元素，但相比較用id 和name 來說增加了維護成本和學習成本，相比較來說id/name 的定位方式更直觀和可維護，有新的成員加入的自動化時也增加了人員的學習成本。所以，測試人員在實施自動化測試時一定要做好溝通，規範前端開發人員對元素添加id/name 屬性，或者自己有修改HTML 代碼的權限。

【selenium學習筆記】webdriver進行頁面元素定位