纵横四海 -- Puppeteer全能应用一文通

Puppeteer是什么?

Puppeteer翻译过来的意思是"操纵木偶的人", 实质是一个Headless/无头浏览器, 尤其在 Node.js 中的应用极为广泛.

Puppeteer 介绍和应用场景

介绍

Puppeteer 是一个 Node 库，它提供了一整套高级 API，通过 DevTools 协议控制 Chromium 或 Chrome。正如其翻译为“操纵木偶的人”一样，你可以通过 Puppeteer 提供的 API 直接控制 Chrome，模拟大部分用户操作，进行 UI 测试或者作为爬虫访问页面来收集数据。

应用场景

• 为网页生成页面 PDF 或者截取图片；

• 抓取 SPA（单页应用）并生成预渲染内容；

• 自动提交表单，进行 UI 测试、键盘输入等；

• 创建一个随时更新的自动化测试环境，使用最新的 JavaScript 和浏览器功能直接在最新版本的 Chrome 中执行测试；

• 捕获网站的timeline trace，用来帮助分析性能问题；

• 测试浏览器扩展。

• 数据爬虫

Puppeteer 在 SSR 中的应用

区别于next/nuxt等SSR框架的设计方案，基于Puppeteer的SSR方案最大的好处是不需要对项目代码进行任何调整，却能获取到 SSR 应用的收益。当然，相比同构渲染，基于 Puppeteer 技术的 SSR 在灵活性和扩展性上都有所局限; 甚至在 Node.js 端渲染的性能成本也较高; 不过该技术也逐渐落地，并在很多场景发挥了重要价值。

在 Node.js 端使用 Puppeteer 渲染时，我们可以实现ssr.mjs，完成渲染任务，如下代码：

// ssr.mjs
import puppeteer from 'puppeteer';

// 将已经渲染过的页面，缓存在内存中
const RENDER_CACHE = new Map();

// 重复使用 Chrome 实例
let browserWSEndpoint = null
let browser

async function ssr(url) {
	// 命中缓存
  if (RENDER_CACHE.has(url)) {
    return {html: RENDER_CACHE.get(url), ttRenderMs: 0};
  }
  const start = Date.now();
  // 使用 Puppeteer launch 一个无头浏览器
 
  if (!browserWSEndpoint) {
    // 一下两行代码不必随着渲染重复执行
    browser = await puppeteer.launch()
    browserWSEndpoint = await browser.wsEndpoint()
  }
  
  const page = await browser.newPage();
  try {
    // 访问页面地址直到页面网络状态为 idle
    await page.goto(url, {waitUntil: 'networkidle0'});
    // 确保 #posts 节点已经存在
    // await page.waitForSelector('#app');
    await page.waitForSelector('#posts');
  } catch (err) {
    console.error('err>>>', err);
    throw new Error('page.goto/waitForSelector timed out.');
  }
	// 获取 html 内容
  const html = await page.content(); 
  // 关闭无头浏览器
  await browser.close();
  const ttRenderMs = Date.now() - start;
  console.info(`Headless rendered page in: ${ttRenderMs}ms`);

	// 进行缓存存储
  RENDER_CACHE.set(url, html);
  return {html, ttRenderMs};
}

export {ssr as default};
 

上述代码在渲染页面时，对 Chrome 实例进行了重复利用，减少了额外的性能损耗。我们还可以从其它方面进行优化：

• 改造浏览器端代码，防止重复请求接口（比如基于axios的请求库做二次封装的时候，使用axios的拦截器与防抖节流相结合, 同时也需要考虑界面交互操作的防抖/节流。可以参考Vue + Axios全局接口防抖、节流封装实现，让你前端开发更高效
• 在 Node.js 端 / browser端，abort 掉不必要的请求，以得到更快的服务端渲染响应速度
• 将关键资源内联进 HTML
• 自动压缩静态资源

我们简单进行下调用：

// server.mjs
import express from "express"
import ssr from "./ssr.mjs"

const app = express()

app.get("/", async (req, res, next) => {
  // 调用 SSR 方法渲染页面
  // const {html, ttRenderMs} = await ssr(`https://www.jd.com/?cu=true&utm_source=hao.360.com&utm_medium=tuiguang&utm_campaign=t_1000003625_360mz&utm_term=6e74a90b77bc4ac3a5165b0c8364b511`);
  const { html, ttRenderMs } = await ssr(`http://192.168.1.110:8000/ssr.html`)
  res.set(
    "Server-Timing",
    `Prerender;dur=${ttRenderMs};desc="Headless render time (ms)"`
  )
  console.log(res.get("Server-Timing"))
  return res.status(200).send(html)
})

app.listen(8080, () => console.log("Server started. Press Ctrl+C to quit"))

在这里我们安装了http-server全局模块, 然后在html文件夹中做了一个静态代理，使用端口8000，如下：

npm i http-server -g
cd html
http-server -p 8000

或者也可以直接使用一个网址例如360官网（如上，打开注释即可）做一个渲染。

对应的ssr.cjs的代码要做对应的修改，将id由posts改为doc如下：

try {
    // 访问页面地址直到页面网络状态为 idle
    await page.goto(url, {waitUntil: 'networkidle0'});
    // 确保 #doc 节点已经存在
    await page.waitForSelector('#doc');
    // await page.waitForSelector('#posts');
  } catch (err) {
    console.error('err>>>', err);
    throw new Error('page.goto/waitForSelector timed out.');
  }

整个目录结构如下所示：

至此，我们从原理和代码层面分析了 Puppeteer 在 SSR 中的应用。

Puppeteer 在 UI 测试中的应用

Puppeteer 在 UI 测试（即端到端测试）中也可以大显身手，比如和 Jest 结合，通过断言能力实现一个完备的端到端测试系统/UI测试系统。如下：

const puppeteer = require("puppeteer")

// 测试页面 title 符合预期
test("baidu title is correct", async () => {
  // 启动一个无头浏览器
  const browser = await puppeteer.launch()
  // 通过无头浏览器访问页面
  const page = await browser.newPage()
  await page.goto("https://www.baidu.com/")
  // 获取页面 title
  还可以通过page.url()获取当前地址, 通过page.content()获取ssr内容
  const title = await page.title()
  // 使用 Jest 的 test 和 expect 两个全局函数进行断言
  expect(title).toBe("百度一下，你就知道")
  console.log("true")
  await browser.close()
})

实际上，现在流行的主流端到端测试框架，比如 Cypress 原理都如上代码所示。

Puppeteer 结合 Lighthouse 应用场景

Puppeteer 和 Lighthouse 结合, 就是一个简单的性能守卫系统的雏形。如下：

// lighthouse.js
const chromeLauncher = require("chrome-launcher")
const puppeteer = require("puppeteer")
const lighthouse = require("lighthouse")
const config = require("lighthouse/lighthouse-core/config/lr-desktop-config.js")
const reportGenerator = require("lighthouse/lighthouse-core/report/report-generator")
const request = require("request")
const util = require("util")
const fs = require("fs")

;(async () => {
  // 默认配置
  const opts = {
    logLevel: "info",
    output: "json",
    disableDeviceEmulation: true,
    defaultViewport: {
      width: 1200,
      height: 900,
    },
    chromeFlags: ["--disable-mobile-emulation"],
  }

  // 使用 chromeLauncher 启动一个 chrome 实例
  const chrome = await chromeLauncher.launch(opts)
  opts.port = chrome.port
  console.log("port>>>", opts.port)

  // 使用 puppeteer.connect 连接 chrome 实例
  const resp = await util.promisify(request)(
    `http://localhost:${opts.port}/json/version`
  )
  console.log("resp>>>", resp)

  const { webSocketDebuggerUrl } = JSON.parse(resp.body)
  console.log("webSocketDebuggerUrl", webSocketDebuggerUrl)

  const browser = await puppeteer.connect({
    browserWSEndpoint: webSocketDebuggerUrl,
  })

  //   访问逻辑
  page = (await browser.pages())[0]
  await page.setViewport({ width: 1200, height: 900 })
  const url = page.url()
  console.log("url", url)

  // 使用 lighthouse 产出报告
  const report = await lighthouse('https://www.baidu.com', opts, config)
  // console.log("report>>>", report)

  const html = reportGenerator.generateReport(report.lhr, "html")
  const json = reportGenerator.generateReport(report.lhr, "json")
  await browser.disconnect()
  // await chrome.kill()

  // 将报告写入文件系统
  fs.writeFile("report.html", html, (err) => {
    if (err) {
      console.error(err)
    }
  })
  fs.writeFile("report.json", json, (err) => {
    if (err) {
      console.error(err)
    }
  })
})()

最后会在项目目录下生成report.html和report.json这两个不同格式的性能报告文件，供我们进行具体的性能分析和处理（图表可视化展示等）

接下来我们重点讲下如何利用 Puppeteer 实现海报 Node.js 服务

Puppeteer 实现海报 Node.js 服务

生成海报的应用场景很多，比如文稿中划线，进行“金句分享”，如下图所示：

一般来说，生成海报可以使用html2canvas这样的类库基于浏览器api完成，这里面的技术难点主要有跨域处理、分页处理、页面截图时机处理等。整体来说，并不难实现，但是稳定性一般。另一种生成海报的方式就是使用 Puppeteer，构建一个 Node.js 服务来做页面截图，性能较高且稳定性强。

整个海报服务的整体技术链路如下：

核心技术是使用 Puppeteer，访问页面并截图。

下面我们来模拟简单实现下：

第一步，创建一个通用连接池，以供使用

依赖generic-pool库，这个库提供了 Promise 风格的通用池，可以用来对一些高消耗、高成本资源的调用实现防抖或拒绝服务能力，一个典型场景是对数据库的连接。这里我们把它用于 Puppeteer 实例的创建，如下代码所示：

// createPuppeteerPool.js
const puppeteer = require('puppeteer')
const genericPool = require('generic-pool')

const createPuppeteerPool = ({
  // pool 的最大容量
  max = 10,
  // pool 的最小容量
  min = 2,
  // 连接在池中保持空闲而不被回收的最小时间值
  idleTimeoutMillis = 30000,
  // 最大使用数
  maxUses = 50,
  // 在连接池交付实例前是否先经过 factory.validate 测试
  testOnBorrow = true,
  puppeteerArgs = {},
  validator = () => Promise.resolve(true),
  ...otherConfig
} = {}) => { 
  const factory = {
    // 创建实例
    create: () =>
      puppeteer.launch(puppeteerArgs).then(instance => {
        instance.useCount = 0
        return instance
      }),
    // 销毁实例
    destroy: instance => {
      instance.close()
    },
    // 验证实例可用性
    validate: instance => {
      return validator(instance).then(valid =>
        // maxUses 小于 0 或者 instance 使用计数小于 maxUses 时可用
        Promise.resolve(valid && (maxUses <= 0 || instance.useCount < maxUses))
      )
    }
  }
  const config = {
    max,
    min,
    idleTimeoutMillis,
    testOnBorrow,
    ...otherConfig
  }
  // 创建连接池
  const pool = genericPool.createPool(factory, config)
  const genericAcquire = pool.acquire.bind(pool)
   
  // 池中资源连接时进行的操作
  pool.acquire = () =>
    genericAcquire().then(instance => {
      instance.useCount += 1
      return instance
    })

  pool.use = fn => {
    let resource
    return pool
      .acquire()
      .then(r => {
        resource = r
        return r
      })
      .then(fn)
      .then(
        result => {
          // 释放资源
          pool.release(resource)
          return result
        },
        err => {
          pool.release(resource)
          throw err
        }
      )
  }

  return pool
}

module.exports = createPuppeteerPool

在这里我们做了一系列性能优化，如下：

• 对pool.use方法的一个链式调用实现一个服务资源的及时销毁
• 通过重写pool.acquire()方法和计数器的设计, 实现每一次调用pool.acquire()之后计数一次, 以实现最大连接数限制
• idleTimeoutMillis设置连接在池中保持空闲而不被回收的最小时间值
• 设置pool 的最大容量

使用连接池的方式如下：

// pool.js
const createPuppeteerPool = require("./createPuppeteerPool.js")

const pool = createPuppeteerPool({
  // puppeteerArgs: {
  //   args: config.browserArgs
  // }
})

module.exports = pool

第二步，实现具体的生成海报逻辑

如下：

// render.js
// 获取连接池
const pool = require("./pool.js")

const render = (
  request,
  handleFetchPicoImageError = (error) => {
    console.error(error)
  }
) =>
  // 使用连接池资源
  pool.use(async (browser) => {
    // browser也就是pool.use方法中的resource, 也就是factory.create()的返回值
    // ctx为请求的context, 其中, body为请求体参数, query为查询参数（在url中拼接的参数）
    const { body = "", query } = request
    // 打开新的页面
    const page = await browser.newPage()
    // 服务支持直接传递 HTML 字符串内容
    let html = body
    // 从请求服务的 query 获取默认参数
    // 一个比较好的思路是浏览器在访问当前需要截屏的页面的时候, 把当前设备/浏览器的宽度(例如window.innerWidth)传给服务端, 结合页面的固定宽高比算出高度, 然后智能截图适配
    let {
      width = 1280,
      height = 2000,
      ratio: deviceScaleFactor = 2,
      type = "png",
      filename = "poster",
      waitUntil = ["networkidle0", "load", "domcontentloaded"],
      quality = 100,
      omitBackground = "true",
      fullPage = "true",
      url,
    } = query
    let image
    try {
      if (html.length > 1.25e6) {
        throw new Error("image size out of limits, at most 1 MB")
      }

      console.log("width>>>", width, height)
      // 设置浏览器视口
      await page.setViewport({
        width: Number(width),
        height: Number(height),
        deviceScaleFactor: Number(deviceScaleFactor),
      })

      // waitUntil=["networkidle0", "load", "domcontentloaded"], 其中networkidle0代表"网络空闲"

      // 访问 URL 页面
      await page.goto(url || `data:text/html,${html}`, {
        waitUntil,
      })

      // 进行截图
      type = type === "jpg" ? "jpeg" : type
      image = await page.screenshot({
        type,
        quality: type === "png" ? undefined : Number(quality),
        omitBackground: omitBackground === "true",
        fullPage: fullPage === "true",
        path: `${filename}.${type}`,
      })
    } catch (error) {
      handleFetchPicoImageError(error)
      throw error
    }

    await page.close()
    return { image, type, filename }
  })

module.exports = render

这里的render方法对应了pool.use(fn => {})中的fn, 这里的fn可以是任意的nodejs平台服务

第三步，起一个服务，调用render方法生成海报

如下：

// index.js
const render = require("./render.js")
const express = require("express")

const app = express()

app.get("/", async (req, res, next) => {
  // const urls = [{name: '搜狐快照', value: 'https://www.sohu.com/'}, {name: '百度快照', value: 'https://www.baidu.com/'}]
  // const ctx = { request: { query: { url:  urls[1].value } }, res }
  const {query: {url, width, height}} = req
  console.log('width', width, height)
  const request = { query: { url, width, height  } }
  const { image, type, filename } = await render(request)
  res.set("Content-Type", `image/${type}`)
  res.set("Content-Disposition", `inline; filename=${filename}.${type}`)
  return res.status(200).send(image)
})

app.listen(8080, () => console.log("Server started. Press Ctrl+C to quit"))

node index.js

打开浏览器，使用京东官网测试一下：

点击图片，进行放大并打开谷歌开发者工具，可以看到：

其中，参数如下：

http://localhost:8080/?url=https://www.jd.com/?cu=true&utm_source=hao.360.com&utm_medium=tuiguang&utm_campaign=t_1000003625_360mz&utm_term=30e2b8a8dc064fc29eb9b8d0d4b05b6e&width=1600&height=3800

同时，可以看到我们的项目目录下多了一个poster.png的图片：

对应这一段代码：

也可以改变参数进行截图，比如对百度官网进行截图：

至此，我们的海报生成nodejs服务就实现了，浏览器端可以使用仿造a标签点击事件的方式进行自动下载。更进一步，也可以在浏览器端调用海报服务接口的时候，将整个站点的所有url和其它参数通过request body入参传递过来，由node代码遍历全部url，下载对应图片到当前目录下面，生成在线PDF相册。

我们也可以生成各种语言的 SDK 客户端，调用该海报服务。比如一个简单的 Python 版 SDK 客户端实现如下代码：

import requests
class PosterGenerator(object):
    // ...
    def generate(self, **kwargs):
        """
        生成海报图片，返回二进制海报数据
        :param kwargs: 渲染时需要传递的参数字典
        :return: 二进制图片数据
        """
        html_content = render(self._syntax, self._template_content, **kwargs)
        url = POSTER_MAN_HA_PROXIES[self._api_env.value]
        try:
        		// post 请求海报服务
            resp = requests.post(
                url,
                data=html_content.encode('utf8'),
                headers={
                    'Content-Type': 'text/plain'
                },
                timeout=60,
                params=self.config
            )
        except RequestException as err:
            raise GenerateFailed(err.message)
        else:
            if not resp:
                raise GenerateFailed(u"Failed to generate poster, got NOTHING from poster-man")
            try:
                resp.raise_for_status()
            except requests.HTTPError as err:
                raise GenerateFailed(err.message)
            else:
                return resp.content

总结

我们介绍了 Puppeteer 的各种应用场景，通过Puppeteer实现SSR服务，基于Puppeteer的性能守卫系统实现, 基于Puppeteer的UI测试/端到端测试框架实现, 并重点介绍了一个基于 Puppeteer 设计实现的海报服务系统。