python-UI自動化之selenium元素定位
- 1.0 selenium工具介紹
- 2.0 selenium環境搭建
- 3.0 selenium元素定位
- selenium常見8大元素定位
- 通過ID定位
- 通過class name定位
- 通過name定位
- 鏈接文本link text定位
- 部分鏈接文本partial link text定位
- 通過tag name定位
- 通過Xpath定位
- Xpath絕對路徑定位
- Xpath相對路徑定位
- 通過Chrome復制Xpath定位
- 通過CSS定位
- 通過Chrome復制css定位
- Xpath 與 CSS 定位簡單對比
- 結尾
1.0 selenium工具介紹
1.0 selenium工具介紹
2.0 selenium環境搭建
2.0 selenium環境搭建
3.0 selenium元素定位
通過上面的學習，相信你們已試過通過第一個Python自動化腳本運行了，剛開始的時候是不是覺得很高端大尚？
下面我們一起深入學習selenium WebDriver定位瀏覽器的頁面元素，come on····
selenium常見8大元素定位
開始之前， 我們先來看下selenium常見的8大元素定位，通過這些資訊來定位元素的位置，如下所示：
- ID定位
對應selenium的方法：
find_element_by_id()
find_elements_by_id() - Class name定位
對應selenium的方法：
find_element_by_class_name()
find_elements_by_class_name() - name定位
對應selenium的方法：
find_element_by_name()
find_elements_by_name() - 鏈接文本(精確文本)link text定位
對應selenium的方法：
find_element_by_link_text()
find_elements_by_link_text() - 鏈接文本(模糊文本)partial link text定位
對應selenium的方法：
find_element_by_partial_link_text()
find_elements_by_partial_link_text() - 標簽tag name定位
對應selenium的方法：
find_element_by_tag_name()
find_elements_by_tag_name() - xpath定位
對應selenium的方法：
find_element_by_xpath()
find_elements_by_xpath() - css定位
對應selenium的方法：
find_element_by_css_selector()
find_elements_by_css_selector()
以360搜索頁面為例，在這個頁面上有輸入框、搜索按鈕和文字超鏈接等等，自動化要做的就是模擬滑鼠和鍵盤來操作這些元素，下面我們來簡單操作下，
通過ID定位
通過上圖，我們可看到輸入框input有很多屬性，其中就有ID屬性，這個屬性跟其他屬性不一樣，就好比我們的身份證號類似，是唯一的，
有些前端開發在撰寫代碼時可能會存在兩個ID的值是一樣的，主要還是取決前端開發代碼的規范性，
對360搜索首頁上的輸入框與搜索按鈕通過ID定位代碼如下：
通過class name定位
通過 class 定位輸入框，并輸入內容，代碼如下：
通過name定位
輸入框的有個name名字，可理解為input輸入框的名字，通過 name 定位輸入框，并輸入內容，代碼如下：
鏈接文本link text定位
通過超鏈接精確文本link text 定位超鏈接文本 “百科”，定位代碼如下：
部分鏈接文本partial link text定位
通過超鏈接部分文本（模糊文本）partial link text 定位超鏈接文本 “導航”，定位代碼如下：
通過tag name定位
輸入框input標簽在瀏覽器頁面存在很多同樣的標簽名稱，所以定位時，會回傳多個input標簽的指（回傳的資料型別為list），
通過tag name定位代碼如下：
find_elements_by_tag_name()-----> 回傳多個元素值（資料型別為list）
get_attribute(屬性名稱)----> 獲取標簽中屬性對應的值
通過Xpath定位
Xpath 是一門在 XML 檔案中查找資訊和定位元素的語言，
做UI自動化時，可把 HTML 頁面看成 XML 去對元素和屬性進行遍歷定位出所需要的元素，
Xpath絕對路徑定位
從最外層的HTML一層一層定位到所屬元素位置，每一層之間用/隔開，路徑的開始以 / 開頭，
通過Xpath絕對路徑定位，代碼如下：
Xpath相對路徑定位
除了絕對路徑定位以外，Xpath還可以通過相關路徑的方式去定位頁面的元素，路徑的開始以//開頭，
// 表示在當前頁面某標簽下
- 元素標簽單屬性（多屬性）定位
通過Xpath相對路徑單屬性（多屬性）定位，代碼如下：
*表示所有標簽名稱的統稱
- Xpath層級屬性相對路徑定位
通過Xpath層級屬性相對路徑定位，代碼如下：
通過Chrome復制Xpath定位
- 絕對路徑定位：
在網頁F12中，右鍵copy，選擇copy full Xpath - 相對路徑定位：
在網頁F12中，右鍵copy，選擇full Xpath
通過CSS定位
CSS(Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等檔案樣式的計算機語言，
參考于百度百科
總得來說，我們可以這么理解，把HTML看成一個房子，那么CSS就是房子中的裝飾(顏色、壁紙、地板等)，
- 通過 id 樣式定位
- 通過 class樣式定位
- 通過層級css樣式定位
- 通過標簽屬性定位
通過Chrome復制css定位
在網頁F12中，右鍵copy，選擇selector
Xpath 與 CSS 定位簡單對比
| 定位方式 | Xpath | CSS |
|---|---|---|
| 標簽 | //input | input |
| ID定位 | //input[@id=“input”] 或 //*[@id=“input”] | #input |
| class定位 | //input[@class=“placeholder”] 或 //*[@class=“placeholder”] | .placeholder |
| 層級定位 | //div[@class=“skin-search-input”]/input 或 //[@class=“skin-search-input”]/ | div.skin-search-input > input 或 .skin-search-input > * |
| 屬性定位 | //*[@autocomplete=“off” and @class=“placeholder”] | div > input[name=“q”] |
學習到這里，相信你們也看得出來XPath 和 CSS 均提供了非常強大和靈活的定位方法，但相比較 CSS 語法更加簡潔，學難度可能會大一點，
至于定位的話，就看個人的選擇與喜好了，哪個方便就用哪個哈，
結尾
創作不易，希望本文對你有幫助，動起你們的小手手點下贊哈(一鍵三連更好)，Thanks?(･ω･)ﾉ，
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/240057.html
標籤：python
上一篇：Spring Boot 2.4版本前后的分組配置變化及對多環境配置結構的影響
下一篇：python程式設計：某體操比賽共有10名運動員參加，12名評委將根據運動員表現進行評分（滿分10分），請撰寫Python程式，解決下列問題：