MCP Puppeteer Advanced

🚀 Puppeteer

Puppeteerは、ブラウザを制御し、画面をキャプチャするためのツールセットです。豊富なAPIを提供し、ブラウザの動作管理、DOM操作、ネットワークリクエストの管理などを行うことができます。開発者は、Puppeteerを使用して自動化テスト、ページのスクレイピング、スクリーンショットやPDFの生成などの操作を簡単に行うことができます。

🚀 クイックスタート

Puppeteerは、ブラウザを制御し、画面をキャプチャするためのツールセットです。以下に、基本的な使い方を説明します。

✨ 主な機能

• BrowserとPageオブジェクト：それぞれブラウザインスタンスと現在使用中のページに対応します。
• ナビゲーションとページの読み込み状態の監視：基本的なナビゲーション操作をサポートし、ページの読み込み完了を監視するインターフェースを提供します。
• DOM操作：開発者が直接DOMを操作でき、要素のクエリ、属性の変更などが可能です。
• ネットワークリクエスト管理：すべてのネットワークリクエストを監視およびインターセプトでき、デバッグやデータのスクレイピングに適しています。
• スクリーンショットとPDF生成：任意のビューポートサイズのページのスクリーンショットをサポートし、ページ全体をPDFファイルに変換できます。
• ユーザー行動のシミュレーション：クリック、入力、スクロールなどのユーザーのインタラクション操作をシミュレートする一連のメソッドを提供します。
• マルチスレッド処理：PuppeteerのBrowserオブジェクトは独立したプロセスで動作し、各PageオブジェクトはWebワーカースレッドに対応します。

📦 インストール

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);

📚 ドキュメント

クイックスタートガイド

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
   

ステップバイステップチュートリアル

ステップ1：Puppeteerのインストール

Node.jsとnpmがインストールされていることを確認してください。次に、以下のコマンドを実行してPuppeteerをインストールします。

npm install puppeteer --save-dev

ステップ2：ブラウザインスタンスを起動する

JavaScriptファイルにPuppeteerをインポートし、ブラウザインスタンスを初期化します。

const puppeteer = require('puppeteer');

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

ステップ3：新しいページタブを作成する

ブラウザインスタンスを使用して新しいページタブを作成します。

async function main() {
  const browser = await puppeteer.launch();
  // 以下省略...
}