n8n 網頁自動化完整指南 - 登錄與按鈕點擊自動化

系統架構圖

graph TB
    A[n8n 工作流程] --> B{選擇自動化方案}
    
    B --> C[Playwright 社群節點]
    B --> D[Browserless 整合]
    B --> E[HTTP Request + 外部服務]
    B --> F[Code 節點 + 自定義腳本]
    
    C --> C1[瀏覽器控制]
    C --> C2[元素互動]
    C --> C3[資料擷取]
    
    D --> D1[無頭瀏覽器]
    D --> D2[截圖/PDF生成]
    D --> D3[內容抓取]
    
    E --> E1[API 呼叫]
    E --> E2[第三方服務]
    E --> E3[Webhook 整合]
    
    F --> F1[JavaScript/Python]
    F --> F2[自定義邏輯]
    F --> F3[複雜操作]
    
    C1 --> G[執行自動化任務]
    C2 --> G
    C3 --> G
    D1 --> G
    D2 --> G
    D3 --> G
    E1 --> G
    E2 --> G
    E3 --> G
    F1 --> G
    F2 --> G
    F3 --> G
    
    G --> H[結果處理]
    H --> I[後續動作]
    
    style A fill:#e1f5fe
    style G fill:#f3e5f5
    style H fill:#e8f5e8

Loading

工作流程圖

sequenceDiagram
    participant U as 使用者
    participant N as n8n 工作流程
    participant B as 瀏覽器自動化
    participant W as 目標網站
    participant S as 儲存/通知服務
    
    U->>N: 觸發工作流程
    N->>B: 啟動瀏覽器實例
    B->>W: 導航到目標網站
    
    alt 需要登錄
        B->>W: 填入登錄資訊
        W->>B: 認證回應
        B->>W: 點擊登錄按鈕
        W->>B: 登錄成功
    end
    
    B->>W: 執行自動化任務
    loop 重複操作
        B->>W: 點擊按鈕/填寫表單
        W->>B: 頁面更新
        B->>B: 等待元素載入
    end
    
    B->>N: 回傳結果資料
    N->>S: 儲存資料或發送通知
    S->>U: 完成通知

Loading

主要自動化方案比較

1. Playwright 社群節點 (推薦)

優點：

• 功能完整，支援多瀏覽器 (Chromium, Firefox, WebKit)
• 穩定性高，處理複雜互動能力強
• 社群活躍，文檔完整
• 支援反爬蟲檢測規避

缺點：

• 需要安裝額外套件 (~1GB)
• 資源消耗較高

安裝方式：

# 在 n8n 中安裝社群節點
npm install n8n-nodes-playwright

基本使用範例：

// 自動登錄範例
await page.goto('https://example.com/login');
await page.fill('input[name="username"]', 'your_username');
await page.fill('input[name="password"]', 'your_password');
await page.click('button[type="submit"]');
await page.waitForNavigation();

2. Browserless 整合

優點：

• 雲端服務，無需本地安裝
• API 接口簡單易用
• 支援截圖、PDF 生成
• 可處理驗證碼

缺點：

• 需要付費服務（或自架）
• 自定義程度較低

設定步驟：

1. 註冊 Browserless 帳號
2. 在 n8n 中設定 Header Auth 認證
3. 使用 HTTP Request 節點呼叫 API

3. Code 節點 + 自定義腳本

優點：

• 完全客製化
• 可整合任何 JavaScript/Python 函式庫
• 靈活度最高

缺點：

• 需要程式設計技能
• 維護成本較高
• 錯誤處理複雜

實作教學

場景一：自動登錄網站

flowchart LR
    A[觸發器] --> B[Playwright 節點]
    B --> C[導航到登錄頁]
    C --> D[填入帳號密碼]
    D --> E[點擊登錄按鈕]
    E --> F[等待頁面載入]
    F --> G[驗證登錄成功]
    G --> H[執行後續操作]
    H --> I[結束]

Loading

Playwright 節點設定：

// 導航到登錄頁面
await page.goto('https://example.com/login');

// 等待頁面載入
await page.waitForSelector('input[name="username"]');

// 填入登錄資訊
await page.fill('input[name="username"]', '{{ $json.username }}');
await page.fill('input[name="password"]', '{{ $json.password }}');

// 點擊登錄按鈕
await page.click('button[type="submit"]');

// 等待登錄完成
await page.waitForURL('**/dashboard');

// 驗證登錄成功
const isLoggedIn = await page.locator('.user-profile').isVisible();
return { success: isLoggedIn };

場景二：自動填寫表單並提交

// 填寫表單
await page.fill('#name', '{{ $json.name }}');
await page.fill('#email', '{{ $json.email }}');
await page.selectOption('#country', '{{ $json.country }}');

// 勾選同意條款
await page.check('#agree-terms');

// 提交表單
await page.click('#submit-btn');

// 等待提交確認
await page.waitForSelector('.success-message');

場景三：處理動態內容和 AJAX

// 點擊載入更多按鈕
await page.click('.load-more');

// 等待新內容載入
await page.waitForFunction(() => {
    return document.querySelectorAll('.item').length > 10;
});

// 擷取動態載入的內容
const items = await page.$$eval('.item', items => 
    items.map(item => ({
        title: item.querySelector('.title').textContent,
        link: item.querySelector('a').href
    }))
);

return { items };

最佳實踐建議

1. 錯誤處理

try {
    await page.waitForSelector('.target-element', { timeout: 5000 });
    await page.click('.target-element');
} catch (error) {
    console.log('元素未找到，使用備用方案');
    await page.click('.alternative-element');
}

2. 等待策略

// 等待特定元素出現
await page.waitForSelector('.loading-complete');

// 等待網路請求完成
await page.waitForLoadState('networkidle');

// 等待自定義條件
await page.waitForFunction(() => window.dataLoaded === true);

3. 反爬蟲對策

// 設定用戶代理
await page.setExtraHTTPHeaders({
    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36'
});

// 隨機延遲
await page.waitForTimeout(Math.random() * 2000 + 1000);

// 模擬人類行為
await page.hover('.element');
await page.waitForTimeout(500);
await page.click('.element');

4. 資料擷取

// 擷取表格資料
const tableData = await page.$$eval('table tr', rows => 
    rows.map(row => {
        const cells = row.querySelectorAll('td');
        return Array.from(cells).map(cell => cell.textContent.trim());
    })
);

// 擷取圖片連結
const images = await page.$$eval('img', imgs => 
    imgs.map(img => ({
        src: img.src,
        alt: img.alt
    }))
);

常見問題解決

Q1: 元素找不到或點擊失效

解決方案：

• 使用更精確的選擇器
• 增加等待時間
• 檢查元素是否被其他元素遮擋

// 使用多種選擇器策略
const element = await page.locator('button:has-text("提交")').or(
    page.locator('#submit-btn')
).or(
    page.locator('.submit-button')
);

await element.click();

Q2: 處理驗證碼

解決方案：

• 使用 Browserless 的驗證碼解決 API
• 整合第三方驗證碼識別服務
• 實作手動介入機制

Q3: 頁面載入過慢

解決方案：

• 調整超時設定
• 禁用圖片載入以提升速度
• 使用無頭模式

// 禁用圖片載入
await page.route('**/*.{png,jpg,jpeg,gif}', route => route.abort());

// 設定全域超時
page.setDefaultTimeout(30000);

進階技巧

1. 多頁面操作

// 開啟新分頁
const newPage = await context.newPage();
await newPage.goto('https://another-site.com');

// 在分頁間切換操作
await page.bringToFront();
await newPage.bringToFront();

2. 文件下載處理

// 監聽下載事件
const downloadPromise = page.waitForEvent('download');
await page.click('.download-link');
const download = await downloadPromise;

// 儲存文件
await download.saveAs('./downloads/' + download.suggestedFilename());

3. Cookie 和 Session 管理

// 儲存 Cookie
const cookies = await page.context().cookies();
// 將 cookies 傳遞給下個節點

// 載入 Cookie
await page.context().addCookies(savedCookies);

成本效益分析

方案	初始成本	維護成本	技術門檻	適用場景
Playwright 節點	低	中	中	複雜自動化
Browserless	中	低	低	簡單任務
自定義腳本	低	高	高	特殊需求

安全注意事項

1. 敏感資訊保護

   • 使用 n8n 的憑證管理系統
   • 避免在工作流程中硬編碼密碼

2. 合規性考量

   • 遵守網站使用條款
   • 尊重 robots.txt 規則
   • 避免過度頻繁請求

3. 錯誤日誌管理

   • 避免在日誌中記錄敏感資訊
   • 定期清理操作記錄

總結

n8n 的網頁自動化功能強大且靈活，可以滿足從簡單的表單填寫到複雜的多步驟操作需求。選擇合適的方案取決於：

• 技術需求複雜度
• 預算考量
• 維護能力
• 合規要求

建議新手從 Playwright 社群節點開始，逐步熟悉後再根據具體需求選擇其他方案。

---

參考資源：

• n8n 官方文檔
• Playwright 社群節點
• Browserless 整合
• n8n 社群論壇

最後更新：2025年7月