Slido

slido: sproutpy2026

Python Selenium

• selenium: 硒 (X)
• open source 瀏覽器自動化工具。
• 提供框架，讓程式能操作瀏覽器，模擬人類操作瀏覽器的行為。
• 支援多種程式語言，包括 Python。

Recap: Requests and BeautifulSoup

• Requests 是用來建構、發送 HTTP request 與解析 HTTP response 的套件。
• BeautifulSoup 是用來靜態分析收到的 HTML 文件的套件。
• 針對靜態網頁，能夠有很好的執行效率。
  • 你可以想像 BeautifulSoup 做的，僅僅是非常複雜的字串操作。
• 適合用來進行重複的網頁內容爬取。

瀏覽器自動化動機

瀏覽器自動化目的

不論從企業或應用開發的角度，自動化操作網頁應用，都有相當實務的需求:

• 針對網頁開發的自動化測試、模擬多用戶使用的規模測試。
• 針對重複但涉及複雜機制的網頁操作工作進行自動化。
• 現也被用來擴展 AI agent 的能力，使其能自主操作網頁。
• ...

瀏覽器自動化架構

WebDriver 定義了自動化操作瀏覽器的介面，它扮演翻譯的角色，將定義的自動化操作 request，翻譯成實際操作不同瀏覽器的 command。

不同的瀏覽器需要不同的 WebDriver，由各瀏覽器提供商實作。

法律責任 - 不法攻擊

• 刑法 第三十六章 妨害電腦使用罪
  • 第 360 條

  無故以電腦程式或其他電磁方式干擾他人電腦或其相關設備，致生損害於公眾或他人者，處三年以下有期徒刑、拘役或科或併科三十萬元以下罰金。

  • 第 362 條

  製作專供犯本章之罪之電腦程式，而供自己或他人犯本章之罪，致生損害於公眾或他人者，處五年以下有期徒刑、拘役或科或併科六十萬元以下罰金。

法律責任 - 搶票程式

• 文化創意產業發展法 第 10-1 條第 3 項

以虛偽資料或其他不正方式，利用電腦或其他相關設備購買藝文表演票券，取得訂票或取票憑證者，處三年以下有期徒刑，或科或併科新台幣三百萬元以下罰金。

• 運動產業發展條例 第 24-1 條第 3 項

以虛偽資料或其他不正方式，利用電腦或其他相關設備購買運動賽事或活動票券，取得訂票或取票憑證者，處三年以下有期徒刑，或科或併科新臺幣三百萬元以下罰金。

下載 Selenium 套件

• 下載 Python Selenium 套件:

pip install "selenium>=4.10"

• 下載 WebDriver:

  理論上，我們要自己去下載欲使用的瀏覽器其對應的 WebDriver，但在 Selenium 4.6+/4.10+ 以後，自帶管理 WebDriver 的功能。

  Selenium 檢查到缺少需要的 WebDriver 時，會自己去尋找、下載，並且 cache 起來。也因此第一次執行會比較慢。

測試 Selenium

用 Google Chrome 瀏覽器做示範:

from selenium import webdriver
import time

browser = None
try:
    browser = webdriver.Chrome()
    browser.get("https://sprout.tw/py2026/")
finally:
    if browser:
        browser.quit()

你會觀察到...

一個瀏覽器被打開了！但畫面還沒完整顯示，瀏覽器就關掉了。

因為:

1. browser.get() 回傳後，就繼續執行到 browser.quit()，因此瀏覽器會自己關閉。
2. 我們會期待 browser.get() 把畫面完全準備好，才回傳。但 Selenium 預設並不會很 robust 的同步瀏覽器的行為，需要其他機制。

最簡單的方式是加入 time.sleep() 等待幾秒，給瀏覽器一小段時間處理。

加入等待

手動加入 time.sleep()，給瀏覽器一小段時間處理。

from selenium import webdriver
import time

browser = None
try:
    browser = webdriver.Chrome()
    browser.get("https://sprout.tw/py2026/")
    time.sleep(5) # 等待 5 秒
finally:
    if browser:
        browser.quit()

最大化視窗

畫面有點小，把視窗放大吧~

from selenium import webdriver
import time

browser = None
try:
    browser = webdriver.Chrome()
    browser.maximize_window() # 將視窗最大化
    browser.get("https://sprout.tw/py2026/")
    time.sleep(5)
finally:
    if browser:
        browser.quit()

讓視窗暫時停留

透過用 input() 讀取輸入會 block 程式的特性，來讓程式暫時停住，觀察打開的瀏覽器。

from selenium import webdriver
import time

browser = None
try:
    browser = webdriver.Chrome()
    browser.maximize_window()
    browser.get("https://sprout.tw/py2026/")
    input("Press Enter to Exit...")
finally:
    if browser:
        browser.quit()

成功畫面

Recap: HTML

• HyperText Markup Language
• 用來描述網頁的骨架，定義網頁中有哪些元素、元素間的關係等。

<body>
    <h1>大標題</h1>
    <p>一般文字</p>
    <div>
        <button>按鈕</button>
        <input type="text"/>
    </div>
</body>

如何操作網頁中的元素

1. 定位元素。
2. 對元素執行動作。

<body>
    <button id="btn1">按鈕 1</button>
    <button id="btn2">按鈕 2</button>
    <button id="btn3">按鈕 3</button>
</body>

我們想要點擊按鈕 2，需要:

1. 定位按鈕 2，取得按鈕 2 的操作物件。
2. 對按鈕 2 物件，觸發點擊事件。

Wikipedia 搜尋的例子

• https://www.wikipedia.org/

使用檢查工具(開發者工具)來輔助定位搜尋欄

• 右鍵 > 檢查 / 開發者工具，或者是按鍵盤 F12，開啟開發者工具。

Wikipedia 搜尋欄

可以從原始碼中，看到搜尋欄在 HTML 中的表示如下:

<input id="searchInput" name="search" type="search" size="20" autofocus="autofocus" accesskey="F" dir="auto" autocomplete="off" style="padding-right: 64px;">

我們關注的有:

• input: 這個元素的標籤(tag)。
• id="searchInput": 這個元素的 id 屬性。(id 通常給 javascript 使用)
• name="search": 這個元素的 name 屬性。(name 通常給表單資料使用)
• 我們也會關心 class 屬性，但是這裡沒有。(class 通常給 css 使用)

在 Selenium 中定位元素

element = browser.find_element([用來定位的屬性], [屬性的值])

以 <div id="1" name="2" class="3">4</div> 作為例子:

from selenium.webdriver.common.by import By

e = browser.find_element(By.TAG_NAME, "div")
e = browser.find_element(By.ID, "1")
e = browser.find_element(By.NAME, "2")
e = browser.find_element(By.CLASS_NAME, "3")
e = browser.find_element(By.CSS_SELECTOR, ".3")

若在同一份 HTML 內有多個符合的目標，會定位到第一個符合的元素。

用 Selenium 定位搜尋欄

from selenium import webdriver
from selenium.webdriver.common.by import By 
import time

browser = None
try:
    browser = webdriver.Chrome()
    browser.maximize_window()
    browser.get("https://www.wikipedia.org/")
    time.sleep(1) # 等網站載入完成
    search_bar = browser.find_element(By.ID, "searchInput") # 定位搜尋欄的 element
finally:
    if browser:
        browser.quit()

模擬使用者輸入文字

模擬使用者在搜尋欄內輸入文字，並且輸入 enter 進行搜尋。

from selenium.webdriver.common.keys import Keys

search_bar.send_keys("Linux")
search_bar.send_keys(Keys.ENTER)

小遊戲: 空白網頁

我在這個空白網頁中，藏了一則秘密訊息，分成了四段，請你把它找出來！

密文形式

秘密被拆成了四段，任務一對應到第一段，任務二對應到第二段，依此類推。把四個任務得到的段落串接在一起，即可得到完整的秘密訊息。

任務完成後，系統會透過 alert() 的方式告訴你對應的秘密訊息段落。

在 Selenium 操作 alert 視窗

你可以透過以下程式操作 alert 視窗，製作一次解完四個任務的 Selenium 程式。
(或者要一個一個任務做，手動複製 alert 視窗內文字，也可以。)

from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

WebDriverWait(browser, 5).until(EC.alert_is_present()) # 等到 alert 出現 (最多 5 秒)
alert = browser.switch_to.alert
alert_text = alert.text # alert 裡的文字內容
print(alert_text)
alert.accept() # 做出確認的動作

任務一

在頁面中其實隱藏了一個按鈕！請你點擊這顆按鈕~

<button id="btn"></button>

你需要:

• 透過 id 來 locate 這顆按鈕，使用 By.ID 來完成。
• 如果 e 是你找到的按鈕元素，使用 e.click() 來點擊。

把你找到的答案在 Slido 上告訴我！

任務二

在頁面中隱藏了一個可以輸入內容的格子！請你輸入通關密語 python2026，完成這項任務。

<input type="text" name="text_box">

你需要:

• 透過 name 來 locate 這個輸入格，使用 By.NAME 來完成。
• 用前面教的方法來輸入文字。
• 在本任務中，文字一輸入到輸入格中就會被立刻偵測，輸入完後不用輸入 enter。

把你找到的答案在 Slido 上告訴我！

任務三

在頁面中隱藏了五個 box，請點擊這五個 box 中，文字內容以 $ 開頭的 box。

<div class="container">
    <div class="box" id="b1">[不給你看]</div>
    <div class="box" id="b2">[不給你看]</div>
    <div class="box" id="b3">[不給你看]</div>
    <div class="box" id="b4">[不給你看]</div>
    <div class="box" id="b5">[不給你看]</div>
</div>

• 透過 id 來 locate 這五個 box。
• 如果 e 是你找到的 box 元素，使用 e.text 來取得文字內容。比對 e.text 是不是以 "$" 開頭。

把你找到的答案在 Slido 上告訴我！

任務四

在頁面中隱藏了特殊的元素，請將滑鼠游標移至這個特殊的元素上。

<div id="hidden_box"></div>

• 透過 id 來 locate 這個元素。
• 如何操作滑鼠...?

Selenium 操作滑鼠

在 Selenium 中操作滑鼠，需要使用 ActionChains 這個特別的物件，用來表示一連串操作。更多使用請參考官方文件。

from selenium.webdriver import ActionChains

actions = ActionChains(browser) # 建立 ActionChains 實體來記錄一連串操作

actions.move_to_element(e) # 將滑鼠移到某個元素上
actions.move_by_offset(x_offset, y_offset) # 將滑鼠移動 x_offset, y_offset

actions.perform() # 執行這一連串動作

任務四

在頁面中隱藏了特殊的元素，請將滑鼠游標移至這個特殊的元素上。

<div id="hidden_box"></div>

• 透過 id 來 locate 這個元素。
• 使用 ActionChains 操作滑鼠。

把你找到的答案在 Slido 上告訴我！

更聰明的等待

• 在使用 Selenium 的時候，經常會遇到 Python 程式需要停下來，等待瀏覽器操作完成 / 變穩定，再繼續的情況。
• 簡單的作法是透過 time.sleep() 來強制程式停下來等，但這樣並不夠優雅。
• Selenium 支援語法，等待直到某個元素，或者某個事件，存在獲滿足條件。

from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

wait = WebDriverWait(browser, 5) # 建立等待的實體，5 表示最多等 5 秒
wait.until(EC.presence_of_element_located(By.TAG_NAME, "body")) # 等待到內容準備好

更多 Selenium 的功能

今天介紹的僅是冰山一角，有興趣可以到 官方網站、官方文件 查詢更多使用方式。

• Javascript 腳本執行
• 截圖、上傳檔案、下載檔案
• 操作多個分頁、無痕視窗
• 模擬不同裝置、不同地理位置、網路連線品質
• Record & Replay
• ...