爬虫神器puppeteer

1. puppeteer介绍

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

• puppeteer是一个nodejs库，它提供了一个高级API来通过DevTools协议控制Chrome或Chromium。
• github地址: puppeteer (opens new window)

2. 使用puppeteer能做什么

• 生成网页的屏幕截图和pdf文件。
• 抓取SPA(单页应用程序)并生成预呈现内容。
• 自动化表单提交、UI测试、键盘输入等。
• 创建一个最新的自动化测试环境，使用最新的JavaScript和浏览器特性直接在最新版本的Chrome中运行测试。
• 捕获站点的时间轴跟踪，以帮助诊断性能问题。
• 测试Chrome扩展。

3. puppeteer的API结构

• Browser: 对应一个浏览器实例，一个 Browser 可以包含多个 BrowserContext
• BrowserContext: 对应浏览器一个上下文会话，就像我们打开一个普通的 Chrome 之后又打开一个隐身模式的浏览器一样，BrowserContext 具有独立的 Session(cookie 和 cache 独立不共享)，一个 BrowserContext 可以包含多个 Page
• Page: 表示一个 Tab 页面，通过 browserContext.newPage()/browser.newPage() 创建，browser.newPage() 创建页面时会使用默认的 BrowserContext，一个 Page 可以包含多个 Frame
• Frame: 一个框架，每个页面有一个主框架（page.MainFrame()）,也可以多个子框架，主要由 iframe 标签创建产生的
• ExecutionContext: 是 javascript 的执行环境，每一个 Frame 都一个默认的 javascript 执行环境
• ElementHandle: 对应 DOM 的一个元素节点，通过该该实例可以实现对元素的点击，填写表单等行为，我们可以通过选择器，xPath 等来获取对应的元素
• JsHandle: 对应 DOM 中的 javascript 对象，ElementHandle 继承于 JsHandle，由于我们无法直接操作 DOM 中对象，所以封装成 JsHandle 来实现相关功能
• CDPSession: 可以直接与原生的 CDP 进行通信，通过 session.send 函数直接发消息，通过 session.on 接收消息，可以实现 Puppeteer API 中没有涉及的功能
• Coverage: 获取 JavaScript 和 CSS 代码覆盖率
• Tracing: 抓取性能数据进行分析
• Response: 页面收到的响应
• Request: 页面发出的请求

4. 使用方法

1. 安装puppeteer

npm install puppeteer --save

2. 示例

• 保存一个网页截图

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({ path: 'example.png' });

  await browser.close();
})();

• 保存网页pdf

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://news.ycombinator.com', {
    waitUntil: 'networkidle2',
  });
  await page.pdf({ path: 'hn.pdf', format: 'a4' });

  await browser.close();
})();