碼上快樂

相關內容    簡體    繁體

『心善淵』Selenium3.0基礎 — 8、使用CSS選擇器定位元素

本文轉載自   查看原文   2021-06-29 16:12   226    測試基礎必會技能 - Selenium測試框架

目錄

1、CSS選擇器介紹

CSS（Cascading Style Sheets）是一種語言，它被用來描述HTML 和XML 文檔的表現。CSS 使用選擇器來為頁面元素綁定CSS屬性。這些選擇器可以被Selenium 用作另外的定位策略。

by_css_selector通過CSS選擇器查找元素，這種元素定位方式跟by_xpath比較類似，Selenium官網的Document里極力推薦使用CSS locator，而不是XPath來定位元素。原因是CSS locator比XPath locator速度快，特別是在IE下，CSS locator比XPath更高效更准確更易編寫，對各種瀏覽器支持也很好。

2、CSS選擇器定位語法

（1）單數定位，獲得一個指定元素對象

driver.find_element_by_css_selector(“css選擇器定位策略”)

（2）復數定位，獲得指定元素結果集列表

driver.find_elements_by_css_selector(“css選擇器定位策略”)

3、Selenium中使用CSS選擇器定位元素

（1）通過屬性定位元素

CSS選擇器可以通過元素的id、class、標簽這三個常規屬性直接定位到目標元素。

頁面中代碼如下：

<input type="telA" name="telA" id="telA" placeholder="電話A" class="telA" value="">

需求：使用CSS選擇器通過id，class和其他屬性，定位頁面中的電話A<input>標簽。

"""
1.學習目標:
    必須掌握selenium中css定位方法
2.語法
    2.1 在selenium中語法
      (1)driver.find_element_by_css_selector("css選擇器定位策略")
      (2)driver.find_elements_by_css_selector("css選擇器定位策略")
    2.2 css表達式寫法
      (1)#表示id屬性
        #id屬性值  例如: #telA
      (2).表示class屬性
        .class屬性值  例如: .telA
      (3)其他屬性
        [屬性名=屬性值] 例如: [name=telA]

3.需求
    在頁面中,使用css定位電話A輸入框
"""
# 1.導入selenium
from selenium import webdriver
from time import sleep
import os

# 2.打開瀏覽器
driver = webdriver.Chrome()

# 3.打開頁面
url = "file:///" + os.path.abspath("./練習頁面/注冊A.html")
driver.get(url)

# 4.定位電話A標簽,使用css selector
# 4.1 通過id定位
telA_1 = driver.find_element_by_css_selector("#telA")
print(telA_1.get_attribute("outerHTML"))
# 4.2 通過class屬性定位
telA_2 = driver.find_element_by_css_selector(".telA")
print(telA_2.get_attribute("outerHTML"))
# 4.3 通過其他屬性定位
telA_3 = driver.find_element_by_css_selector("[name='telA']")
print(telA_3.get_attribute("outerHTML"))

# 5.關閉瀏覽器
sleep(2)
driver.quit()
"""
輸出結果：
<input type="telA" name="telA" id="telA" placeholder="電話A" class="telA" value="">
<input type="telA" name="telA" id="telA" placeholder="電話A" class="telA" value="">
<input type="telA" name="telA" id="telA" placeholder="電話A" class="telA" value="">
"""

（2）通過標簽定位元素

CSS選擇器也可以通過標簽與屬性的組合來定位元素。

在頁面中有如下代碼：

<input type="telA" name="telA" id="telA" placeholder="電話A" class="telA" value="">

需求：使用CSS選擇器通過標簽+屬性定位頁面中的電話A<input>標簽。

"""
1.學習目標:
    必須掌握selenium中css定位方法
2.語法
    2.1 在selenium中語法
      (1)driver.find_element_by_css_selector("css選擇器定位策略")
      (2)driver.find_elements_by_css_selector("css選擇器定位策略")
    2.2 css表達式寫法
        標簽+屬性
        格式：標簽名[屬性名=屬性值]

3.需求
    在頁面中,使用css定位電話A輸入框
"""
# 1.導入selenium
from selenium import webdriver
from time import sleep
import os

# 2.打開瀏覽器
driver = webdriver.Chrome()

# 3.打開頁面
url = "file:///" + os.path.abspath("./練習頁面/注冊A.html")
driver.get(url)

# 4.定位電話A標簽,使用css selector
# 標簽+屬性
# 通過name屬性
telA = driver.find_element_by_css_selector("input[name='telA']")
# 通過id屬性
telA_1 = driver.find_element_by_css_selector("input#telA")
print(telA.get_attribute("outerHTML"))
print(telA_1.get_attribute("outerHTML"))

# 5.關閉瀏覽器
sleep(2)
driver.quit()
"""
輸出結果：
<input type="telA" name="telA" id="telA" placeholder="電話A" class="telA" value="">
<input type="telA" name="telA" id="telA" placeholder="電話A" class="telA" value="">
"""

（3）通過層級關系定位元素

在前面XPath中講到層級關系定位，這里CSS選擇器也可以達到同樣的效果。

在頁面中有如下代碼：

<p id="p1">
    <label for="userA">賬號A</label>
    <input type="textA" name="userA" id="userA" placeholder="賬號A" required="" value="">	</p>

需求：使用CSS選擇器通過層級定位的方式，定位頁面中的賬號A<input>標簽。

"""
1.學習目標:
    必須掌握selenium中css定位方法
2.語法
    2.1 在selenium中語法
      (1)driver.find_element_by_css_selector("css選擇器定位策略")
      (2)driver.find_elements_by_css_selector("css選擇器定位策略")
    2.2 css表達式寫法
        層級定位  需要使用 > 或 空格表示層級關系
        格式：父標簽名[父標簽屬性名=屬性值]>子標簽名

3.需求
    在頁面中,使用css定位賬號A輸入框
"""
# 1.導入selenium
from selenium import webdriver
from time import sleep
import os

# 2.打開瀏覽器
driver = webdriver.Chrome()

# 3.打開頁面
url = "file:///" + os.path.abspath("./練習頁面/注冊A.html")
driver.get(url)

# 4.定位賬號A標簽,使用css selector層級定位
textA_1 = driver.find_element_by_css_selector("p#p1 input")
print(textA_1.get_attribute("outerHTML"))

# 5.關閉瀏覽器
sleep(2)
driver.quit()
"""
輸出結果：
<input type="textA" name="userA" id="userA" placeholder="賬號A" required="" value="">
"""

（4）通過索引定位元素

語法格式：

  • 表示父標簽下所有子標簽順序
    父標簽[父標簽屬性名=父標簽屬性值]>:nth-child(索引值)
  • 表示父標簽下具體標簽的第幾個標簽
    父標簽[父標簽屬性名=父標簽屬性值]>子標簽:nth-of-type(索引值)

在頁面中有如下代碼：

<div id="zc">
    <fieldset>
    <legend>注冊用戶A</legend>
        <p id="p1">
            <label for="userA">賬號A</label>
            <input type="textA" name="userA" id="userA" placeholder="賬號A" required="" value="">
        </p>
        <p>
            <label for="password">密碼A</label>
            <input type="password" name="passwordA" id="passwordA" placeholder="密碼A" value="">
        </p>
    </fieldset>
</div>

需求：使用CSS選擇器通過層級定位的方式，定位頁面中的賬號A<input>標簽。

"""
1.學習目標:
    必須掌握selenium中css定位方法
2.語法
    2.1 在selenium中語法
      (1)driver.find_element_by_css_selector("css選擇器定位策略")
      (2)driver.find_elements_by_css_selector("css選擇器定位策略")
    2.2 css表達式寫法
        索引定位
        （1）父標簽名[父標簽屬性名=屬性值]>:nth-child(索引值)
            從父標簽下所有標簽開始計算
        （2）父標簽名[父標簽屬性名=屬性值]>子標簽名:nth-of-type(索引值)  
            表示父標簽下具體標簽的第幾個標簽

3.需求
    在頁面中,使用css定位賬號A輸入框
"""
# 1.導入selenium
from selenium import webdriver
from time import sleep
import os

# 2.打開瀏覽器
driver = webdriver.Chrome()

# 3.打開注冊A頁面
url = "file:///" + os.path.abspath("./練習頁面/注冊A.html")
driver.get(url)

# 4. 使用css索引定位賬號A輸入框
textA_1 = driver.find_element_by_css_selector("fieldset>:nth-child(2)>input")
textA_2 = driver.find_element_by_css_selector("fieldset>p:nth-of-type(1)>input")
print(textA_1.get_attribute("outerHTML"))
print(textA_2.get_attribute("outerHTML"))

# 5.關閉瀏覽器
sleep(2)
driver.quit()
"""
輸出結果：
<input type="textA" name="userA" id="userA" placeholder="賬號A" required="" value="">
<input type="textA" name="userA" id="userA" placeholder="賬號A" required="" value="">
"""

（5）通過邏輯運算定位元素

CSS選擇器同樣也可以實現邏輯運算，同時匹配兩個屬性，這里跟XPath不一樣，無需寫and關鍵字。

在頁面中有如下代碼

<input type="telA" name="telA" id="telA" placeholder="電話A" class="telA" value="">

需求：使用CSS選擇器通過邏輯運算定位的方式，定位頁面中的電話A<input>標簽。

"""
1.學習目標:
    必須掌握selenium中css定位方法
2.語法
    2.1 在selenium中語法
      (1)driver.find_element_by_css_selector("css選擇器定位策略")
      (2)driver.find_elements_by_css_selector("css選擇器定位策略")
    2.2 css表達式寫法
        邏輯定位
        格式：標簽名[屬性名1=屬性值1][屬性名2=屬性值2]...
        注意:屬性與屬性之間不能用空格

3.需求
    在頁面中,使用css定位電話A輸入框
"""
# 1.導入selenium
from selenium import webdriver
from time import sleep
import os

# 2.打開瀏覽器
driver = webdriver.Chrome()

# 3.打開注冊A頁面
url = "file:///" + os.path.abspath("./練習頁面/注冊A.html")
driver.get(url)

# 4. 使用css邏輯定位---電話A輸入框
# 注意：兩個屬性之間不能加空格，空格表示層級關系
telA = driver.find_element_by_css_selector("input[type='telA'][placeholder='電話A']")
print(telA.get_attribute("outerHTML"))

# 5.關閉瀏覽器
sleep(2)
driver.quit()
"""
輸出結果：
<input type="telA" name="telA" id="telA" placeholder="電話A" class="telA" value="">
"""

（6）通過模糊匹配定位元素

css_selector有三種模糊匹配方式：

  • ^：匹配到id屬性值的頭部，如ctrl_12
    driver.find_element_by_css_selector("input[id^='ctrl']")
  • $：匹配到id屬性值的尾部，如a_ctrl
    driver.find_element_by_css_selector("input[id$='ctrl']")
  • *：匹配到id屬性值的中間，如1_ctrl_12
    driver.find_element_by_css_selector("input[id*='ctrl']")

在頁面中有如下代碼：

<button type="submitA" value="注冊A" title="加入會員A">注冊用戶A</button>

需求：在頁面中，使用CSS選擇器定位注冊用戶A按鈕

"""
1.學習目標:
    必須掌握selenium中css定位方法
2.語法
    2.1 在selenium中語法
      (1)driver.find_element_by_css_selector("css選擇器定位策略")
      (2)driver.find_elements_by_css_selector("css選擇器定位策略")
    2.2 css表達式寫法
        模糊匹配：匹配屬性值
        （1）* ：匹配所有
        （2）^ ：匹配開頭
        （3）$ ：匹配結尾

3.需求
    在頁面中,使用css定位注冊用戶A按鈕
"""
# 1.導入selenium
from selenium import webdriver
from time import sleep
import os

# 2.打開瀏覽器
driver = webdriver.Chrome()

# 3.打開注冊A頁面
url = "file:///" + os.path.abspath("./練習頁面/注冊A.html")
driver.get(url)

# 4. 使用css模糊匹配定位---注冊用戶A按鈕
button_1 = driver.find_element_by_css_selector("button[type^='su']")
print(button_1.get_attribute("outerHTML"))
button_2 = driver.find_element_by_css_selector("button[value$='冊A']")
print(button_2.get_attribute("outerHTML"))
button_3 = driver.find_element_by_css_selector("button[title*='入會']")
print(button_3.get_attribute("outerHTML"))

# 5.關閉瀏覽器
sleep(2)
driver.quit()
"""
輸出結果：
<button type="submitA" value="注冊A" title="加入會員A">注冊用戶A</button>
<button type="submitA" value="注冊A" title="加入會員A">注冊用戶A</button>
<button type="submitA" value="注冊A" title="加入會員A">注冊用戶A</button>
"""

4、總結：

這里指做了一些最常用的css_selector定位方式的練習。

如果在工作中有需要用到一些特別的用法，可以查看css_selector的文檔。

CSS選擇器的文檔地址：https://www.w3school.com.cn/cssref/css_selectors.asp


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 『心善淵』Selenium3.0基礎 — 6、Selenium中使用XPath定位元素 『心善淵』Selenium3.0基礎 — 9、使用Seleniun中的By類定位元素 『心善淵』Selenium3.0基礎 — 4、Selenium元素定位詳解 『心善淵』Selenium3.0基礎 — 10、使用Seleniun定位頁面元素歸納總結(超詳細) 『心善淵』Selenium3.0基礎 — 23、Selenium的元素等待 『心善淵』Selenium3.0基礎 — 7、XPath軸定位詳解 『心善淵』Selenium3.0基礎 — 3、使用Selenium操作瀏覽器對象的基礎API 『心善淵』Selenium3.0基礎 — 18、使用Selenium操作瀏覽器的彈窗 『心善淵』Selenium3.0基礎 — 20、Selenium對Cookie的操作 『心善淵』Selenium3.0基礎 — 22、使用瀏覽器加載項配置實現用戶免登陸
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM