1. 程式人生 > >Selenium系列(一) - 8種元素定位方式的詳細解讀

Selenium系列(一) - 8種元素定位方式的詳細解讀

安裝Selenium和下載Driver

安裝selenium

pip3 install  selenium -i http://pypi.douban.com/simple --trusted-host pypi.douban.com

 

下載Driver

開啟:http://npm.taobao.org/mirrors/chromedriver/

找到自己Chrome對應的版本下載即可

 

訪問百度的小Demo

#!/usr/bin/env python
# -*- coding: utf-8 -*-

"""
__title__  = 
__Time__   = 2020/3/25 17:00
__Author__ = 小菠蘿測試筆記
__Blog__   = https://www.cnblogs.com/poloyy/
"""
import time

from selenium import webdriver

# 載入瀏覽器驅動
driver = webdriver.Chrome("../resources/chromedriver.exe")

# 訪問網址
driver.get("http://www.baidu.com")

# 找到搜尋框
inputElement = driver.find_element_by_id("kw")

# 輸入搜尋內容
inputElement.send_keys("小菠蘿測試筆記")

# 找到搜尋按鈕
searchElement = driver.find_element_by_id("su")

# 點選搜尋按鈕
searchElement.click()

time.sleep(5)

# 釋放資源, 退出瀏覽器
driver.quit()

可以看到,流水賬式寫Web自動化測試程式碼的順序就是:

載入驅動 - 訪問連結 - 頁面操作

 

首先,先將一個測試html儲存到本地,後續案例就按照這個頁面來演示啦!

程式碼如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小菠蘿測試筆記</title>
</head>
<body>

<a>使用者名稱:</a>
<input id="username" class="username">
<a>密碼</a>
<input id="password" name="password">
<button class="login">登入</button>
<br>
<p>測試啦</p>
<p>再一次測試啦</p>
<br>
<a href="https://voice.baidu.com/act/newpneumonia/newpneumonia/?from=osari_pc_1" target="_blank" id="virus-202s0"
   class="mnav sp dot">終極抗擊肺炎啊</a>
<a href="https://voice.baidu.com/act/newpneumonia/newpneumonia/?from=osari_pc_1" target="_blank" id="virus-2020"
   class="mnav sp dot">抗擊肺炎</a>
<a href="https://voice.baidu.com/act/newpneumonia/newpneumonia/?from=osari_pc_1" target="_blank" id="virus-202s0"
   class="mnav sp dot">抗擊肺炎</a>

<div>
    <ul>
        <li class="li">111</li>
        <li class="li">222</li>
        <li class="li">333</li>
    </ul>
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ul>
</div>
</body>
</html>

 

辣麼,我們接下來就說下有哪些元素定位的方式呢

 

方式一:通過元素的id

# 找到id = username的元素
username = driver.find_element_by_id("username")
# 輸入值 張三
username.send_keys("張三")
# 找到od = password的元素
password = driver.find_element_by_id("password")
# 輸入值 123
password.send_keys("123")

知識點

在前端,一般一個id值是唯一的,只屬於一個元素

 

方式二:通過元素的class

# =====通過 元素Class查詢(僅返回匹配到的第一個)
login_btn = driver.find_element_by_class_name("login")

# 點選
login_btn.click() 

知識點

  • 在前端,一般多個元素共用一個class
  • 但 find_element_by_class_name 只返回第一個匹配到class的元素
  • 壞處:當找不到元素則報錯
  • 如果想返回所有匹配到class的元素,可看下面程式碼
# =====找到所有class=li的元素
lis = driver.find_elements_by_class_name("li")
for i in lis:
    print(i.text)

執行結果

111
222
333

知識點

  • 返回的是一個元素列表,若只匹配到一個也是列表
  • 好處:當沒有找到元素時不會報錯,而是返回空列表 [] 

 

方式三:通過元素的name

# =====通過 元素name查詢元素(僅返回匹配到的第一個)
password = driver.find_element_by_name("password")

# =====輸入值 123
password.send_keys("123")

知識點

  • 和class一樣,也有可能有多個元素共用一個name
  • 但  find_element_by_name  只返回第一個匹配到name的元素
  • 想返回多個的話,和class一樣,需要呼叫 find_elements_by_name 方法,這裡不再贅述,寫法和上面一致(已標紅)

 

方式四:通過元素標籤

# =====通過 元素標籤(僅返回匹配到的第一個)=====
p = driver.find_element_by_tag_name("p")
# 列印元素的文字值
print(p.text)

print("===")
# =====通過 元素標籤(返回匹配到的所有元素)=====
ps = driver.find_elements_by_tag_name("p")
for p in ps:
    print(p.text)

執行結果

測試啦
=== 測試啦 再一次測試啦

知識點

  • 多個元素同種HTML標籤見怪不怪了
  • 同樣的, find_element_by_tag_name 返回第一個匹配到標籤的元素
  •  find_elements_by_tag_name 可以返回所有匹配到標籤的元素

 

方式五:通過超連結文字

# =====通過 超連結的文字查詢元素(僅支援精確匹配)
atext = driver.find_element_by_link_text("抗擊肺炎")
print(atext.text)

print("===")
ass = driver.find_elements_by_link_text("抗擊肺炎")
for i in ass:
    print(i.text)

執行結果

抗擊肺炎
=== 抗擊肺炎 抗擊肺炎

知識點

  • find_element_by_link_text 是精確匹配,需要文字完全相同才能匹配
  • 若需要返回全部匹配到的元素,也需要用 find_elements_by_link_text  

 

方式六:通過超連結文字(模糊匹配)

# =====通過 超連結的文字查詢元素(支援模糊匹配)
atext = driver.find_element_by_partial_link_text("肺炎")
print(atext.text)

print("===")
ass = driver.find_elements_by_partial_link_text("肺炎")
for i in ass:
    print(i.text)

執行結果

終極抗擊肺炎啊
===
終極抗擊肺炎啊
抗擊肺炎
抗擊肺炎

知識點

  • find_element_by_partial_link_text 支援模糊匹配,包含文字則匹配成功
  • 若需要返回全部匹配到的元素,也需要用  find_elements_by_partial_link_text

 

方式七:通過xpath(萬能,重點)

# ====通過 xpath
lis = driver.find_element_by_xpath("/html/body/div/ul[2]/li[1]")
print(lis.text)

執行結果

aaa

注意: xpath 包含的知識點很多,暫時不在這篇幅展開講,後續會單獨補充詳細博文哦!

 

方式八:通過css選擇器(萬能,重點)

# ====通過css選擇器
lis = driver.find_element_by_css_selector("body > div > ul > li:nth-child(2)")
print(lis.text)

執行結果

222

注意: css選擇器 包含的知識點很多,暫時不在這篇幅展開講,後續會單獨補充詳細博文