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

時間 2019-11-17

標籤 selenium 系列教程使用開發者工具進行元素定位欄目職業生涯简体版

原文原文鏈接

系列資源：html

主要內容

經過id屬性定位元素
經過name屬性查找
經過class屬性查找
經過xpath查找元素

經過id屬性定位元素

id在html中規定了元素的惟一屬性。若是元素有id屬性的話，推薦使用id屬性來定位元素。以百度搜索爲例，以下圖：node

經過元素定位器找到輸入框的元素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 在整個頁面中值爲惟一。因此咱們代碼能夠這樣：web

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 而且這個值是惟一的。因此咱們能夠這樣寫代碼：chrome

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 以下圖：

對應代碼：

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種元素定位方法，會在下一篇文章中介紹。bash

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

獲取更多資訊，能夠關注公衆號,也能夠加QQ羣：707467292 進行node.js自動化相關技術交流。 post