UI自动化-Puppeteer

前言

Puppeteer 是一个由 Google Chrome 团队开发的 Node.js 库，它提供了一套高级 API 来控制 Chromium 或 Chrome 浏览器（通常以无头模式运行）。它通过 DevTools 协议与浏览器通信，使开发者能够以编程方式模拟用户在浏览器中的操作，实现 Web UI 自动化测试、网页截图、PDF 生成、爬虫抓取等功能。

Puppeteer 的核心特性与优势：

1. 无头浏览器控制

   • 默认以无头模式运行（无界面），节省资源且高效。

   • 可切换为有头模式（headless: false），便于调试时实时观察操作。

2. 完整的浏览器操作能力

   • 页面导航：跳转 URL、前进/后退、刷新。

   • 用户交互：点击、输入文本、拖拽、表单提交。

   • 页面内容操作：获取元素、执行 JavaScript、操作 DOM。

   • 网络控制：拦截请求、修改请求头、模拟慢速网络。

   • Cookie/存储管理：读写 Cookie、操作 LocalStorage。

3. 自动化测试友好

   • 生成页面截图（PNG/JPEG）或 PDF（适合生成报告）。

   • 录制页面操作过程（通过 tracing 记录性能数据）。

   • 支持单页面应用（SPA）的异步内容等待。

4. 与 Chrome DevTools 深度集成

   • 直接调用 DevTools 功能（如性能分析、内存监控）。

   • 支持移动端模拟（设备尺寸、User-Agent）。

基础代码示例：

@javascript

const puppeteer = require('puppeteer');

(async () => {
  // 1. 启动浏览器（无头模式）
  const browser = await puppeteer.launch();
  
  // 2. 打开新页面
  const page = await browser.newPage();
  
  // 3. 跳转到目标 URL
  await page.goto('https://example.com');
  
  // 4. 模拟用户操作：截图保存
  await page.screenshot({ path: 'example.png' });
  
  // 5. 获取页面标题
  const title = await page.title();
  console.log('Page title:', title);
  
  // 6. 关闭浏览器
  await browser.close();
})();

与 Selenium 的对比：

特性	Puppeteer	Selenium
底层协议	Chrome DevTools 协议	WebDriver 协议
支持浏览器	Chromium/Chrome（为主）	跨浏览器（Chrome, Firefox, Safari等）
执行速度	⚡️ 更快（直接通信）	较慢（通过中间驱动）
多语言支持	仅 Node.js	Java, Python, C#, JavaScript 等
无头模式	原生支持	依赖浏览器实现

适用场景建议：

• 选 Puppeteer：项目只需兼容 Chrome/Chromium、追求执行速度、需深度控制浏览器（如网络拦截）。

• 选 Selenium：需严格测试多浏览器兼容性（如企业级应用）、团队使用多种编程语言。

注意事项：

• 环境依赖：安装 Puppeteer 时会自动下载 Chromium，确保网络畅通。

• 反爬虫应对 ：部分网站会检测无头浏览器，可通过 puppeteer-extra 插件隐藏特征。

• 异步控制 ：所有操作基于 Promise，需熟悉 async/await 语法。