Selenium系列教程-03使用開發者工具進行元素定位

趙陽陽發表於2018-05-30

系列資源：

主要內容

  • 通過id屬性定位元素
  • 通過name屬性查詢
  • 通過class屬性查詢
  • 通過xpath查詢元素

通過id屬性定位元素

id在html中規定了元素的唯一屬性。如果元素有id屬性的話，推薦使用id屬性來定位元素。以百度搜尋為例，如下圖：

Selenium系列教程-03使用開發者工具進行元素定位
通過元素定位器找到輸入框的元素id為 kw ，所以在selenium程式碼中，我們就可以寫程式碼：

require('chromedriver')

const { Builder } = require('selenium-webdriver')

let driver = new Builder().forBrowser('chrome').build()

driver.get('http://www.baidu.com')

//使用id屬性值定位元素
driver.findElement({id:'kw'}).sendKeys('CukeTest')
複製程式碼

通過name屬性定位元素

html中我們可以為元素新增name屬性，使用name屬性時，我們要確保這個元素在整個頁面中name屬性值唯一。例如，在百度首頁中，輸入框name屬性為 wd ，並且 wd 在整個頁面中值為唯一。所以我們程式碼可以這樣：

require('chromedriver')

const { Builder } = require('selenium-webdriver')

let driver = new Builder().forBrowser('chrome').build()

driver.get('http://www.baidu.com')

//使用name屬性值來定位元素
driver.findElement({name:'wd'}).sendKeys('CukeTest')
複製程式碼

通過class屬性定位元素

html 中我們通為元素提供class屬性來規定元素的CSS類名。大多數情況下，我們使用class來定義網頁元素的顯示樣式。如果一個頁面中有多個元素使用同一個class，用class屬性來定位元素時會找到第一個。為減少出錯可能，請保證class名在當前頁面中被唯一的地方使用。以百度首頁為例，輸入框的class屬性值為s_ipt 並且這個值是唯一的。所以我們可以這樣寫程式碼：

require('chromedriver')

const { Builder } = require('selenium-webdriver')

let driver = new Builder().forBrowser('chrome').build()

driver.get('http://www.baidu.com')

//使用class屬性值定位元素
driver.findElement({className:'s_ipt'}).sendKeys('CukeTest') 
複製程式碼

通過XPath定位元素

XPath 是一門在 XML 文件中查詢資訊的語言。它在 XML 文件中通過元素和屬性進行導航。我們也可以用XPath來定位html的頁面元素。關於XPath的具體語法學習，大家可以參考http://www.w3school.com.cn/xpath/xpath_intro.asp學習，這裡給大家介紹一種通過Chrome開發者工具自動生成XPath的方式。

  • 1.開啟百度首頁，使用Chrome開發者工具定位到輸入框
  • 2.在元素上右鍵--Copy--Copy XPath 如下圖：

Selenium系列教程-03使用開發者工具進行元素定位
對應程式碼：

require('chromedriver')

const { Builder } = require('selenium-webdriver')

let driver = new Builder().forBrowser('chrome').build()

driver.get('http://www.baidu.com')

// 使用xpath路徑選擇器查詢元素
driver.findElement({xpath:'//*[@id="kw"]'}).sendKeys('CukeTest')
複製程式碼

以上為我們常用的4種定位元素的方法，還有另外4種元素定位方法，會在下一篇文章中介紹。

此為Web UI自動化測試系列文章三， 關注本系列分享，熟練掌握Web UI自動化測試。

獲取更多資訊，可以關注公眾號,也可以加QQ群：707467292 進行node.js自動化相關技術交流。

Selenium系列教程-03使用開發者工具進行元素定位

相關文章