Puppeteer 入门及常用 API

Puppeteer 简介

是什么

Puppeteer 是一个Chrome官方团队提供的node库，它可以通过 Puppeteer 的提供的 API 直接控制 Chrome 或 Chromiun。

可以做什么

1） 生成网页截图或者 PDF
2） 爬取SPA应用，并生成预渲染内容（即“SSR” 服务端渲染）
3） 高级爬虫，可以爬取大量异步渲染内容的网页
4） 模拟键盘输入、表单自动提交、登录网页等
5） 创建一个最新的自动化测试环境，实现 UI 自动化测试
6） 捕获站点的时间线，以便追踪网站、帮助分析网站性能问题
7） 用于测试 Chrome 扩展程序

运行环境

Nodejs 的版本不能低于 v7.6.0，因为需要支持 async, await.
需要最新的 chrome driver（安装 Puppeteer 时会自动下载）

---

Puppeteer 架构图

Puppeteer API 是分层的，并反映了浏览器的结构。

• Puppeteer 使用 DevTools Protocol 与浏览器通信
• Browser 实例可以拥有多个浏览器上下文
• BrowserContext 实例定义了一个浏览会话，可以拥有多个页面
• Page 至少有一个 frame ：main frame。可能还有其他由 iframe 创建的 frame 或标签
• Frame 至少有一个可执行上下文 - 默认执行上下文 - 在其中执行 frame 的 JavaScript 。一个 Frame 可能有与 extensions 有关联的其他执行上下文
• Worker 具有单个执行上下文，便于与 WebWorkers 交互

---

Puppeteer 初体验 —— 入门 Demo

官方入门 Demo 先感受一下基本用法：

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(); //关闭浏览器
})();

---

Puppeteer 模块

Puppeteer 模块提供了一种启动 Chromium 实例的方法。

示例

启动一个浏览器

const puppeteer = require('puppeteer'