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

⚠️ 重要提示

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