Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol. Puppeteer runs headless by default, but can be configured to run full (non-headless) Chrome or Chromium.

翻译过来就是：Puppeteer 是一个 Node 库，它提供高级的 API 来通过 DevTools 协议控制 Chrome 或者 Chromium。Puppeteer 默认情况下无头运行，但通过配置可以跑完整的 Chrome 或者 Chromium。

什么是无头浏览器？

无头浏览器是指我们通过脚本来执行启动浏览器、打开网页、进行交互等过程，能够模拟真实的浏览器使用场景。

它能做什么？

Chrome 能做的它都能做，这里有一些例子：

  • 对网页进行截图保存为图片或 pdf
  • 抓取单页应用(SPA)执行并渲染(解决传统 HTTP 爬虫抓取单页应用难以处理异步请求的问题)
  • 做表单的自动提交、UI的自动化测试、模拟键盘输入等
  • 用浏览器自带的一些调试工具和性能分析工具帮助我们分析问题
  • 在最新的无头浏览器环境里做测试、使用最新浏览器特性
  • 写爬虫做你想做的事情~

开始

puppeteer

完整 puppeteer 包含Chromium

  1. npm i puppeteer
  2. # or "yarn add puppeteer"

puppeteer-core

没有下载 Chromium，需自行根据环境安装

  1. npm i puppeteer-core
  2. # or "yarn add puppeteer-core"

*安装参考

第一个官方例子

功能：访问一个页面，并截图保存在指定目录中

  1. const puppeteer = require('puppeteer');// 引入 puppeteer
  3. // 自执行
  4. (async () => {
  5.   const browser = await puppeteer.launch({
  6.     // 默认设置
  7.     headless: true, // 是否启用无头浏览器
  8.     executablePath: '/path/to/Chrome', // 代替捆绑的Chromium运行的Chromium或Chrome可执行文件的路径
  9.     slowMo: 250, // 延迟执行 puppeteer
  10.     defaultViewport: { // default 800*600
  11.       width: 800,
  12.       height: 600,
  13.       deviceScaleFactor: 1,
  14.       isMobile: false, // 是否考虑元视口标签
  15.       hasTouch: false, // 指定视口是否支持触摸事件
  16.       isLandscape: false // 指定视口是否处于横向模式
  17.     },
  18.     args: [], // 传递给浏览器实例的其他参数。可以在此处找到Chromium标志列表
  19.     env: process.env
  20.   });// 启动加载 Chromium
  21.   const page = await browser.newPage(); // 创建新的page对象，该页面是在默认浏览器上下文中创建的。
  22.   await page.goto('https://example.com');
  23.   await page.screenshot({path: 'example.png'});
  25.   await browser.close();
  26. })();

参考