Selenium系列教程- 04常用的元素定位方法

趙陽陽發表於2018-05-30

系列資源：

主要內容

  • 通過css查詢元素
  • 通過link_text查詢元素
  • 通過partialLinkText查詢元素
  • 通過tagName查詢元素

通過css屬性查詢元素

CSS (Cascading Style Sheets) 用於渲染HTML元素標籤的樣式。在定位web元素的時候我們可以使用css selector來定位元素。關於css的具體教程，可以參考http://www.w3school.com.cn/cssref/css_selectors.asp。這裡給大家介紹一種使用CSS快速定位的方法： 開啟Chrome開發者工具，定位到百度輸入框。 在元素上右鍵--Copy--Copy XPath,如下圖：

對應程式碼：

require('chromedriver')

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

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

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

// 使用css路徑選擇器查詢元素

driver.findElement({css:'#kw'}).sendKeys('CukeTest')
複製程式碼

通過link_Text定位元素

selenium-webdriver提供通過匹配超連結文字的方式來定位元素，例如，百度首頁可以跳轉到 新聞 hao123 地圖 等頁面。我們可以通過連結文字值來定位元素位置。

例如，我們要點選 新聞 跳轉到新聞頁面。 程式碼可以如下：

require('chromedriver')

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

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

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

// 使用linkText查詢元素

driver.findElement({linkText:'新聞'}).click()
複製程式碼

通過使用partialLinkText來定位元素

通過linkText的方式我們可以定位有超連結的元素。partialLinkText提供模式匹配，比如我要在百度首頁點選 新聞 超連結，使用LinkText定位的時候，需要全部匹配。而使用partialLinkText方式的時候，只需要匹配其中的一個字元就可以，可以簡單理解為SQL中的模糊查詢。以百度首頁為例，我現在要點選新聞 連結，就可以這樣來寫程式碼：

require('chromedriver')

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

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

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

// 使用partialLinkText查詢元素

driver.findElement({partialLinkText :'聞'}).click()
複製程式碼

通過TagName的方式來定位元素

tagName為html中每個元素標籤名。以下圖為例：

Selenium系列教程- 04常用的元素定位方法

我們看到每個元素都是由特定的標籤組成，但是一般在web設計中每種標籤都可以出現好多次，所以在selenium自動化程式碼中，幾乎不會用到tagName這個方式去定位元素。同時，selenium-webdriver官方API中也不鼓勵大家使用這種方式定位元素。可以參考 API

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

Selenium系列教程- 04常用的元素定位方法

相關文章