鼠年全馬鐵人挑戰 WEEK 08：Selenium WebDriver (上)

w3hexschool selenium selenium webdriver

Ron Hsieh 2020-03-29 17:10:29 ‧ 20637 瀏覽

Photo on selenium

前言

在第六週 "鼠年全馬鐵人挑戰 WEEK 06：Selenium 自動化測試工具" 的文章中，稍微簡單的介紹一下 Selenium，而這週的內容將會延續 Selenium 繼續往下介紹 Selenium WebDriver。

介紹 Selenium WebDriver

WebDriver

WebDriver 是用來控制 Web 瀏覽器的行為，每一個瀏覽器都會有各自相對應的驅動程式(driver)，而 Selenium 透過 driver 作為後盾，使用 driver 所支援的瀏覽器進一步達到瀏覽器自動化。讓操作就像是真的使用者在操作一樣。
那 Selenium 支援哪些瀏覽器？相對應的 driver 又是哪些呢？
如果有在關注小弟文章的大哥大姐們應該已經知道這個問題的答案了，如果還沒有關注的大哥大姐們現在關注也不遲 (b･∀･)b。
小弟在上上個禮拜 "鼠年全馬鐵人挑戰 WEEK 06：Selenium 自動化測試工具" 的文章中，"初步認識 Selenium" 的小節裡，已經做過簡單的介紹了。但是為了大哥大姐們方便閱讀，小弟就簡單的在下方再附上資訊。
- 瀏覽器驅動程式
  - Microsoft Edge : Microsoft Edge Driver/Microsoft WebDriver
  - Google Chrome : chromedriver
  - Internet Explorer 11 : IEDriverServer
  - Mozilla Firefox : geckodriver
  - Opera : operachromiumdriver
  - Safari : safaridriver

如果還沒有安裝過 driver 的大哥大姐們，有興趣的話可以看看上上個禮拜的文章進行操作，因為下面的小節跟下個禮拜的文章介紹都會用到，如果有大哥大姐想玩玩看的可以跟著小弟一起做，如果有問題也可以讓小弟一起學習。
相關資訊: "鼠年全馬鐵人挑戰 WEEK 06：Selenium 自動化測試工具" 文章的 "簡單測試 Selenium" 小節。 (小弟沒有在騙點閱率，絕對沒有 (ˊ=◞౪◟=ˋ) )

定位元素

如果想要使用 Selenium WebDriver 的話，勢必要了解一下如何定位元素，因為在上一篇的鼠年全馬鐵人挑戰 WEEK 07：Selenium IDE 文章中，所使用的 Selenium IDE 其定位元素的方式是手動點擊 Web 後自動生成的，基本上不用手動去設定定位元素，所以在這篇文章的內容中，將會介紹一下定位元素的各種方式。
如果想要測試的大哥大姐們，記得在程式的開頭先導入 driver 才有辦法動作喔～
```
from selenium import webdriver

driver = webdriver.Chrome()
driver.get('https://你想測試的網站連結')
# 測試內容
driver.close()
```
- WebDriver 中有八種不同的內置元素定位策略：
  以下範例小弟皆是使用 python 語言，如果想要了解更多語言的使用方式，可以到 selenium.dev documentation 進行參考。
```
# example 1、2 這兩個是用來解釋用的 html 程式範本

example 1:
<input id="search" name="content" class="bar" type="text">

example 2:
<a href="https://bit.ly/2UrFeNo">Ron_Hsieh iT首頁</a>
```
  - class name:
    功能: CSS 和 JavaScript 可以使用 class 值對特定元素執行某些任務。
    位置: 該值會依附在元素中。
    範例: 使用 class name 來找尋上方的 example 1 的 <input>。 driver.find_element_by_class_name("bar")
  - css selector:
    使用: 最簡單的方式就是到網頁打開 "開發者工具" 複製 Selector。
    範例: 使用 class name 來找尋上方的 example 1 的 <input>。 driver.find_element_by_css_selector("input[id='search']")
  - id:
    功能: CSS 和 JavaScript 可以使用 id 值對特定元素執行某些任務。
    位置: 該值在 HTML 文檔中必須唯一，會依附在元素中。
    範例: 使用 id 來找尋上方的 example 1 的 <input>。
    driver.find_element_by_id("search")
  - link text:
    功能: 在網頁中是一個連結，可以讓使用這進行快速跳轉。
    位置: 該資訊會以 <a href="..."></a> 的元素進行包裝。
    使用: link text 的使用方式，文字內容必須全部文字符合。
    範例: 使用 link text 來找尋上方的 example 2 的 <a>
    driver.find_element_by_link_text("Ron_Hsieh iT首頁")
  - name:
    功能: 在網頁中主要是被用來獲取使用者提交內容的標示。
    位置: 該值在 HTML 文檔基本上是唯一的，會依附在元素中。
    範例: 使用 name 來找尋上方的 example 1 的 <input>。
    driver.find_element_by_name("content")
  - partial link text:
    功能與位置皆與 link text 相同。
    使用: partial link text 的使用方式，文字內容只需部分符合。
    範例: 使用 partial link text 來找尋上方的 example 2 的 <a>
    driver.find_element_by_partial_link_text("首頁")
  - tag name:
    功能: 純粹標記元素的標籤名稱。
    位置: 元素最前方與最後方都會被東西所包覆，不要懷疑就是它了。
    範例: 使用 tag name 來找尋上方的 example 2 的 <a>。
    driver.find_element_by_tag_name("a")
  - xpath:
    使用: 最簡單的方式就是到網頁打開 "開發者工具" 複製 XPath。
    範例: 使用 class name 來找尋上方的 example 1 的 <input>。
    driver.find_element_by_xpath("//input[@id='search']")
- 開啟 "開發者工具" 複製 selector 與 xpath 的方式
  1. 點擊右鍵選擇"檢查"。
  2. 點擊視窗左上角的 icon 並點擊所要查詢的元素。
  3. 對元素代碼點擊右鍵選擇"複製"。