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

系列資源：

• Selenium系列教程-01 環境配置
• Selenium系列教程-02 使用Chrome開發者工具
• Selenium系列教程-03 使用開發者工具進行元素定位
• Selenium系列教程-04 經常使用的元素定位方法
• Selenium系列教程-05 findElements 方法詳解
• Selenium系列教程-06 圖片上傳以及Web Element經常使用操做方法
• Selenium系列教程-07 使用Actions類模擬複雜操做
• Selenium系列教程-08 瀏覽器自己行爲控制
• Selenium系列教程-09 如何切換iframe
• Selenium系列教程-10 如何執行JavaScript方法

主要內容

• 經過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中每一個元素標籤名。如下圖爲例：

咱們看到每一個元素都是由特定的標籤組成，可是通常在web設計中每種標籤均可以出現好屢次，因此在selenium自動化代碼中，幾乎不會用到tagName這個方式去定位元素。同時，selenium-webdriver官方API中也不鼓勵你們使用這種方式定位元素。能夠參考 API

---

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