|

累计收揽91493星 Puppeteer：前端自动化利器，浏览器脚本的得力助手

作者贝克街的捉虫师

大家好，我是贝克街的捉虫师呀！

说起日常开发，前端自动化测试、网页数据抓取、甚至是生成网页截图或PDF，这些场景你一定不陌生。每次手动点点点，或者写一堆复杂的模拟操作，是不是都觉得挺费劲的？如果能有一个工具，让我们像操作真实浏览器一样，用代码来控制它，那该多好？今天，我就要给大家介绍这样一个项目，它能帮你把这些繁琐的工作自动化起来。

项目概述

这个项目就是大名鼎鼎的 Puppeteer。它是一个由Google Chrome团队维护的Node.js库，提供了高级API，可以通过DevTools协议或WebDriver BiDi来控制Chrome或Firefox浏览器。你可以把它想象成给浏览器装上了一个编程接口，让开发者能够用JavaScript代码精确地模拟用户行为，比如点击、输入、导航等，甚至还能进行截图、生成PDF。默认情况下，它运行在无头（headless）模式，也就是没有图形界面的浏览器，但你也可以配置成有界面的模式，方便调试。

项目数据

截至目前，Puppeteer 在GitHub上已经累计收揽了 91493 个星标，并且今天还在持续增长，获得了 159 个星标，这足以证明它的强大吸引力。它的主要开发语言是 TypeScript，这为项目带来了更好的类型安全和更好的开发体验。作为Google Chrome团队维护的项目，它的更新频率和维护状态都非常健康，背后有强大的技术支持和活跃的社区贡献，这也是它能获得如此高星标的重要原因之一。

功能亮点

Puppeteer之所以能获得如此高的关注度，离不开它强大且实用的功能。我个人在使用过程中，觉得以下几个功能点特别值得一提：

📸 网页截图与PDF生成

无论是需要快速获取网页的某个区域，还是将整个网页保存为图片或高质量的PDF文档，Puppeteer都能轻松胜任。你可以指定截图的尺寸、质量，甚至可以模拟手机视图进行截图。我个人在做工作报告时，经常用它来批量生成网页快照，或是将一些长页面转化为PDF存档，非常方便。

🧪 自动化测试利器

在前端开发中，端到端测试是确保应用质量的重要一环。Puppeteer可以模拟用户在真实浏览器中的所有行为，比如点击按钮、填写表单、页面滚动和导航等。结合Jest、Mocha等测试框架，可以搭建起一套强大且稳定的自动化测试流程，大大提高测试效率和覆盖率，有效减少人工测试的重复劳动。

🕷️ 高效数据抓取

对于需要从网页上抓取数据的场景，Puppeteer简直是不可多得的实用工具。它能处理JavaScript动态加载的内容、Ajax请求，甚至是复杂的登录验证流程和验证码。这使得它比那些只解析静态HTML的传统爬虫框架强大得多，能应对现代网站的各种挑战。

📱 设备及浏览器模拟

Puppeteer支持模拟不同的设备类型（如手机、平板）和浏览器环境，包括调整视口大小、设置用户代理、模拟不同的网络环境等。这对于响应式设计测试、跨设备兼容性检查以及在不同环境下重现bug，都提供了极大的便利。开发者可以确保他们的应用在各种设备上都能正常工作。

⚡️ 页面性能分析与优化

通过DevTools协议，Puppeteer可以深入到Chrome的内部，收集详细的页面加载、网络请求、JavaScript执行等性能指标。开发者可以利用这些数据来分析网页性能瓶颈，找出优化点。它能帮助你更精细地了解页面的运行时表现，从而进行针对性的性能调优。

安装与使用

Puppeteer的安装和使用过程非常直观，你只需要确保你的机器上安装了Node.js环境和npm或Yarn包管理器就行。

“““bash

这是最常见的安装方式。执行这条命令时，Puppeteer会自动下载并安装一个与它兼容的Chromium浏览器。

npm i puppeteer

如果你已经有了本地的Chrome/Chromium浏览器，或者想要自己管理浏览器路径，

可以安装puppeteer-core。它不包含浏览器，仅仅是核心库，因此更轻量。

npm i puppeteer-core 


安装完成后，就可以开始编写你的自动化脚本了。下面是一个简单的TypeScript示例，演示了如何启动浏览器、访问网页、进行交互并获取页面内容：

``````typescript
import puppeteer from 'puppeteer'; // 或 import puppeteer from 'puppeteer-core';

async function runAutomation() {
  // 启动浏览器实例。默认是无头模式（headless），如果想看到浏览器界面，可以传入 { headless: false }。
  const browser = await puppeteer.launch();

  // 在浏览器中打开一个新页面。
  const page = await browser.newPage();

  // 导航到指定URL。
  await page.goto('https://developer.chrome.com/', { waitUntil: 'networkidle0' }); // 等待网络空闲

  // 设置页面视口大小。
  await page.setViewport({width: 1080, height: 1024});

  // 定位搜索框并输入文本。这里使用 aria 属性来定位，更具可访问性。
  await page.locator('aria/Search').fill('automate beyond recorder');

  // 等待并点击第一个搜索结果元素。
  // 注意：实际项目中可能需要更精确的selector或者等待条件。
  await page.locator('.devsite-result-item-link').click();

  // 定位包含特定文本的元素，并等待它出现在DOM中。
  const textSelector = await page
    .locator('text/Customize and automate')
    .waitHandle(); // waitHandle 返回一个 ElementHandle

  // 在浏览器环境中执行 JavaScript，获取元素的 textContent。
  const fullTitle = await textSelector?.evaluate(el => el.textContent);

  console.log('文章标题是: "%s".', fullTitle);

  // 最后，关闭浏览器实例。
  await browser.close();
}

// 调用主函数执行自动化任务
runAutomation().catch(console.error);

运行这个脚本，你就能看到Puppeteer帮你完成了从打开网页到搜索，再到获取特定标题的整个过程。使用上，我个人觉得它的API设计非常符合直觉，很多操作都能和日常浏览器的使用对应起来，所以上手难度并不高。如果在使用过程中遇到浏览器下载失败的问题，通常是网络原因，可以尝试配置代理或者手动下载对应的Chromium版本并指定路径。

使用场景与推荐理由

Puppeteer作为一个强大的浏览器自动化库，它的适用范围非常广泛，以下是几个我经常遇到的具体应用场景：

  • 端到端（E2E）自动化测试：这是Puppeteer最核心且最普遍的应用之一。对于现代Web应用，尤其是那些重度依赖JavaScript渲染的单页应用（SPA），用它来模拟用户在浏览器中的真实交互，进行端到端测试，能有效提高测试的覆盖率和质量，帮助在上线前捕获各种潜在的bug，确保用户体验。
  • 网页数据抓取与信息提取：如果你需要从网页上获取结构化数据，无论是商品价格、新闻内容还是招聘信息，Puppeteer都能助你一臂之力。它能处理复杂的网页结构、执行JavaScript代码以加载动态内容、处理Ajax请求，甚至可以绕过简单的反爬机制，这让它比传统基于HTML解析的爬虫工具强大得多，能够应对现代网站的各种动态内容。
  • 生成报表、截图与PDF文档：无论是网站的定期快照、用户操作流程的录屏（通过录制截图序列），还是将复杂的数据可视化页面导出为高质量的PDF报告，Puppeteer都能轻松完成。它能够精准控制渲染效果，确保输出内容的视觉一致性，对于需要高质量视觉输出的场景，它是个很不错的选择。

我个人认为，Puppeteer的推荐理由非常充分：

首先，它由Google Chrome团队维护，这意味着它能紧跟Chrome浏览器的最新特性，稳定性和兼容性都很有保障，更新迭代也十分活跃。其次，它的API设计非常友好且强大，几乎能覆盖你在浏览器中能做的一切操作，从简单的点击输入到复杂的网络请求拦截、页面性能分析，都不在话下，学习曲线相对平缓。

与一些老牌的自动化工具比如Selenium相比，Puppeteer在Chrome/Chromium的自动化方面通常效率更高，因为它直接基于DevTools协议通信，而不是模拟用户操作（当然，现在也支持WebDriver BiDi了，跨浏览器能力也在增强）。对于Node.js开发者来说，无需额外的驱动或复杂配置，就能直接用JavaScript或TypeScript编写脚本，开发体验非常好。所以，无论是前端开发者、QA工程师、数据分析师，甚至是一些需要进行网页自动化的运维人员，Puppeteer都是一个值得投入学习的实用工具。

结语

总的来说，Puppeteer是一个功能强大、用途广泛的浏览器自动化工具。它极大地简化了前端自动化测试、数据抓取、内容生成等各种任务，让开发者能够更专注于业务逻辑的实现，而不是被繁琐的浏览器操作所困扰。我个人在多个项目中都深度使用了它，无论是提高开发效率还是解决实际问题，它都表现得非常出色，称得上是前端自动化领域的得力助手。

如果你对浏览器自动化感兴趣，或者正在寻找一款高效的工具来解决上述问题，我强烈推荐你尝试一下Puppeteer。

项目地址在这，快去探索吧：https://github.com/puppeteer/puppeteer

如果你有任何使用经验或者心得体会，欢迎在评论区和我交流！下期见！

类似文章