Puppeteer Plus Martech Mcp

🚀 Puppeteer项目

Puppeteer 是由 Google 开发的 Node.js 库，用于控制浏览器，支持 Chromium 和 Chrome。它能助力开发者自动化执行抓取网页、生成截图和视频、性能分析等任务。尤其适用于与现代 JavaScript 前端框架（如 AngularJS 或 React）交互的应用程序测试，开发者可直接与浏览器的 Document Object Model (DOM) 互动，借助其 API 实现各类自动化任务。

🚀 快速开始

创建基本项目

创建一个新的 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 的使用方法将大大提升开发效率。

⚠️ 重要提示

在实际应用中，请遵守相关法律法规和网站的使用条款，避免进行非法或侵入性的网络爬取行为。