iT邦幫忙

2

鼠年全馬鐵人挑戰 WEEK 09:Selenium WebDriver (下)


Photo on selenium


前言

在上禮拜 "鼠年全馬鐵人挑戰 WEEK 08:Selenium WebDriver (上)" 的文章中,已經稍微簡單介紹了一下 Selenium WebDriver 與其定位的方式,而這週的內容將會持續介紹更詳細的操作方式,希望有興趣的大哥大姐們可以一起來實作看看。

如果大哥大姐們覺得內容太多的話,那我建議可以借一下記憶吐司來吃。
沒有拉~小弟是開玩笑的,在每個小段落講解完都有一段範例程式,希望會比較好懂。


使用 Selenium WebDriver

瀏覽器導引

在瀏覽器的導引功能,最主要可以分成 導引上一頁下一頁刷新取得當前網址取得當前分頁
以下將使用 python 的程式語言來逐一做介紹。

  • 導航: 啟動瀏覽器後,所要做的第一件事情就是打開網站。
    $ driver.get("<url_link>")
  • 上一頁: 這就如同使用者點擊頁面的上一頁相同。
    $ driver.back()
  • 下一頁: 這就如同使用者點擊頁面的下一頁相同。
    $ driver.forward()
  • 刷新: 這就如同使用者點擊頁面的重整相同。
    $ driver.refresh()
  • 取得當前網址: 獲取當前瀏覽頁面的網址連結。
    $ driver.current_url
  • 取得當前分頁: 獲取當前瀏覽頁面的分頁名稱。
    $ driver.title

範例程式:

#!/usr/bin/python
# -*- coding: utf-8 -*-

from selenium import webdriver
driver = webdriver.Chrome()

# 導引到指定的網頁連結,並印出網址連結與分頁名稱
driver.get("https://ithelp.ithome.com.tw/users/20124633/articles")
print ("當前的網址連結為:" + str(driver.current_url))
print (driver.title)

# 前往任意頁面,測試上下頁的功能,並印出網址連結與分頁名稱
driver.get("https://ithelp.ithome.com.tw/articles/10229959")
print ("當前的網址連結為:" + str(driver.current_url))
print (driver.title)

# 回上一頁,並印出網址連結與分頁名稱
driver.back()
print ("當前的網址連結為:" + str(driver.current_url))
print (driver.title)

# 回下一頁,並印出網址連結與分頁名稱
driver.forward()
print ("當前的網址連結為:" + str(driver.current_url))
print (driver.title)

# 重新整理網頁
driver.refresh()

# 關閉瀏覽器
driver.close()

視窗管理

在瀏覽器的視窗管理功能,最主要可以分成 設定視窗大小獲取視窗大小設定視窗位置獲取視窗位置改變視窗大小
以下將使用 python 的程式語言來逐一做介紹。

  • 設定視窗大小: 自行設定瀏覽器視窗大小。
    $ driver.set_window_size(<width>, <height>)
  • 獲取視窗大小: 獲取所開啟瀏覽器的寬與高。
    $ driver.get_window_size().get("width")
    $ driver.get_window_size().get("height")
  • 設定視窗位置: 自行設定瀏覽器視窗位置。
    $ driver.set_window_position(<x>, <y>)
  • 獲取視窗位置: 獲取瀏覽器當前的位置。
    $ driver.get_window_position().get('x')
    $ driver.get_window_position().get('y')
  • 改變視窗大小: 分別調整為,全屏、最大化、最小化。
    $ driver.fullscreen_window()
    $ driver.maximize_window()
    $ driver.minimize_window()

範例程式:

#!/usr/bin/python
# -*- coding: utf-8 -*-

from selenium import webdriver
driver = webdriver.Chrome()

driver.get("https://ithelp.ithome.com.tw/")

# 自行設定視窗的寬與高
driver.set_window_size(1024, 768)

# 印出瀏覽器視窗的大小,單位為像素
print ("視窗的寬為:" + str(driver.get_window_size().get("width")))
print ("視窗的高為:" + str(driver.get_window_size().get("height")))

# 自行設定視窗的座標
driver.set_window_position(50, 50)

# 印出瀏覽器視窗的位置,單位為像素
print ("視窗的 x 座標為" + str(driver.get_window_position().get('x')))
print ("視窗的 x 座標為" + str(driver.get_window_position().get('y')))

# 改變視窗大小為最小化 (因為沒有可見視窗,所以長寬為關閉前大小)
driver.minimize_window()
print ("最小化:(" + str(driver.get_window_size().get("width")) + "," + str(driver.get_window_size().get("height")) + ")")

# 改變視窗大小為最大化
driver.maximize_window()
print ("最大化(" + str(driver.get_window_size().get("width")) + "," + str(driver.get_window_size().get("height")) + ")")

# 改變視窗大小為全屏
driver.fullscreen_window()
print ("全屏:(" + str(driver.get_window_size().get("width")) + "," + str(driver.get_window_size().get("height")) + ")")

driver.close()

視窗切換

在瀏覽器的操作中,如果需要操作新分頁,就必須使用視窗切換功能。
雖然在畫面操作看起來已經完成切換,但實際上每個分頁都有各自的標示 id ,如果沒有執行切換的指令,標識符將會判定為原先的分頁。
最主要可以分成 當前視窗所有視窗視窗切換退出瀏覽器
以下將使用 python 的程式語言來逐一做介紹。

  • 當前視窗: 獲取當前視窗分頁的 ID。
    $ driver.current_window_handle
  • 所有視窗: 獲取所有視窗分頁的 ID。
    $ driver.window_handles
  • 視窗切換: 切換至指定的視窗分頁。
    $ driver.switch_to.window(<window_handle>)
  • 退出瀏覽器: 關閉與該 WebDriver 關聯的所有視窗和分頁。
    $ driver.quit()

範例程式:

#!/usr/bin/python
# -*- coding: utf-8 -*-

from selenium import webdriver
driver = webdriver.Chrome()

driver.get("https://ithelp.ithome.com.tw/")

# 印出當前視窗分頁 ID
print (driver.current_window_handle)

# 確認目前視窗分頁為一個
assert len(driver.window_handles) == 1

# 點擊頁面上方廣告欄位,開啟新視窗分頁
driver.find_element_by_xpath("//div[@class='a970 pull-right']").click()

# 確認目前視窗分頁為兩個
assert len(driver.window_handles) == 2

# 切換視窗至新的分頁
driver.switch_to.window(driver.window_handles[1])

# 印出當前視窗分頁 ID
print (driver.current_window_handle)

# 關閉所有視窗分頁與瀏覽器
driver.quit()

鍵盤操作

使用鍵盤輸入某些文字或是某些按鍵,最主要可以分成 sendKeyskeyDownkeyUpclear
以下將使用 python 的程式語言來逐一做介紹。

使用前要額外引入套件
from selenium.webdriver.common.keys import Keys
至於支援哪些按鍵可以參考 selenium.webdriver.common.keys
有些案件是不支援的,但是 CONTROL,SHIFT,ALT 基本上是可執行的。

  • sendKeys: 對指定的元素輸入文字或是敲擊鍵盤。
    如果你想要輸入的值為中文字,則必須加上 u 在前面。
    $ element.send_keys("<value>"+Keys.<key>)
  • keyDown: 模擬按下鍵盤按鍵的操作。
    $ webdriver.ActionChains(driver).key_down(Keys.。<key>)
  • keyUp: 模擬釋放鍵盤按鍵的操作。
    $ webdriver.ActionChains(driver).key_up(Keys.。<key>)
  • clear: 清除指定且可編輯的元素內容。
    $ element.clear()

範例程式:

#!/usr/bin/python
# -*- coding: utf-8 -*-

from selenium import webdriver
from selenium.webdriver.common.keys import Keys
driver = webdriver.Chrome()

driver.get("http://www.google.com")

# 設置 search box 元素與 webdriver 操作行為的變數
search = driver.find_element_by_name("q")
action = webdriver.ActionChains(driver)

# 按住 SHIFT 輸入 UPPERCASE 與 放開 SHIFT 輸入 lowercase (UPPERCASElowercase)
action.key_down(Keys.SHIFT).send_keys_to_element(search, "uppercase")
action.key_up(Keys.SHIFT).send_keys("lowercase")
action.perform()

# 清除 search box 元素中所有文字
search.clear()

# 輸入 "四十週自動化測試",並且點擊 ENTER 
search.send_keys(u"四十週自動化測試"+Keys.ENTER)

driver.close()

結尾

原本想說連假這麼多天,可以很愜意地完成這禮拜的文章。
但是,事實證明,這是一個非常天真的想法。
一到了連假,就有很多平時沒有辦法做的事情想做。
至少小弟還沒忘記初衷,努力地理解完並且完成這禮拜的文章。

如果有疑問或是有錯誤,還請各位大哥大姐提點。
小弟將繼續往下週邁進。 ─=≡Σ((( つ•̀ω•́)つ


參考文件:

Selenium 官方網站


1 則留言

0
shapy821
iT邦新手 5 級 ‧ 2020-07-19 11:46:33

謝謝您提供Selenium完整的教學!努力學習中!
想請問上一頁下一頁的方式是否相反了呢?

上一頁: 這就如同使用者點擊頁面的上一頁相同。
$ driver.forward()
下一頁: 這就如同使用者點擊頁面的下一頁相同。
$ driver.back()

Ron Hsieh iT邦新手 5 級 ‧ 2020-07-20 21:50:47 檢舉

小弟感到萬分抱歉 ~~~
上面的說明確實寫反了
正確內容應該為
上一頁: $ driver.back()
下一頁: $ driver.forward()
已經修改完成
/images/emoticon/emoticon02.gif

我要留言

立即登入留言