前端微志
首发于前端微志
使用puppeteer截图及线上问题调试

使用puppeteer截图及线上问题调试

Puppeteer 是Google Chrome团队开源的一个Nodejs库项目,提供一些高等级的API通过DevTools协议来操作一个无头Chrome浏览器,当然你也可以通过配置启动一个非无头的Chrome浏览器。
本文介绍下使用puppeteer在线上实现截图功能,并记录一些出现的问题及解决方法。

本文同步发布在微信公众号:前端微志。欢迎关注。

简单介绍puppeteer

可能很多人用过 PhantomJS,Puppeteer的很多功能跟PhantomJS类似。毕竟是Chrome官方出品,相信以后会同步更新Chrome的新功能特性,功能会越来越强大的。

你可以用它自动化地操作Chrome浏览器,官方给出了一些 Puppeteer 的使用场景:

  1. 网页截图快照及生成PDF文件;
  2. 爬取 SPA(单页面)系统,并生成 pre-rendered(预渲染) 内容(比如:SSR);
  3. 擦除页面内容;
  4. 自动化表填提交,UI测试,键盘输入等;
  5. 创建一个最新的,自动化测试环境,直接在最新版本的Chrome上使用最新的JavaScript和浏览器特性;
  6. 捕获你的网站的时间轴信息(timelime trace)帮助你诊断性能问题。

关于puppeteer,就简单介绍到这,GitHub上搜 puppeteer 了解详细的内容。

功能分析

上周,产品经理抛过来一个需求:每周一,将系统内一个报表页面(包含图标和table等)截图并通过邮件发送给指定人员。

刚拿到这个需求的时候,觉得很麻烦,因为项目是用Vue做的单页面应用,要想截取项目页面,保证页面样式正常展示,页面上的11个使用 echarts 做的图标要正常渲染完展示。

由于前端项目是运行在 docker 的 Nginx 上的,通过反向代理访问Java后端的接口,当前架构不好实现截图这个功能。关于截图,与后端同事做了讨论,有三种方案:

  1. 在 Java 端使用 phantomjs 的插件,实现截图;
  2. 新建 Nodejs 服务,使用 phantomjs 访问系统页面截图;
  3. 新建 Nodejs 服务,使用 puppeteer 实现截图功能;

通过比较, phantomjs 截图的效果不太好,页面样式显示不够精细,考虑到后期还会使用到 Nodejs 来实现其他功能,最后决定采用方案三,将 Nodejs 服务作为一个单独的服务层,只提供截图功能的服务,暴露出接口出去,供 Java后端调用,且定时发送邮件的功能交给 Java后端完成。

Nodejs 服务使用 Express 提供路由功能,暴露出接口供外部调用。

功能流程

Java后端定时调用 Nodejs 接口 → puppeteer截图页面 → 截图后将图片上传到图片服务器 → 图片上传成功后,将图片信息返回给Java后端 → Java后端从库中捞取对应的截图并发送邮件

截图实践

说了这么多,贴一下代码。

// 引入依赖插件
const puppeteer = require('puppeteer');
const fs = require('fs');
const path = require('path');
const request = require('request');

let theBrowser = null

const websiteUrl = 'example.com/dashboard';
const uploadFileUrl = 'upload.com/upload';

// 启动puppeteer
puppeteer.launch({
  // root 权限下需要取消sandbox
  args: ['--no-sandbox']
}).then(async browser => {
  theBrowser = browser
  // 打开浏览器后,新建tab页
  const page = await browser.newPage();
  // 设置tab页的尺寸,puppeteer允许对每个tab页单独设置尺寸
  await page.setViewport({
    width: 1000,
    height: 3480
  });

  // tab访问需要截图的页面,使用await可以等待页面加载完毕
  await page.goto(websiteUrl);
  // 由于页面数据是异步的,所以等待8秒,等待异步请求完毕,页面渲染完毕
  await page.waitFor(8000)

  // 页面渲染完毕后,开始截图
  await page.screenshot({
    path: './dashboard_shot.png',
    clip: {
      x: 200,
      y: 60,
      width: 780,
      height: 3405
    }
  });

  // 截图成功后,将截图上传至图片服务器
  request.post({
    url: uploadFileUrl,
    headers: {
      // 此处模拟一个服务器校验token
      userToken: '2361A77FDD432C6B464C57007C062B82'
    },
    formData: {
      file: fs.createReadStream(path.join(__dirname, './dashboard_shot.png'))
    }
  }, (err, httpResponse, body) => {
    // 异常处理,且不管失败还是成功,都关闭打开的浏览器
    if (err) {
      theBrowser.close();
      fs.unlink(path.join(__dirname, './dashboard_shot.png'))
      return console.error('upload failed:', err)
    }

    fs.unlink(path.join(__dirname, './dashboard_shot.png'))
    theBrowser.close();
  })
}).catch(error => {
  theBrowser.close();
});

遇到的问题

最开始,设置 page 的宽度是1700,在docker上的Ubuntu服务器上部署成功后,运行的时候会报错,报错信息是:Page crashed!(页面崩溃)

当报这个错的时候,我是一脸懵逼的,因为在本机运行是OK的,本地环境是MAC OS,按理说,既然能在线上docker中启动起来,报这个错应该跟环境没关系,接着就各种调试,发现下面几种情况:

  1. 当截取一个简单页面(没有复杂图表等的渲染)的时候,不会报错,截图成功;
  2. 如果不设置页面尺寸,使用默认尺寸,不会报错,截图成功;
  3. 设置尺寸后,不等待数据加载,不延时等待,不会报错,截图成功;
  4. 加上等待延时,会报错,设置尺寸会报错,截图失败。

通过以上现象,首先想到的是线上docker运行内存太小,但是4G的内存已经不少了,再升级到8G内存之后,还是报错,就排除内存太小的原因。

再分析,会不会是浏览器Tab页宽度太大,导致Chrome在打开页面,渲染页面需要耗费的性能太大,导致Tab页崩溃?

抱着试试看的态度,调小的页面宽度,当把宽度调整为1200时,加上延时等待,截图成功了,这时的我本来也是一脸懵逼,WTF。

但是,还是存在一定概率的失败,差不多有十分之一的概率会失败,然后,又将宽度调整为1000时,基本上就不会报错,每次都能完美的截图。

总结

这次试用puppeteer的经验,让我知道一个道理,出现问题了,什么原因都是有可能的,当你不确定时,就把可能的原因都考虑一下,那样可能就很容易找到问题所在了。

本来自认为不可能是宽度的问题,就以为可能是我的写法有问题,换了很多种方式,最后钻到了牛角里出不来,浪费了很多的时间,现在想来时间浪费得很不值得。

总的来说,puppeteer还是很强大的,用来做UI自动化测试,和一些小工具都是很不错的。各位,可以去发现puppeteer的更多的应用场景。

编辑于 2017-09-18

文章被以下专栏收录