Mcp Puppeteer Advanced

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

📚 详细文档

快速上手指南

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
   

分步教程

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