Puppeteer浏览器自动化2025实战指南：网页爬取、截图与测试全攻略

// 页面导航与元素交互示例
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');

// 表单填写与提交
await page.locator('input[name="username"]').fill('testuser');
await page.locator('input[name="password"]').fill('password123');
await page.locator('button[type="submit"]').click();

await browser.close();

// 高质量网页截图
await page.screenshot({
  path: 'page.png',
  fullPage: true,
  quality: 100
});

// 生成PDF文档
await page.pdf({
  path: 'document.pdf',
  format: 'A4',
  printBackground: true
});

// 拦截网络请求
await page.route('**/*.png', route => {
  route.fulfill({
    status: 200,
    body: 'dummy image content'
  });
});

// 模拟API响应
await page.route('**/api/data', route => {
  route.fulfill({
    status: 200,
    contentType: 'application/json',
    body: JSON.stringify({ mock: 'data' })
  });
});

// 自定义无头浏览器配置
const browser = await puppeteer.launch({
  headless: 'new', // 启用新的无头模式
  args: [
    '--no-sandbox',
    '--disable-setuid-sandbox',
    '--disable-dev-shm-usage'
  ]
});

// 前端功能测试示例
test('页面加载后显示正确标题', async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://my-app.com');
  
  const title = await page.title();
  expect(title).toBe('我的应用 - 首页');
  
  await browser.close();
});

// 电商网站数据采集
async function scrapeProductData(url) {
  const page = await browser.newPage();
  await page.goto(url);
  
  return await page.evaluate(() => {
    return {
      title: document.querySelector('h1.product-title').textContent,
      price: document.querySelector('span.price').textContent,
      ratings: document.querySelector('div.ratings').textContent
    };
  });
}

// 生成每周销售报告
async function generateSalesReport() {
  const page = await browser.newPage();
  await page.goto('https://dashboard.example.com/sales');
  
  // 等待图表加载完成
  await page.waitForSelector('.chart-loaded');
  
  // 截取报告页面
  await page.screenshot({ path: 'weekly-sales.png', fullPage: true });
  
  // 生成PDF报告
  await page.pdf({ path: 'weekly-sales-report.pdf' });
}

// 性能监控示例
const metrics = await page.metrics();
console.log('页面加载时间:', metrics.Timestamp);

// 捕获性能跟踪
await page.tracing.start({ path: 'performance.json' });
// 执行用户操作
await page.click('#load-more');
await page.waitForNetworkIdle();
await page.tracing.stop();

## 标准安装（包含Chrome）
npm install puppeteer

## 核心库安装（自行提供浏览器）
npm install puppeteer-core

import puppeteer from 'puppeteer';

async function basicBrowserAutomation() {
  // 启动浏览器
  const browser = await puppeteer.launch({
    headless: 'new', // 推荐使用新的无头模式
    slowMo: 100, // 慢动作执行，便于调试
    devtools: false // 是否打开开发者工具
  });
  
  // 创建新页面
  const page = await browser.newPage();
  
  // 设置视口大小
  await page.setViewport({ width: 1920, height: 1080 });
  
  // 导航到目标网站
  await page.goto('https://example.com', {
    waitUntil: 'networkidle2' // 等待网络空闲
  });
  
  // 执行操作...
  
  // 关闭浏览器
  await browser.close();
}

// 自定义用户代理和请求头
await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36');

// 设置额外HTTP头
await page.setExtraHTTPHeaders({
  'Accept-Language': 'zh-CN,zh;q=0.9,en;q=0.8'
});

// 并行处理多个URL
async function processUrlsInParallel(urls) {
  const browser = await puppeteer.launch();
  const pages = await Promise.all(
    urls.map(url => browser.newPage().then(page => {
      return { page, url };
    }))
  );
  
  // 并行导航到各个URL
  await Promise.all(
    pages.map(({ page, url }) => page.goto(url))
  );
  
  // 处理页面数据...
  
  await browser.close();
}

## 安装特定版本的Puppeteer以匹配Chrome版本
npm install puppeteer@19.7.2 # 对应Chrome 111.x

// 资源优化配置
const browser = await puppeteer.launch({
  headless: 'new',
  args: [
    '--disable-gpu',
    '--disable-dev-shm-usage',
    '--disable-extensions',
    '--no-zygote',
    '--single-process'
  ]
});

// 模拟真实用户行为
async function simulateHumanBehavior(page) {
  // 随机等待时间
  await page.waitForTimeout(Math.random() * 2000 + 1000);
  
  // 模拟鼠标移动
  await page.mouse.move(
    Math.random() * 100, 
    Math.random() * 100
  );
  
  // 随机滚动页面
  await page.evaluate(() => {
    window.scrollBy(0, Math.random() * 300);
  });
}