iT邦幫忙

2

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

w3hexschool selenium selenium webdriver
Ron Hsieh 2020-04-05 22:24:56 ‧ 16613 瀏覽

  • 分享至 

  • xImage
    •  


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()

鍵盤操作

使用鍵盤輸入某些文字或是某些按鍵，最主要可以分成 sendKeys、keyDown、keyUp、clear。
以下將使用 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 官方網站


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

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

登入發表回應

我要留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22170 篇
完賽人數
597 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙