Selenium 中Xpath、CSS定位
阿新 • • 發佈：2018-12-03
1. 什麼是Xpath？
1. XPath即為XML Path 的簡稱，它是一種用來確定XML文件中某部分位置的語言。
2. HTML可以看做是XML的一種實現，所以Selenium使用者可以使用這種強大的語言在Web應用中定位元素。
XML：一種標記語言，用於資料的儲存和傳遞。 字尾.xml結尾
提示：Xpath為強大的語言，那是因為它有非常靈活定位策略；
2. Xpath定位策略(方式)
1. 路徑-定位
1). 絕對路徑
2). 相對路徑
2. 利用元素屬性-定位
3. 層級與屬性結合-定位
4. 屬性與邏輯結合-定位
Xpath定位 方法
driver.find_element_by_xpath()
2.1 路徑(絕對路徑、相對路徑)
絕對路徑：從最外層元素到指定元素之間所有經過元素層級路徑 ；如:/html/body/div/p[2] 提示： 1). 絕對路徑以/開始 2). 使用Firebug可以快速生成，元素XPath絕對路徑 相對路徑：從第一個符合條件元素開始(一般配合屬性來區分)；如：//input[@id='userA'] 提示： 1). 相對路徑以//開始 2). 使用Friebug擴充套件外掛FirePaht可快速生成，元素相對路徑 提示：為了方便練習Xpath，可以在FireBug內安裝擴充套件外掛-FireFinder外掛； 1). 火狐瀏覽器-->元件管理器-->搜尋FireFinder
使用Xpath實現 案例-1
需求：
1). 使用絕對路徑和相對路徑分別實現，賬號A：admin;密碼A：123456；自動化指令碼設計
2.2 利用元素屬性
說明：快速定位元素，利用元素唯一屬性；
示例：//*[@id='userA']
2.3 層級與屬性結合
說明：要找的元素沒有屬性，但是它的父級有；
示例：//*[@id='p1']/input
2.4 屬性與邏輯結合
說明：解決元素之間個相同屬性重名問題
示例：//*[@id='telA' and @class='telA']
2.5 Xpath-延伸
//*[text()="xxx"] 文字內容是xxx的元素 //*[starts-with(@attribute,'xxx')] 屬性以xxx開頭的元素 //*[contains(@attribute,'Sxxx')] 屬性中含有xxx的元素
2.6 Xpath-總結
1. 如何通過Friebug快速生成絕對路徑
2. 如果通過Friebug快速生成相對路徑
3. Xpath策略有那些
3. CSS定位
3.1 什麼是CSS？
1. CSS（Cascading Style Sheets）是一種語言，它用來描述HTML和XML的元素顯示樣式；
(css語言書寫兩個格式：
1. 寫在HTML語言中<style type="text/css">...
2. 寫在單獨檔案中 字尾.css
)
2. 而在CSS語言中有CSS選擇器(不同的策略選擇元素)，在Selenium中也可以使用這種選擇器；
提示：
1. 在selenium中極力推薦CSS定位，因為它比XPath定位速度要快
2. css選擇器語法非常強大，在這裡我們只學習在測試中常用的幾個
CSS定位 方法
driver.find_element_by_css_selector()
3.2 CSS定位常用策略 (方式)
1. id選擇器
2. class選擇器
3. 元素選擇器
4. 屬性選擇器
5. 層級選擇器
id選擇器
說明：根據元素id屬性來選擇
格式：#id 如：#userA <選擇id屬性值為userA的所有元素>
使用CSS實現 案例-2
需求：
1). 使用CSSid定位實現，賬號A：admin;密碼A：123456；自動化指令碼設計
class選擇器
說明：根據元素class屬性來選擇
格式：.class 如：.telA <選擇class屬性值為telA的所有元素>
元素選擇器
說明：根據元素的標籤名選擇
格式：element 如：input <選擇所有input元素>
屬性選擇器
說明：根據元素的屬性名和值來選擇
格式：[attribute=value] 如：[type="password"] <選擇所有type屬性值為password的值>
層級選擇器
說明：根據元素的父子關係來選擇
格式：element>element 如：p>input <返回所有p元素下所有的input元素>
提示：> 可以用空格代替 如：p input 或者 p [type='password']
3.3 CSS延伸
1. input[type^='p'] 說明：type屬性以p字母開頭的元素
2. input[type$='d'] 說明：type屬性以d字母結束的元素
3. input[type*='w'] 說明：type屬性包含w字母的元素
3.4 CSS總結
| 選擇器 | 例子 | 描述 |
|---|---|---|
| #id | #userA | id選擇器，選擇id="userA"的所有元素 |
| .class | .telA | class選擇器，選擇class="telA"的所有元素 |
| element | input | 選擇所有input元素 |
| [attribute=value] | [type="password"] | 選擇type="password"的所有元素 |
| element>element | p>input | 選擇所有父元素為p元素的input元素 |
4. XPath與CSS類似功能對比
| 定位方式 | XPath | CSS |
|---|---|---|
| 元素名 | //input | input |
| id | //input[@id='userA'] | #userA |
| class | //*[@class='telA'] | .telA |
| 屬性 | 1. //※[text()="xxx"] 2. //※[starts-with(@attribute,'xxx')] 3. //※[contains(@attribute,'xxx')] |
1. input[type^='p'] 2. input[type$='d'] 3. input[type*='w'] |
說明：由於顯示排版原因以上所有(※)號代替(*)
5. 八種元素定位總結：
1. id
2. name
3. class_name
4. tag_name
5. link_text
6. partial_link_text
7. Xpath
8. Css
說明：
1). 元素定位我們就學到這裡了
2). WebDriver除了提供以上定位API方法(driver.find_element_by_xxx())
外，還提供了另外一套寫法；
3). 呼叫find_element()方法，通過By來宣告定位的方法，並且傳入對應的方法和引數（瞭解-熟悉即可）
6. 定位(另一種寫法)-延伸【瞭解】
說明：第二種方法使用By類的封裝的方法,所以需要匯入By類包
6.1 匯入By類
導包：from selenium.webdriver.common.by import By
6.2 By類的方法
方法：find_element(By.ID,"userA")
備註：需要兩個引數，第一個引數為定位的型別由By提供，第二個引數為定位的具體方式
示例：
1. driver.find_element(By.CSS_SELECTOR,'#emailA').send_keys("[email protected]")
2. driver.find_element(By.XPATH,'//*[@id="emailA"]').send_keys('[email protected]')
3. driver.find_element(By.ID,"userA").send_keys("admin")
4. driver.find_element(By.NAME,"passwordA").send_keys("123456")
5. driver.find_element(By.CLASS_NAME,"telA").send_keys("18611111111")
6. driver.find_element(By.TAG_NAME,'input').send_keys("123")
7. driver.find_element(By.LINK_TEXT,'訪問 新浪 網站').click()
8. driver.find_element(By.PARTIAL_LINK_TEXT,'訪問').click()
6.3 find_element_by_xxx()和find_element() 區別
說明：通過檢視find_element_by_id底層實現方法，發現底層也是呼叫的By類方法進行的封裝；
def find_element_by_id(self, id_):
"""Finds an element by id.
:Args:
- id\_ - The id of the element to be found.
:Usage:
driver.find_element_by_id('foo')
"""
return self.find_element(by=By.ID, value=id_)
總結：雖然方法一樣，但WebDriver推薦 find_element_by_xxx()這種方法