Xpath定位和CSS定位(***重)


1、XPath是一種在XML文檔中定位元素的語言。因為HTML可以看作XML的一種實現, 所以Selenium用戶可以使用這種強大的語言在Web應用中定位元素。

1.1 絕對路徑定位

參考baidu.html前端工具所展示的代碼,我們可以通過下面的方式找到百度輸入框和搜索按鈕。

find_element_by_xpath("/html/body/div/div[2]/div/div/div/from/span/input")

find_element_by_xpath("/html/body/div/div[2]/div/div/div/from/span[2]/input")

1.2 利用元素屬性定位

XPath可以使用元素的屬性值來定位。同樣以百度輸入框和搜索按鈕為例:

find_element_by_xpath(“//input[@ id = ‘ kw’]”)

find_element_by_xpath(“//input[@ id = ‘ su’]”)

//表示當前頁面某個目錄下,input表示定位元素的標簽名,[@ id=’ kw’]表示這個元素的id屬性值等於kw。

 

下面通過name和class屬性值來定位。

find_element_by_xpath(“//input[@ name = ‘ wd’]”)

find-____element__by_xpath(“//input[@ class= ‘ s_ipt’]”)

如果不想指定標簽名,則也可以用星號(*)代替。當然,使用XPath不局限於id、name 和class這三個屬性值,元素的任意屬性值都可以使用,只要它能唯一的標識一個元素。

find_element_by_xpath(“//input[@ maxlength= ‘ 100’]”)

find_elernent_by_xpath(“//input[@ autocomplete = ‘off ’]”)

1.3 層級與屬性結合

查看如下前端代碼:

<form id="form" class="fm" name="f" action="/s">

                                                        <input name="ie" value="utf-8" type="hidden">

                                                        <input name="f" value="8" type="hidden">

                                                        <input name="rsv_bp" value="0" type="hidden">

                                                        <input name="rsv_idx" value="1" type="hidden">

                                                        <input name="ch" value="" type="hidden">

                                                        <input name="tn" value="baidu" type="hidden">

                                                        <input name="bar" value="" type="hidden">

                                                        <span class="bg s_ipt_wr quickdelete-wrap">

                                                               <span class="soutu-btn"></span>

                                                               <input id="kw" class="s_ipt" name="wd" value="" maxlength="255" autocomplete="off">

                                                               <a id="quickdelete" class="quickdelete" href="javascript:;" title="清空" style="top: 0px; right: 0px; display: none;"></a>

                                                        </span>

                                                        <span class="bg s_btn_wr">

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

                                                        </span>

通過XPath可以這樣定位如下:

find_element_by_xpath(" //span[@ class = ‘  bg s_ipt_wr quickdelete-wrap’]/input")

span[@ class = ‘ bg s_ipt_wr quickdelete-wrap’]通過class屬性定位到父元素,后面/input就表示父元素下面的子元素。如果父元素沒有可利用的屬性值,那么可以繼續向上查找“爺爺”元素。

fmd_element_by_xpath("//form [@id='form']/span/input")

find_element_by_xpath("//form[@id='form']/span[2]/input")

1.4 使用邏輯運算符

如果一個屬性不能唯一地區分一個元素,我們還可以使用邏輯運算符連接多個屬性來査找元素。

 <input id=”kw” class=”su” name="ie">

<input id=”kw” class=”aa” name="ie">

<input id=”bb” class=”su” name="ie">

如上面的三行元素,假設我們現在要定位第一行元素,如果使用id將會與第二行元素重名,如果便用class將會與第三行元素重名。如果同時使用id和class就會唯一地標識這' 個元素,這個時候就可以通過邏輯運算符“and”來連接兩個條件。

find_element_by_xpath(" //input[@id = ‘kw’ and @class = ‘su’]/span/input”)

當然,我們也可以用“and”連接更多的屬性來唯一地標識一個元素。

 

2、CSS (Cascading Style Sheets)是一種語言,它用來描述HTML和XML文檔的表現。CSS使用選擇器來為頁面元素綁定屬性。

     CSS可以較為靈活地選擇控件的任意屬性,一般情況下定位速度要比Xpath快。

下面同樣以百度輸入框和搜索按鈕為例介紹CSS定位的用法。

<span class="bg s_ipt_wr quickdelete-wrap">

<span class="soutu-btn"></span>

      <input id="kw" class="s_ipt" name="wd" value="" maxlength="255" autocomplete="off">

      <a id="quickdelete" class="quickdelete" href="javascript:;" title="清空" style="top: 0px; right: 0px; display: none;"></a>

</span>

<span class="bg s_btn_wr">

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

</span>

       2.1 通過class屬性定位

find_element_by_css_selector(“.s_ipt”)

find_element_by_css_selector(“.bg s_btn”)

find_element_by_css_selector()方法用於CSS語言定位元素,點號( .)表示通過class屬性來定位元素。

       2.2 通過id屬性定位

find_element_by_css_selector( “ # kw ”)

find_element_by_css_selector( “ # su ”)

井號(#)表示通過id屬性來定位元素。

      2.3 通過標簽名定位

find_element_by_css_selector( “ input” )

2.4 通過父子關系定位

find_element_by_css_selector("span>input")

2.5 通過屬性定位

find_element_by_css_selector (‘[type="submit"]')

2.6 組合定位

我們當然可以把上面的定位策略組合起來使用,這就大大加強了定位元素的唯一性。

find_element_by_css_selector(“span . bg s_ipt_wr quickdelete-wrap>input .s_ipt “)

find_element_by_css_selector(“span . bg s_btn_wr >input # su “)

有一個父元素,它的標簽名叫span:它有一個class屬性值叫bg s_ipt_wr quickdelete-wrap:它有一個子元素,標簽名叫input,並且這個子元素的class屬性值叫s_ipt。

 

 


免責聲明!

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



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM