JinDaGe - mcp-puppeteer-advanced MCP Details

article

README

🚀 Puppeteer项目

Puppeteer 是一个用于控制和截取浏览器屏幕的工具集合。它提供了丰富的 API 来管理浏览器行为、DOM 操作以及网络请求等。通过 Puppeteer，开发者可以方便地进行自动化测试、页面抓取、生成截图和 PDF 等操作。

✨ 主要特性

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

📚 详细文档

快速上手指南

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

运行脚本：
```
node yourscript.js
```

分步教程

第一步：安装 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();
}

mcp-puppeteer-advanced