技術文章 » 超全selenium元素定位XPath、CSS

超全selenium元素定位XPath、CSS

2022-08-07 21:00:42

說明：在HTML頁面中，<p> 是一個標籤，<p>hello</p> 是一個元素，元素由一個開始的標籤和結束的標籤組成。<font color="red">標籤包含屬性名color，屬性值為red。

id定位

說明：CSS的id選擇器，id常用於JS操作DOM節點物件。當同個id被多次參照時，通過getElementById方法獲取到的是在檔案中第一個出現該id的標籤(DOM節點物件)，因此id一般只被參照於一個標籤。

範例：

<input type="submit" value="百度一下" id="su" class="btn self-btn bg s_btn">

定位：

input = find_element_by_id("su")

class定位

說明：CSS的.class選擇器，用於包裝一組樣式和佈局供標籤參照，常被複用於多個標籤，且多個class可同時作用於同一個標籤（多個class通過空格隔開，如：class="btn self-btn bg s_btn"）。

  1. 單個clsss範例：
<input type="text" class="s_ipt" name="wd" id="kw" maxlength="100" autocomplete="off">

定位：

input = find_element_by_class("s_ipt")
  1. 多個class定位範例：
<input type="submit" value="百度一下" id="su" class="btn self-btn bg s_btn">

定位：當標籤被多個class作用時，此時不推薦使用class定位，因為通常會定位到多個元素，可通過XPath定位和CSS定位代替。

注意：class定位只能使用一個class，而XPath定位和CSS定位則需要輸入所有class

# class定位
input_1 = find_element_by_class("btn")
input_2 = find_element_by_class("self-btn")
input_3 = find_element_by_class("bg s_btn")
# XPath定位
input_4 = find_element_by_Xpath('//input[@class="btn self-btn bg s_btn"]')
# CSS定位
input_5 = find_element_by_css('input[class="btn self-btn bg s_btn"]')

name定位

說明：HTML標籤中name屬性相當於一個變數名，value屬性相當於一個變數值，在JS中以及向網站後端傳送引數時，與value一起用，比如name是「color」，value是「red」，那麼就會有引數color=「red」

範例：

<input id="kw" name="wd" class="s_ipt" value="輸入框的內容" maxlength="255" autocomplete="off">

定位：

input = find_element_by_name("wd")

tag定位

說明：根據標籤名稱定位，常被用來定位一類功能，HTML頁面中有很多相同的標籤，因此很少用tag定位單個元素。

範例：

<iframe src="https://www.google.com/recaptcha/api2/aframe" width="0" height="0" style="display: none;">

定位：

iframe = find_element_by_tag_name("iframe")

說明：專門定位文字連結元素，通過<a>標籤對之間的文字資訊來定位元素。

範例：

<a  href="http://news.baidu.com">新聞</a>

定位：

driver.find_element_by_link_text("新聞")

說明：partial_link_text定位是對link_text定位的一種補充，有些文字連結比較長，這個時候我們可以取文字連結的部分文字進行定位，只要這部分文字可以唯一地標識這個連結即可。

範例：

<a class="mnav" name="tj_lang" href="#">一個很長的文字連結</a>

定位：

driver.find_element_by_partial_link_text("文字連結")

XPath定位

說明：XPath 是用於在 XML 檔案中定位節點的語言。由於 HTML 可以是 XML (XHTML) 的實現，因此 Selenium 使用者可以利用這種強大的語言來定位其 Web 頁面中的元素。

XPath定位方法：

  1. 絕對路徑

    # 定位該路徑的input元素
driver.find_element_by_xpath("html/body/div/form/input")

  2. 相對路徑

    # 定位form元素下的input元素
driver.find_element_by_xpath("//form/input")

  3. 元素索引

    # 定位form元素下第一個input元素
driver.find_element_by_xpath("//form/input[1]")  # 索引從[1]開始

  4. 屬性

    # 定位包含value屬性的input元素
driver.find_element_by_xpath("//input[@value]")  # 屬性前必須帶@

  5. 屬性+屬性值

    # 定位包含value屬性值為‘xxx’的input元素
driver.find_element_by_xpath("//input[@value='xxx']")
# 注意：使用class屬性定位時，需寫入該元素所有class值才能定位到
driver.find_element_by_xpath("//input[@class='a b c']")  # 多個class值通過空格隔開分別為a,b,c

  6. *號（任意值）

    # 定位包含value屬性的任意元素
driver.find_element_by_xpath("//*[@value]")
# 定位包含任意屬性的值等於'xxx'的input元素
driver.find_element_by_xpath("//input[@*='xxx']")

  7. 層級與屬性結合

    # 定位包含id屬性值為'xxx'的from元素下的input元素
driver.find_element_by_xpath("//from[@id='xxx']/input")
# 跨級定位
driver.find_element_by_xpath("//from[@id='xxx']/*/input")  # 跨一級
driver.find_element_by_xpath("//from[@id='xxx']/*/*/input")  # 跨兩級
driver.find_element_by_xpath("//from[@id='xxx']//input")  # 跨多級

  8. 軸方式定位

    軸表示式說明：

    parent::* ：表示當前節點的父節點元素，同: //div/..

ancestor::* ：表示當前節點的祖先節點元素

descendant::* : 表示當前節點的子孫節點元素

child::* ：表示當前節點的子元素//A/descendant::* 表示A的所有後代元素，同://A/*

self::* ：表示當前節點的自身元素

ancestor-or-self::* ：表示當前節點的及它的祖先節點元素

descendant-or-self::* ：表示當前節點的及它們的後代元素

following-sibling::* ：表示當前節點的後序所有兄弟節點元素

preceding-sibling::* ：表示當前節點的前面所有兄弟節點元素

following::* ：表示html結構中當前節點的之前所有層級元素

preceding::* ：表示html結構中當前節點的之後所有層級元素

    定位：

    # 定位父級元素
driver.find_element_by_xpath('//*[@class="值"]/parent::*')
driver.find_element_by_xpath('//*[@class="值"]/..')
# 定位指定的祖先元素
driver.find_element_by_xpath('//input[@id="su"]//ancestor::div')
driver.find_element_by_xpath('//input[@id="su"]//ancestor::div[@id="s_fm"]'）
# 定位當前元素之前的所有同級元素
driver.find_elements_by_xpath('//*[@class="值"]/preceding-sibling::*')
# 定位當前元素之後的所有同級的input元素
driver.find_elements_by_xpath('//*[@class="值"]/following-sibling::input')
# 定位同級元素的上n個元素（n從1開始）
driver.find_element_by_xpath('//*[@class="值"]/preceding-sibling::*[n]')
# 定位同級元素的下n個元素（n從1開始）
driver.find_element_by_xpath('//*[@class="值"]/following-sibling::*[n]')

  9. text()標籤對文字方法

    範例：

    <button>登入</button>

    注意：「 text() 」可通過「 . 」表示！

    定位：

    # 定位標籤對文字等於‘登入’的button元素，注意非屬性不需要@
driver.find_element_by_xpath('//button[text()="登入"]')
# 用「 . 」代替text()
driver.find_element_by_xpath('//button[.="登入"]')

  10. 模糊屬性值匹配方法

    範例：

    <button id="a_b_c">請點選登入</button>

    定位：

    • starts-with（@屬性/text()，開頭值）：

      driver.find_element_by_xpath('//button[starts-with(@id,"a")]')
driver.find_element_by_xpath('//button[starts-with(text(),"請")]')

    • ends-with（@屬性/text()，結尾值）：

      driver.find_element_by_xpath('//button[ends-with(@id,"c")]')
driver.find_element_by_xpath('//button[ends-with(text(),"登入")]')

    • contains（@屬性/text()，包含值）：

      driver.find_element_by_xpath('//button[contains(@id,"b")]')
driver.find_element_by_xpath('//button[contains(text(),"點選")]')

  11. and、or、not

    範例：

    <input id="su" value="abc">百度一下</input>

    定位：

    • and
    # 定位包含id屬性值為「su"和value屬性值為「abc」的input元素
driver.find_element_by_xpath('//input[@id="su" and @value="abc"]')
    • or
    # 定位包含id屬性值為「su"或「kw」的input元素
driver.find_element_by_xpath('//input[@id="su" or @id="kw"]')
    • not
    # 定位不包含id屬性值為「kw」的input元素
driver.find_element_by_xpath('//input[not(@id="kw")]')

  12. last()方法

    定位：

    # 定位搜尋到的最後一個元素
driver.find_element_by_xpath('//ul/li[last()]')
# 定位搜尋到的倒數第二個元素
driver.find_element_by_xpath('//ul/li[last()-1]')

  13. 計算符方式定位

    範例：

    <body>
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
</body>

    定位：

    # 定位標籤文字等於1的p元素
driver.find_element_by_xpath('//body/p[.=1]')
# 定位標籤文字不等於2的p元素
driver.find_element_by_xpath('//body/p[.!=2]')
# 定位標籤文字大於3的p元素
driver.find_element_by_xpath('//body/p[.>3]')
# 定位標籤文字小於等於3的p元素
driver.find_element_by_xpath('//body/p[.<=4]')

  14. position()方法定位
    範例：

    <ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

    定位：

    # 定位第一個li元素
driver.find_element_by_xpath('//ul/li[position()=1')
# 定位第三個li元素
driver.find_element_by_xpath('//ul/li[position()=3')

  15. 根據子元素定位父元素
    範例：

    <ul>
  <li id="test">1</li>
</ul>

    定位：

    # 定位子元素含有li元素的ul元素
driver.find_element_by_xpath('//ul[li]')
# 定位子元素含有li元素且li元素id屬性值為test的所有元素
driver.find_element_by_xpath('//*[li[@id="test"]]')
# 定位子孫元素含有li元素且li元素id屬性值為test的所有元素
driver.find_element_by_xpath('//*[.//*[@id="test"]]')

CSS定位

說明：CSS指層疊樣式表（Cascading Style Sheet），用來定義如何顯示HTML和XML的元素。CSS使用選擇器為頁面元素繫結屬性。

CSS定位方法：

  1. .class選擇器

    範例：

    <input type="text" class="s_ipt" name="wd" id="kw" maxlength="100">

    定位：

    # 點號(.)加class屬性值
driver.find_element_by_css_selector(".s_ipt")

    擴充套件範例：

    <span class="btn_wr s_btn_wr bg" id="s_btn_wr">
    <input type="submit" value="百度一下" id="su" class="btn self-btn bg s_btn"></span>

    定位：

    # .btn_wr.s_btn_wr：定位class屬性中同時有btn_wr和s_btn_wr的元素
driver.find_element_by_css_selector(".btn_wr.s_btn_wr")
# .btn_wr .btn：定位class屬性為tn_wr元素的後代包含class屬性為btn的所有元素
driver.find_element_by_css_selector(".btn_wr .btn")

  2. #id選擇器

    範例：

    <input type="text" class="s_ipt" name="wd" id="kw" maxlength="100">

    定位：

    # 井號(#)表示通過id屬性值來定位
driver.find_element_by_css_selector("#kw")
# 定位class屬性值包含form的元素的子孫元素且子孫元素id屬性值為kw
driver.find_element_by_css_selector(".form #kw")

  3. 標籤名.class值、標籤名#id值

    範例：

    <input type="text" class="s_ipt" name="wd" id="kw" maxlength="100">

    定位：

    # 定位class屬性值含有s_ipt的input標籤元素
driver.find_element_by_css_selector("input.s_ipt")
# 定位id屬性值為kw的input標籤元素
driver.find_element_by_css_selector("input#kw")
# 定位class屬性值含有s_ipt且id屬性值為kw的input標籤元素
driver.find_element_by_css_selector("input.s_ipt#kw")

  4. 標籤名[屬性名=屬性值]

    範例：

    <input type="text" class="s_ipt" name="wd" id="kw" maxlength="100">

    定位：

    # 定位name屬性值為wd的input標籤元素
driver.find_element_by_css_selector('input[name="wd"]')
# 定位type屬性值為text的所有元素
driver.find_element_by_css_selector('[type="text"]')
# 定位name屬性值為wd的input且type屬性值為text的input標籤元素
driver.find_element_by_css_selector("input[name="wd"][type="text"]")

  5. 屬性模糊值定位

    範例：

    <input type="text" class="abc ede fgh" name="s_ipt" id="kw" maxlength="100">

    定位：

    # 定位name屬性值以s_開頭的元素
driver.find_element_by_css_selector('[name^="s_"]')
# 定位name屬性值包含_ip的元素
driver.find_element_by_css_selector('[name*="_ip"]')
# 定位name屬性值以ipt結尾的元素
driver.find_element_by_css_selector("[name$="ipt"]")
# 定位class屬性包含ede純字母單詞的元素，非字母分割
driver.find_element_by_css_selector("[class~="ede"]")
# 定位class以abc純字母單詞開頭的元素，非字母分割
driver.find_element_by_css_selector("[class|="ede"]")

  6. 層級定位
    範例：

    <div>
  <ul>
    <li>1</li>
    <li>2</li>
  </ul>
</div>

    定位：

    # 根據路徑定位li元素
driver.find_element_by_css_selector('div>ul>li')
# 定位div元素下所有li子孫元素
driver.find_element_by_css_selector('div li')
# 定位div元素下下層的li元素
driver.find_element_by_css_selector('div>*>li')

  7. 定位同級兄弟元素

    範例：

    <input type="text" class="s_ipt" name="wd" id="kw" maxlength="100">
<li>1</li>
<li>2</li>

    定位：

    # 定位input元素下一個li兄弟元素
driver.find_element_by_css_selector('input#kw+li')
# 定位input元素以後所有li兄弟元素
driver.find_element_by_css_selector('input#kw~li')

  8. 偽類定位元素

    div>:first-child         # 定位div元素下第一個子元素

div>:nth-child(2)        # 定位div元素下第二個子元素

div>:last-child          # 定位div元素下最後個子元素

input:focus              # 定位獲取焦點的input元素

input:enabled            # 定位可操作的input元素

input:checked            # 定位處於勾選狀態的checkbox元素

input:not([id])          # 定位所有無id屬性的input元素

  9. 多標籤定位

    範例：

    <input type="text" class="s_ipt" name="wd" id="kw">
<li id="ts">1</li>

    定位：

    # 同時定位input元素和li元素
driver.find_element_by_css_selector('input, li')
driver.find_element_by_css_selector('input[name="wd"], li#ts')

    注意：","後面需接空格。