自動化測試：盤點Selenium頁面元素定位的8種方法

發(fā)布時間：2020-08-10 02:34:31 來源：ITPUB博客閱讀：221 作者：博為峰網(wǎng)校欄目：網(wǎng)絡管理

前段時間因項目需要，學習Selenium進行自動測試。現(xiàn)在總結整理下Selenium中元素定位的方法，希望可以幫助一些有疑問的朋友。

自動化測試步驟 :

定位元素→操作元素→驗證操作結果→記錄測試結果

在自動化測試過程中，測試程序通常的操作頁面元素步驟找到Web的頁面元素，并賦予到一個存儲對象中 (WebElement)對存儲頁面元素的對象進行操作，例如：點擊鏈接，在輸入框中輸入字符等，驗證頁面上的元素是否符合預期。

通過這三個步驟，我們可以完成一個頁面元素的操作，找到頁面元素是很重要的一個步驟。找不到頁面元素，后面就沒法做了，Web頁面技術的現(xiàn)實復雜性，造成大量的頁面元素很難定位。經(jīng)常有人不知道怎么定位。

定位方法大全

使用WebDriver對象的findElement函數(shù)定義一個Web頁面元素

使用findElements函數(shù)可以定位頁面的多個元素

定位的頁面元素需要使用WebElement對象來存儲，以便后續(xù)使用

常用的定位頁面元素方法如下，

定位方法 Java語言實現(xiàn)實例

id 定位 driver.findElement(By.id(“id的值”))；

name定位 driver.findElement(By.name(“name的值”))；

鏈接的全部文字定位 driver.findElement(By.linkText(“鏈接的全部文字”))；

鏈接的部分文字定位 driver.findElement(By.partialLinkText(“鏈接的部分文字”))；

css 方式定位 driver.findElement(By.cssSelector(“css表達式”))；

xpath 方式定位 driver.findElement(By.xpath(“xpath表達式”))；

Class 名稱定位 driver.findElement(By.className(“class屬性”))；

TagName 標簽名稱定位 driver.findElement(By.tagName(“標簽名稱”))；

Jquery方式 Js.executeScript(“return jQuery.find(“jquery表達式”)”)

如何定位？

在使用selenium webdriver進行元素定位時,通常使用findElement或findElements方法結合By類返回元素句柄來定位元素

findElement() 方法返回一個元素, 如果沒有找到,會拋出一個異 NoElementFindException()

findElements()方法返回多個元素, 如果沒有找到,會返回空數(shù)組, 不會拋出異常

如何選擇定位方法？

策略是，選擇簡單，穩(wěn)定的定位方法。

當頁面元素有 id屬性的時候，盡量使用 id來定位。沒有的話，再選擇其他定位方法

cssSelector 執(zhí)行速度快，推薦使用。

定位超鏈接的時候，可以考慮 linkText或 partialLinkText：但是要注意的是，文本經(jīng)常發(fā)生改變，所以不推薦用。

xpath 功能最強悍。當時執(zhí)行速度慢，因為需要查找整個DOM, 所以盡量少用。實在沒有辦法的時候，才使用 xpath。

這里，初學者可以根據(jù)下面的實例來一一了解如何進行元素的定位。

環(huán)境準備

首先創(chuàng)建一個hello.html頁面，用于下面的演示

<!DOCTYPE html>

<html>

<body>

<a href="https://www.kancloud.cn/@guanfuchang" target="_blank">我的看云首頁</a>

<br/>

用戶名:<input name="username" class="ptqa user_name" placeholder="用戶名" value="Milton" required/>

密碼:<input type="text" name="password" class="ptqa pwd" placeholder="密碼" value="ptqa" required/>

地區(qū):

</select>

<br>

<br>

</div>

</body>

</html>

在同個目錄下創(chuàng)建一個find_location.py文件，初始化工作

from selenium import webdriver

import os

# 創(chuàng)建Chrome驅(qū)動實例

driver = webdriver.Chrome()

# 啟動瀏覽器并且導航到指定URL

# 這里為了覆蓋更多的元素定位，我自己編寫了一個本地的hello.html文件。

file_path = 'file:///' + os.path.abspath('hello.html')

driver.get(file_path)

元素定位

通過class定位

find_element_by_class_name(self, name):

find_elements_by_class_name(self, name):

# 定位class名稱為“head_title"的元素

head_title = driver.find_element_by_class_name("head_title")

print(head_title.text)

通過id定位

find_element_by_id(self, id_):

find_elements_by_id(self, id_):

# 定位id為“world”的元素

world = driver.find_element_by_id("world")

print(world.text)

通過name屬性定位

find_element_by_name(self, name):

find_elements_by_name(self, name):

# 定位name為“username”的元素

username = driver.find_element_by_name("username")

print(username.get_attribute("value"))

通過標簽名定位

find_element_by_tag_name(self, name):

find_elements_by_tag_name(self, name):

# 定位標簽為<button>的元素

submit_btn = driver.find_element_by_tag_name("button")

print(submit_btn.text)

通過鏈接文本定位

find_element_by_link_text(self, link_text):

find_element_by_partial_link_text(self, link_text):

# 定位鏈接文本完全匹配“我的看云首頁”的元素

kancloud = driver.find_element_by_link_text("我的看云首頁")

print(kancloud.get_attribute("href"))

# 定位鏈接文本部分匹配“看云首頁”的元素

kancloud = driver.find_element_by_partial_link_text("看云首頁")

print(kancloud.get_attribute("href"))

通過xpath定位

find_element_by_xpath(self, xpath):

find_elements_by_xpath(self, xpath):

# xpath定位，相對路徑定位用戶名輸入框

username = driver.find_element_by_xpath("//body/div/input")

print(username.get_attribute("value"))

# xpath定位，相對路徑與屬性結合定位密碼輸入框

password = driver.find_element_by_xpath("//input[@name='password']")

print(password.get_attribute("value"))

# xpath定位，多個屬性結合定位密碼輸入框

password = driver.find_element_by_xpath("//input[@name='password'][@type='text']")

print(password.get_attribute("value"))

通過css選擇器定位

find_element_by_css_selector(self, css_selector):

find_elements_by_css_selector(self, css_selector):

自動化測試：盤點Selenium頁面元素定位的8種方法

# css選擇器，標簽+屬性定位用戶名輸入框

username = driver.find_element_by_css_selector("input[name='username']")

print(username.get_attribute("value"))

# css選擇器，標簽+class類名定位用戶名輸入框

username = driver.find_element_by_css_selector("input.user_name")

print(username.get_attribute("value"))

# css選擇器，標簽+多個class類名，定位密碼輸入框，注意不要空格，空格代表下一級子元素

password = driver.find_element_by_css_selector("input.ptqa.pwd")

print(password.get_attribute("value"))

# css選擇器，id+多個class類名，定位密碼輸入框

password = driver.find_element_by_css_selector("#login_form .ptqa.pwd")

print(password.get_attribute("value"))

# css選擇器，多級class類名，定位密碼輸入框

password = driver.find_element_by_css_selector(".login .ptqa.pwd")

print(password.get_attribute("value"))

# css選擇器，class類名+屬性，定位密碼輸入框

password = driver.find_element_by_css_selector(".login .ptqa[name='password']")

print(password.get_attribute("value"))

#css 選擇器，根據(jù)父子關系，定位密碼輸入框

password = driver.find_element_by_css_selector("div[id='login_form']>input[name='password']")

print(password.get_attribute("value"))

# css 選擇器，根據(jù)兄弟關系，定位密碼輸入框

password = driver.find_element_by_css_selector("input[name='username']+input")

print(password.get_attribute("value"))

上面的定位元素方法，都列出了兩個，其中一個是 find_elements_by_xxx,這個方法用在獲取結果有多個元素的情況，例如下面獲取下拉列表選項

# 用find_element_by_css_selector 獲取的是單個元素

mm = driver.find_element_by_class_name("city").find_element_by_css_selector("option[value='mm']")

print(mm.text)

print("-"*20)

# 用find_elements_by_css_selector獲取的是元素組列表

cities = driver.find_elements_by_css_selector(".city option")

print(type(cities))

for city in cities:

print(city.text)

運行結果為：

茂名

--------------------

廣州

佛山

茂名

襄樊

通用的終極定位語法

上面的所有元素定位 find_element_by_xxx和find_elements_by_xxx調(diào)用的結果，實際上都是在調(diào)用以下兩種方法，我們也可以直接調(diào)用一下兩種方法即可。

find_element(self, by=By.ID, value=None):

find_elements(self, by=By.ID, value=None):

class By(object):

"""

Set of supported locator strategies.

"""

ID = "id"

XPATH = "xpath"

LINK_TEXT = "link text"

PARTIAL_LINK_TEXT = "partial link text"

NAME = "name"

TAG_NAME = "tag name"

CLASS_NAME = "class name"

CSS_SELECTOR = "css selector"

例如：

from selenium.webdriver.common.by import By

# 根據(jù)id,定位id為“world”的元素

world = driver.find_element(By.ID,"world")

print(world.text)

# xpath定位，相對路徑與屬性結合定位密碼輸入框

password = driver.find_element(By.XPATH,"//input[@name='password']")

print(password.get_attribute("value"))

# css選擇器，標簽+屬性定位用戶名輸入框

username = driver.find_element(By.CSS_SELECTOR,"input[name='username']")

print(username.get_attribute("value"))

定位總結

我最喜歡的定位方式，優(yōu)先是id，如果沒有id找class，如果class不好定位，找css選擇器。我覺得css選擇器是最靈活也是最強大的定位方式。使用xpath定位切記不要用絕對路徑，最好結合相對路徑與屬性。

關注51Testing軟件測試網(wǎng)，提升it技能，從不會到熟練只差一步。

向AI問一下細節(jié)

自動化測試：盤點Selenium頁面元素定位的8種方法

猜你喜歡

最新資訊

相關推薦

相關標簽