MCP Puppeteer Advanced

🚀 Puppeteer項目

Puppeteer 是一個強大的工具集合，可用於控制和截取瀏覽器屏幕。它提供了豐富的 API，能夠管理瀏覽器行為、進行 DOM 操作以及處理網絡請求等。藉助 Puppeteer，開發者能輕鬆開展自動化測試、頁面抓取、生成截圖和 PDF 等工作。

🚀 快速開始

Puppeteer 是一個用於控制和截取瀏覽器屏幕的工具集合，能幫助開發者完成自動化測試、頁面抓取等操作。以下是使用 Puppeteer 的基本步驟：

1. 安裝 Puppeteer：

   npm install puppeteer --save-dev
   

2. 編寫第一個腳本：

   const puppeteer = require('puppeteer');
   
   async function main() {
     const browser = await puppeteer.launch();
     const page = await browser.newPage();
   
     // 導航至指定頁面
     await page.goto('http://example.com');
     
     // 截取屏幕並保存為圖片
     await page.screenshot({ path: 'example.png', format: 'png' });
   
     // 關閉瀏覽器實例
     await browser.close();
   }
   
   main().catch(console.error);
   

3. 運行腳本：

   node yourscript.js
   

✨ 主要特性

• Browser 和 Page 對象：分別對應瀏覽器實例和當前正在使用的頁面。
• 導航與監聽頁面加載狀態：支持基本的導航操作，並提供監聽頁面加載完成的接口。
• DOM 操作：允許開發者直接操作 DOM，包括元素查詢、屬性修改等。
• 網絡請求管理：能夠監聽和攔截所有的網絡請求，適用於調試和數據抓取。
• 截圖與 PDF 生成：支持任意視口大小的頁面截圖，並能將整個頁面轉換為 PDF 文件。
• 模擬用戶行為：提供了一系列方法來模擬用戶的交互操作，如點擊、輸入、滑動等。
• 多線程處理：Puppeteer 的 Browser 對象運行在一個獨立的進程中，每個 Page 對象對應一個 Web 工作線程。

📦 安裝指南

使用以下命令安裝 Puppeteer：

npm install puppeteer --save-dev

💻 使用示例

基礎用法

const puppeteer = require('puppeteer');

// 啟動瀏覽器實例
async function main() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // 導航至指定頁面
  await page.goto('http://example.com');
  
  // 截取屏幕並保存為圖片
  await page.screenshot({ path: 'example.png', format: 'png' });

  // 關閉瀏覽器實例
  await browser.close();
}

main().catch(console.error);

高級用法

多線程控制

const puppeteer = require('puppeteer');

// 啟動瀏覽器實例
async function main() {
  const browser = await puppeteer.launch();
  const tabs = [];

  // 打開多個標籤頁
  for (let i = 0; i < 3; i++) {
    tabs.push(await browser.newPage());
  }

  // 在不同線程中執行不同的任務
  const promiseArray = [];
  for (const tab of tabs) {
    promiseArray.push(
      tab.goto(`http://example.com/page${i}`)
        .then(() => tab.title())
    );
  }
  
  // 等待所有 Promise 完成
  const results = await Promise.all(promiseArray);
  console.log(results);

  // 關閉所有標籤頁和瀏覽器實例
  await tabs.forEach(tab => tab.close());
  await browser.close();
}

main().catch(console.error);

模擬用戶行為

const puppeteer = require('puppeteer');

// 啟動瀏覽器實例並打開頁面
async function main() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // 模擬用戶輸入和點擊操作
  await page.type('#username', 'user');
  await page.type('#password', 'pass');
  await page.click('button[type="submit"]');
  
  // 等待頁面加載完成
  await page.waitForNavigation();
  
  // 截取提交後的頁面截圖
  await page.screenshot({ path: 'submitscreenshot.png', format: 'png' });

  // 關閉瀏覽器實例
  await browser.close();
}

main().catch(console.error);

📚 詳細文檔

分步教程

第一步：安裝 Puppeteer

確保你已經安裝了 Node.js 和 npm。然後運行以下命令安裝 Puppeteer：

npm install puppeteer --save-dev

第二步：啟動瀏覽器實例

在你的 JavaScript 文件中引入 Puppeteer 並初始化瀏覽器實例：

const puppeteer = require('puppeteer');

async function main() {
  const browser = await puppeteer.launch();
}
main().catch(console.error);

第三步：創建新頁面標籤頁

使用瀏覽器實例創建一個新的頁面標籤頁：

async function main() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
}
main().catch(console.error);