爬蟲如何向網頁搜尋框注入值？三大主流方案：原生 DOM、Puppeteer/Playwright、HTTP 直POST

爬蟲遇到「搜尋框輸入 → 點擊按鈕 → 獲取結果」流程，核心難點在於**如何將關鍵字寫入 `` 並觸發提交**。視網頁技術棧選擇方案：

方案一：無頭瀏覽器 (Puppeteer / Playwright / Selenium) — 最通用、最真實

// Puppeteer 範例
const page = await browser.newPage();
await page.goto('https://example.com/search');
await page.type('#search-input', '關鍵字', {delay: 50}); // 模擬人類輸入
await page.click('#search-btn');
await page.waitForNavigation(); // 等待結果頁載入
const html = await page.content();
// 解析 html...

• 優點：自動處理 JS 渲染、Cookie、驗證碼、動態簽名。
• 缺點：資源佔用大、啟動慢、需維護瀏覽器二進制。

方案二：HTTP 直 POST / GET — 輕量、高效、需逆向介面

1. 開啟 DevTools Network 面板，搜尋框輸入「測試」點擊搜尋。
2. 找到請求：`POST /api/search` 或 `GET /search?q=測試`。
3. 複製 Request Headers (特別是 `Content-Type`, `X-Requested-With`, `Referer`, `Cookie`)。
4. 代碼直接發請求：

import requests
resp = requests.post('https://example.com/api/search',
    headers={'User-Agent': '...', 'Cookie': '...', 'Content-Type': 'application/json'},
    json={'keyword': '關鍵字', 'page': 1})
data = resp.json()

• 優點：極快、無瀏覽器開銷、易分散式擴展。
• 缺點：需處理加密參數、簽名算法、動態 Token、反爬風控。

方案三：原生 DOM 注入 (僅適用靜態頁、無 SPA) — 簡單但脆弱

// 在瀏覽器 Console 或 Selenium execute_script
document.getElementById('search-input').value = '關鍵字';
// 手動觸發事件，否則 Vue/React 雙向綁定不更新
document.getElementById('search-input').dispatchEvent(new Event('input', {bubbles: true}));
document.getElementById('search-form').submit();

選型建議

核心心法：**能用 API 就別用瀏覽器，能用瀏覽器就別手工注入 DOM。**