🎯 專案概述

這是一個基於 Selenium WebDriver 的網頁自動化技術學習專案。透過這個專案，我深入學習了現代網頁自動化技術，掌握了瀏覽器控制、元素定位、事件處理等核心技能。

注意： 本專案僅用於技術學習和研究目的，不提供完整程式碼開源。

🛠️ 技術架構

核心技術棧

  • Python 3.9+ - 主要開發語言
  • Selenium WebDriver - 瀏覽器自動化框架
  • ChromeDriver - Chrome瀏覽器驅動
  • BeautifulSoup4 - HTML解析
  • 手動驗證碼處理 - 人工輸入驗證碼

系統架構設計

┌─────────────────┐
│   配置管理模組   │
│  - 設定檔讀取   │
│  - 參數驗證     │
└─────────────────┘
         │
         ▼
┌─────────────────┐
│   瀏覽器控制模組  │
│  - WebDriver    │
│  - 頁面載入     │
└─────────────────┘
         │
         ▼
┌─────────────────┐
│   元素定位模組   │
│  - XPath/CSS    │
│  - 元素等待     │
└─────────────────┘
         │
         ▼
┌─────────────────┐
│   事件處理模組   │
│  - 點擊事件     │
│  - 表單填寫     │
└─────────────────┘
         │
         ▼
┌─────────────────┐
│   驗證處理模組   │
│  - 手動輸入     │
│  - 安全驗證     │
└─────────────────┘
         │
         ▼
┌─────────────────┐
│   日誌記錄模組   │
│  - 操作記錄     │
│  - 錯誤處理     │
└─────────────────┘

📚 學習重點

1. Selenium WebDriver 基礎

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

# 瀏覽器初始化
from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

# 配置Chrome選項
chrome_options = webdriver.ChromeOptions()
chrome_options.add_argument('--no-sandbox')
chrome_options.add_argument('--disable-dev-shm-usage')

# 初始化WebDriver
driver = webdriver.Chrome(service=Service(chromedriver_path), options=chrome_options)

2. 元素定位技巧詳解

2.1 ID 定位（最優先使用）

1
2
3
4
5
6
7
8
9

# 優點：唯一性高，定位速度快
# 適用：有明確ID的元素
element = driver.find_element(By.ID, "username")
element = driver.find_element(By.ID, "submit-button")

# 實際範例：登入表單
username_input = driver.find_element(By.ID, "login-username")
password_input = driver.find_element(By.ID, "login-password")
login_button = driver.find_element(By.ID, "login-submit")

2.2 Name 定位

1
2
3
4
5
6
7
8

# 優點：語義化，易於理解
# 適用：表單元素
element = driver.find_element(By.NAME, "username")
element = driver.find_element(By.NAME, "email")

# 實際範例：搜尋框
search_input = driver.find_element(By.NAME, "q")
search_button = driver.find_element(By.NAME, "search")

2.3 Class Name 定位

1
2
3
4
5
6
7
8

# 優點：可定位多個相同樣式的元素
# 適用：樣式化的元素
elements = driver.find_elements(By.CLASS_NAME, "btn-primary")
element = driver.find_element(By.CLASS_NAME, "form-control")

# 實際範例：按鈕群組
primary_buttons = driver.find_elements(By.CLASS_NAME, "btn-primary")
secondary_buttons = driver.find_elements(By.CLASS_NAME, "btn-secondary")

2.4 Tag Name 定位

1
2
3
4
5
6
7
8
9

# 優點：可定位所有特定標籤
# 適用：需要遍歷所有同類元素
links = driver.find_elements(By.TAG_NAME, "a")
inputs = driver.find_elements(By.TAG_NAME, "input")

# 實際範例：獲取所有連結
all_links = driver.find_elements(By.TAG_NAME, "a")
for link in all_links:
    print(link.text)

2.5 CSS Selector 定位（推薦）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

# 優點：語法簡潔，功能強大
# 適用：複雜的選擇器需求

# 基本選擇器
element = driver.find_element(By.CSS_SELECTOR, "input[type='text']")
element = driver.find_element(By.CSS_SELECTOR, ".btn-primary")

# 組合選擇器
element = driver.find_element(By.CSS_SELECTOR, "form.login-form input[type='submit']")
element = driver.find_element(By.CSS_SELECTOR, "div.container > button.btn")

# 實際範例：複雜表單
username = driver.find_element(By.CSS_SELECTOR, "form#loginForm input[name='username']")
password = driver.find_element(By.CSS_SELECTOR, "form#loginForm input[type='password']")
submit = driver.find_element(By.CSS_SELECTOR, "form#loginForm button[type='submit']")

2.6 XPath 定位（最靈活）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 優點：功能最強大，可定位任何元素
# 適用：複雜的定位需求

# 絕對路徑
element = driver.find_element(By.XPATH, "/html/body/div[1]/form/input[1]")

# 相對路徑
element = driver.find_element(By.XPATH, "//input[@name='username']")
element = driver.find_element(By.XPATH, "//button[contains(text(),'登入')]")

# 父元素定位
element = driver.find_element(By.XPATH, "//input[@id='username']/parent::div")

# 實際範例：動態內容定位
# 定位包含特定文字的按鈕
login_button = driver.find_element(By.XPATH, "//button[contains(text(),'登入')]")

# 定位特定屬性的元素
email_input = driver.find_element(By.XPATH, "//input[@type='email']")

# 定位多個條件
submit_btn = driver.find_element(By.XPATH, "//button[@type='submit' and @class='btn-primary']")

2.7 定位策略總結

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

# 推薦的定位優先順序
def find_element_smart(driver, element_info):
    """
    智能元素定位策略
    1. ID (最快)
    2. Name (表單元素)
    3. CSS Selector (複雜選擇)
    4. XPath (最後選擇)
    """
    try:
        # 優先使用ID
        if 'id' in element_info:
            return driver.find_element(By.ID, element_info['id'])
    except:
        pass
    
    try:
        # 其次使用Name
        if 'name' in element_info:
            return driver.find_element(By.NAME, element_info['name'])
    except:
        pass
    
    try:
        # 使用CSS Selector
        if 'css' in element_info:
            return driver.find_element(By.CSS_SELECTOR, element_info['css'])
    except:
        pass
    
    # 最後使用XPath
    if 'xpath' in element_info:
        return driver.find_element(By.XPATH, element_info['xpath'])
    
    raise Exception("Element not found")

# 使用範例
element_info = {
    'id': 'username',
    'name': 'username',
    'css': 'input[name="username"]',
    'xpath': '//input[@name="username"]'
}
username_input = find_element_smart(driver, element_info)

3. 事件處理

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

# 點擊操作
element.click()

# 輸入文字
element.clear()
element.send_keys("text")

# 下拉選單處理
from selenium.webdriver.support.ui import Select
select = Select(driver.find_element(By.ID, "dropdown"))
select.select_by_value("option_value")

4. 驗證碼處理

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# 手動輸入驗證碼
def handle_captcha_manual(driver):
    """
    手動處理驗證碼
    1. 截圖驗證碼區域
    2. 暫停程式等待人工輸入
    3. 輸入驗證碼並提交
    """
    # 定位驗證碼輸入框
    captcha_input = driver.find_element(By.ID, "captcha-input")
    
    # 暫停等待人工輸入
    print("請查看驗證碼並手動輸入...")
    input("按Enter繼續...")
    
    # 獲取人工輸入的驗證碼
    captcha_text = input("請輸入驗證碼: ")
    
    # 輸入驗證碼
    captcha_input.clear()
    captcha_input.send_keys(captcha_text)
    
    return captcha_text

# 使用範例
captcha_result = handle_captcha_manual(driver)
print(f"驗證碼已輸入: {captcha_result}")

自動辨識驗證碼技術：如需了解更多關於自動驗證碼辨識技術，請聯絡 Boyce Work工作坊 了解更多。

🎨 專案特色

模組化設計

  • 配置管理：外部設定檔，易於調整參數
  • 錯誤處理：完善的異常處理機制
  • 日誌記錄：詳細的操作記錄和錯誤追蹤
  • 重試機制：智能重試，提高成功率

技術亮點

  • 智能等待：動態等待頁面元素載入
  • 元素驗證：多重驗證確保操作準確性
  • 性能優化：最小化瀏覽器資源佔用
  • 跨平台支援：Windows/Linux/macOS相容

🔧 開發心得

技術挑戰

  1. 動態元素處理：頁面元素動態載入的處理
  2. 驗證機制處理：手動驗證碼輸入的流程設計
  3. 性能優化：在速度與穩定性間找到平衡
  4. 錯誤恢復：網路異常時的智能恢復

學習收穫

  • 深入理解Web自動化技術
  • 掌握瀏覽器控制原理
  • 提升Python程式設計能力
  • 學會模組化系統設計

🚀 技術應用

可擴展的應用場景

  • 資料爬取：自動化資料收集
  • 表單填寫：批量表單處理
  • 網站測試：自動化測試腳本
  • 監控系統：網站狀態監控

進階技術方向

  • 機器學習整合：AI輔助驗證碼識別
  • 分散式架構：多執行緒並行處理
  • 雲端部署：容器化部署方案
  • API設計：RESTful API介面

⚠️ 重要聲明

本專案僅用於技術學習目的

  • 不提供完整程式碼開源
  • 不鼓勵用於商業用途
  • 請遵守相關網站的使用條款
  • 建議在測試環境中學習技術

📖 學習資源

推薦學習路徑

  1. Selenium官方文檔：掌握基礎API
  2. Python自動化實戰：實際專案練習
  3. Web技術深入：HTML/CSS/JavaScript基礎
  4. 進階自動化：機器學習整合

相關技術

  • Playwright：新一代自動化框架
  • Puppeteer：Node.js自動化方案
  • Appium：移動端自動化
  • Robot Framework：測試自動化框架

🎯 結語

這個專案讓我深入學習了現代網頁自動化技術，從基礎的Selenium操作到複雜的驗證碼處理，每一步都是寶貴的學習經驗。

技術學習的價值不在於最終的成品，而在於過程中解決問題的能力提升。

“自動化不是為了取代人工，而是為了讓技術更好地服務人類。”

標籤： #Python #Selenium #自動化 #Web技術 #學習專案