Puppeteer Plus Martech MCP

🚀 Puppeteer項目

Puppeteer 是由 Google 開發的 Node.js 庫，用於控制瀏覽器，支持 Chromium 和 Chrome。它能助力開發者自動化執行任務，如抓取網頁、生成截圖和視頻，還能進行性能分析。該工具尤其適用於需要與現代 JavaScript 前端框架（如 AngularJS 或 React）交互的應用程序測試。

🚀 快速開始

創建基本項目

創建一個新的 Node.js 項目：

mkdir my-puppeteer-project && cd my-puppeteer-project
npm init -y

安裝 Puppeteer：

npm install puppeteer

編寫第一個腳本

在 index.js 文件中添加以下代碼：

const puppeteer = require('puppeteer');

async function main() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({ path: 'example.png', format: 'png' });
  await browser.close();
}

main().catch(console.error);

運行腳本：

node index.js

✨ 主要特性

• API 調試：支持通過 Chrome 的調試協議進行通信。
• DOM 操作：提供對 DOM 元素的操作能力，包括查詢、點擊和輸入等。
• 頁面動作：能夠執行導航、頁面刷新以及關閉標籤頁等操作。
• 文件交互：支持讀取本地文件內容並將其注入到新頁面中。
• 截圖與錄屏：可以生成網頁的截圖或錄屏視頻。

📦 安裝指南

npm install puppeteer

💻 使用示例

基礎用法

const puppeteer = require('puppeteer');

async function main() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({ path: 'example.png', format: 'png' });
  await browser.close();
}

main().catch(console.error);

高級用法

導航與頁面操作

const puppeteer = require('puppeteer');

async function navigateExample() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  console.log(await page.title());
  await page.goBack();
  await page.goForward();
  await browser.close();
}
navigateExample().catch(console.error);

DOM 操作

const puppeteer = require('puppeteer');

async function domManipulation() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  
  // 獲取元素
  const element = await page.$('#element-id');
  console.log(await element.getPropertyValue('textContent'));
  
  // 模擬點擊
  await element.click();
  
  // 輸入文本
  const input = await page.$('input[type="text"]');
  await input.type('測試輸入');
  
  await browser.close();
}
domManipulation().catch(console.error);

截圖與錄屏

const puppeteer = require('puppeteer');

async function screenshotExample() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  
  // 截取整個頁面
  await page.screenshot({ path: 'full-page.png', format: 'png' });
  
  // 截取可見區域
  await page.screenshot({ path: 'visible-area.png', clip: { x: 0, y: 0, width: 1920, height: 1080 } });
  
  // 錄製視頻
  await page.startRecordingVideo({ path: 'video.mp4' });
  await page.waitForNavigation();
  await page.stopRecordingVideo();
  
  await browser.close();
}
screenshotExample().catch(console.error);

📚 詳細文檔

實際應用

網頁抓取

const puppeteer = require('puppeteer');

async function webScraping() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  // 遍歷多個頁面
  for (let i = 1; i <= 5; i++) {
    await page.goto(`https://example.com?page=${i}`);
    const content = await page.textContent('.content');
    console.log(`第 ${i} 頁內容: ${content}`);
  }
  
  await browser.close();
}
webScraping().catch(console.error);

自動化表單提交

const puppeteer = require('puppeteer');

async function formAutomation() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com/form');
  
  // 填寫表單
  await page.type('#username', '測試用戶');
  await page.type('#password', '測試密碼');
  await page.click('button[type="submit"]');
  
  console.log('表單已提交成功!');
  
  await browser.close();
}
formAutomation().catch(console.error);

高級主題

處理異步 JavaScript

const puppeteer = require('puppeteer');

async function handleAsyncJs() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com/async');
  
  // 使用 page.waitFor 來等待特定條件
  await page.waitFor(() => {
    return document.querySelectorAll('.loaded').length > 0;
  });
  
  console.log('頁面已加載完成!');
  
  await browser.close();
}
handleAsyncJs().catch(console.error);

處理模態對話框

const puppeteer = require('puppeteer');

async function handleModals() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com/modal');
  
  // 監聽對話框事件
  page.on('dialog', dialog => {
    console.log('檢測到對話框:', dialog.message());
    dialog.accept();
  });
  
  await page.click('#open-modal');
  
  await browser.close();
}
handleModals().catch(console.error);

最佳實踐

1. 處理多個標籤頁：通過 browser.newPage() 創建新標籤頁來避免干擾。
2. 使用等待方法：始終在執行異步操作前使用 page.waitFor 來確保元素加載完成。
3. 清理資源：記得關閉瀏覽器實例以釋放系統資源。

項目示例

示例 1: 簡單網頁截圖

const puppeteer = require('puppeteer');

async function simpleScreenshot() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  
  await page.screenshot({ path: 'example-site.png' });
  
  await browser.close();
}
simpleScreenshot().catch(console.error);

示例 2: 自動化表格數據抓取

const puppeteer = require('puppeteer');

async function tableScraping() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  for (let i = 1; i <= 3; i++) {
    await page.goto(`https://example.com/table?page=${i}`);
    
    // 獲取所有表格行
    const rows = await page.querySelectorAll('tr');
    
    for (const row of rows) {
      console.log(await row.textContent());
    }
  }
  
  await browser.close();
}
tableScraping().catch(console.error);

總結

Puppeteer 是一個功能強大的工具，適用於各種瀏覽器自動化任務。通過其提供的豐富 API，開發者可以輕鬆實現網頁抓取、表單提交和頁面操作等複雜功能。掌握 Puppeteer 的使用方法將大大提升開發效率。

⚠️ 重要提示

在實際應用中，請遵守相關法律法規和網站的使用條款，避免進行非法或侵入性的網絡爬取行為。