Skip to content

Instantly share code, notes, and snippets.

@tboydar

tboydar/n8n網頁自動化指南_20250720.md

Last active July 20, 2025 05:30
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tboydar/46630e99fc8cccf7f6b86fefab2160c7 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tboydar/46630e99fc8cccf7f6b86fefab2160c7 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. tboydar renamed this gist Jul 20, 2025. 1 changed file with 0 additions and 0 deletions.
    0 n8n網頁自動化指南_20250120.md → n8n網頁自動化指南_202507201.md
    View file
    File renamed without changes.
  2. tboydar revised this gist Jul 20, 2025. No changes.
  3. tboydar revised this gist Jul 20, 2025. 1 changed file with 465 additions and 0 deletions.
    465 changes: 465 additions & 0 deletions n8n網頁自動化指南_20250120.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,465 @@
    # n8n 網頁自動化完整指南 - 登錄與按鈕點擊自動化

    > **版權聲明：** 本指南基於公開資源整理編寫，僅供學習交流使用
    > **作者：** 技術分享整理
    > **最後更新：** 2025年1月20日
    > **授權：** [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/)
    ## ⚠️ 重要聲明

    1. **版權尊重**：本指南內容整理自公開資源，使用時請遵守各項目的原始授權條款
    2. **免責聲明**：使用自動化工具時請遵守目標網站的使用條款和 robots.txt 規則
    3. **合規提醒**：任何自動化操作應符合當地法律法規和網站服務條款
    4. **學習用途**：本指南僅供技術學習和交流，不鼓勵任何違法或不當使用

    ## 系統架構圖

    ```mermaid
    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
    ```

    ## 工作流程圖

    ```mermaid
    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: 完成通知
    ```

    ## 主要自動化方案比較

    ### 1. Playwright 社群節點 (推薦)

    > **來源：** [toema/n8n-playwright](https://github.com/toema/n8n-playwright)
    > **授權：** 請參考原項目授權條款
    **優點：**
    - 功能完整，支援多瀏覽器 (Chromium, Firefox, WebKit)
    - 穩定性高，處理複雜互動能力強
    - 社群活躍，文檔完整
    - 支援反爬蟲檢測規避

    **缺點：**
    - 需要安裝額外套件 (~1GB)
    - 資源消耗較高

    **安裝方式：**
    ```bash
    # 在 n8n 中安裝社群節點
    npm install n8n-nodes-playwright
    ```

    **基本使用範例：**
    ```javascript
    // 自動登錄範例 - 基於 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 整合

    > **來源：** [n8n Browserless 整合文檔](https://n8n.io/integrations/browserless/)
    > **服務提供商：** Browserless.io
    **優點：**
    - 雲端服務，無需本地安裝
    - API 接口簡單易用
    - 支援截圖、PDF 生成
    - 可處理驗證碼

    **缺點：**
    - 需要付費服務（或自架）
    - 自定義程度較低

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

    ### 3. Code 節點 + 自定義腳本

    > **來源：** [n8n Code 節點文檔](https://docs.n8n.io/integrations/builtin/core-nodes/n8n-nodes-base.code/)
    **優點：**
    - 完全客製化
    - 可整合任何 JavaScript/Python 函式庫
    - 靈活度最高

    **缺點：**
    - 需要程式設計技能
    - 維護成本較高
    - 錯誤處理複雜

    ## 實作教學

    ### 場景一：自動登錄網站

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

    **Playwright 節點設定：**
    ```javascript
    // 基於 Playwright 官方 API 文檔的範例
    // 導航到登錄頁面
    await page.goto('https://example.com/login');

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

    // 填入登錄資訊 - 使用 n8n 表達式語法
    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 };
    ```

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

    ```javascript
    // 範例來源：Playwright 官方文檔 - Form 處理
    // 填寫表單
    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

    ```javascript
    // 基於 Playwright 動態內容處理最佳實踐
    // 點擊載入更多按鈕
    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 };
    ```

    ## 最佳實踐建議

    > **參考來源：** [Playwright 最佳實踐指南](https://playwright.dev/docs/best-practices)
    ### 1. 錯誤處理
    ```javascript
    // 基於 Playwright 錯誤處理建議
    try {
    await page.waitForSelector('.target-element', { timeout: 5000 });
    await page.click('.target-element');
    } catch (error) {
    console.log('元素未找到，使用備用方案');
    await page.click('.alternative-element');
    }
    ```

    ### 2. 等待策略
    ```javascript
    // 參考 Playwright 官方等待策略文檔
    // 等待特定元素出現
    await page.waitForSelector('.loading-complete');

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

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

    ### 3. 反爬蟲對策
    ```javascript
    // 基於網頁爬蟲常見實踐，請遵守目標網站使用條款
    // 設定用戶代理
    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. 資料擷取
    ```javascript
    // 基於 DOM 操作最佳實踐
    // 擷取表格資料
    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: 元素找不到或點擊失效
    **解決方案：**
    - 使用更精確的選擇器
    - 增加等待時間
    - 檢查元素是否被其他元素遮擋

    ```javascript
    // 基於 Playwright 選擇器最佳實踐
    // 使用多種選擇器策略
    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: 頁面載入過慢
    **解決方案：**
    - 調整超時設定
    - 禁用圖片載入以提升速度
    - 使用無頭模式

    ```javascript
    // 基於 Playwright 效能優化建議
    // 禁用圖片載入
    await page.route('**/*.{png,jpg,jpeg,gif}', route => route.abort());

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

    ## 進階技巧

    ### 1. 多頁面操作
    ```javascript
    // 基於 Playwright 多頁面處理文檔
    // 開啟新分頁
    const newPage = await context.newPage();
    await newPage.goto('https://another-site.com');

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

    ### 2. 文件下載處理
    ```javascript
    // 參考 Playwright 文件下載處理指南
    // 監聽下載事件
    const downloadPromise = page.waitForEvent('download');
    await page.click('.download-link');
    const download = await downloadPromise;

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

    ### 3. Cookie 和 Session 管理
    ```javascript
    // 基於 Playwright 認證處理文檔
    // 儲存 Cookie
    const cookies = await page.context().cookies();
    // 將 cookies 傳遞給下個節點

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

    ## 成本效益分析

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

    ## 安全注意事項

    1. **敏感資訊保護**
    - 使用 n8n 的憑證管理系統
    - 避免在工作流程中硬編碼密碼

    2. **合規性考量**
    - 遵守網站使用條款
    - 尊重 robots.txt 規則
    - 避免過度頻繁請求

    3. **錯誤日誌管理**
    - 避免在日誌中記錄敏感資訊
    - 定期清理操作記錄

    ## 法律與道德考量

    ⚠️ **重要提醒：**
    - 使用自動化工具前，請詳細閱讀目標網站的使用條款
    - 遵守當地法律法規和網站的 robots.txt 規則
    - 避免對網站服務造成過度負載
    - 尊重網站所有者的權益和知識產權
    - 不得用於惡意攻擊、數據竊取或其他非法目的

    ## 總結

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

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

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

    ---

    ## 📚 參考資源與來源

    ### 官方文檔
    - [n8n 官方文檔](https://docs.n8n.io/) - n8n.io (Apache 2.0 License)
    - [Playwright 官方文檔](https://playwright.dev/) - Microsoft (Apache 2.0 License)
    - [n8n GitHub 倉庫](https://github.com/n8n-io/n8n) - n8n.io (Sustainable Use License)

    ### 社群節點
    - [toema/n8n-playwright](https://github.com/toema/n8n-playwright) - toema (請查看項目授權)
    - [digitalchild/n8n-playwright-scripts](https://github.com/digitalchild/n8n-playwright-scripts) - digitalchild (請查看項目授權)

    ### 服務整合
    - [n8n Browserless 整合](https://n8n.io/integrations/browserless/) - n8n.io
    - [Browserless.io](https://www.browserless.io/) - Browserless Inc.

    ### 社群資源
    - [n8n 社群論壇](https://community.n8n.io/) - n8n Community
    - [n8n 工作流程模板](https://n8n.io/workflows/) - n8n.io

    ### 技術文章
    - [Daniel Raffel's Blog - n8n + Browserless](https://danielraffel.me/til/2024/09/12/how-to-streamline-your-web-tasks-by-integrating-browserless-playwright-and-changedetection-io-with-n8n/) - Daniel Raffel
    - [switowski.com - Web Automation](https://switowski.com/blog/web-automation/) - Sebastian Witowski

    ---

    **版權聲明：**
    - 本指南採用 [Creative Commons Attribution-ShareAlike 4.0 International License](https://creativecommons.org/licenses/by-sa/4.0/) 授權
    - 所有程式碼範例基於相應項目的原始授權條款
    - 使用時請遵守各參考資源的原始授權要求
    - 如有版權疑慮，請聯繫作者進行修正

    *文檔編制：技術社群貢獻者 | 最後更新：2025年1月20日*
  4. tboydar revised this gist Jul 20, 2025. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion n8n網頁自動化指南_20250720.md
    View file
    Original file line number Diff line number Diff line change
    @@ -394,4 +394,4 @@ n8n 的網頁自動化功能強大且靈活，可以滿足從簡單的表單填
    - [Browserless 整合](https://n8n.io/integrations/browserless/)
    - [n8n 社群論壇](https://community.n8n.io/)

    *最後更新：2025年1月*
    *最後更新：2025年7月*
  5. tboydar renamed this gist Jul 20, 2025. 1 changed file with 0 additions and 0 deletions.
    0 n8n網頁自動化指南_20250120.md → n8n網頁自動化指南_20250720.md
    View file
    File renamed without changes.
  6. tboydar created this gist Jul 20, 2025.
    397 changes: 397 additions & 0 deletions n8n網頁自動化指南_20250120.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,397 @@
    # n8n 網頁自動化完整指南 - 登錄與按鈕點擊自動化

    ## 系統架構圖

    ```mermaid
    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
    ```

    ## 工作流程圖

    ```mermaid
    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: 完成通知
    ```

    ## 主要自動化方案比較

    ### 1. Playwright 社群節點 (推薦)

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

    **缺點：**
    - 需要安裝額外套件 (~1GB)
    - 資源消耗較高

    **安裝方式：**
    ```bash
    # 在 n8n 中安裝社群節點
    npm install n8n-nodes-playwright
    ```

    **基本使用範例：**
    ```javascript
    // 自動登錄範例
    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 函式庫
    - 靈活度最高

    **缺點：**
    - 需要程式設計技能
    - 維護成本較高
    - 錯誤處理複雜

    ## 實作教學

    ### 場景一：自動登錄網站

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

    **Playwright 節點設定：**
    ```javascript
    // 導航到登錄頁面
    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 };
    ```

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

    ```javascript
    // 填寫表單
    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

    ```javascript
    // 點擊載入更多按鈕
    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. 錯誤處理
    ```javascript
    try {
    await page.waitForSelector('.target-element', { timeout: 5000 });
    await page.click('.target-element');
    } catch (error) {
    console.log('元素未找到，使用備用方案');
    await page.click('.alternative-element');
    }
    ```

    ### 2. 等待策略
    ```javascript
    // 等待特定元素出現
    await page.waitForSelector('.loading-complete');

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

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

    ### 3. 反爬蟲對策
    ```javascript
    // 設定用戶代理
    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. 資料擷取
    ```javascript
    // 擷取表格資料
    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: 元素找不到或點擊失效
    **解決方案：**
    - 使用更精確的選擇器
    - 增加等待時間
    - 檢查元素是否被其他元素遮擋

    ```javascript
    // 使用多種選擇器策略
    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: 頁面載入過慢
    **解決方案：**
    - 調整超時設定
    - 禁用圖片載入以提升速度
    - 使用無頭模式

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

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

    ## 進階技巧

    ### 1. 多頁面操作
    ```javascript
    // 開啟新分頁
    const newPage = await context.newPage();
    await newPage.goto('https://another-site.com');

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

    ### 2. 文件下載處理
    ```javascript
    // 監聽下載事件
    const downloadPromise = page.waitForEvent('download');
    await page.click('.download-link');
    const download = await downloadPromise;

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

    ### 3. Cookie 和 Session 管理
    ```javascript
    // 儲存 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 官方文檔](https://docs.n8n.io/)
    - [Playwright 社群節點](https://github.com/toema/n8n-playwright)
    - [Browserless 整合](https://n8n.io/integrations/browserless/)
    - [n8n 社群論壇](https://community.n8n.io/)

    *最後更新：2025年1月*