利用docker部署puppeteer

2014v

发布于 2019-11-20 11:39:06

3.1K0

发布于 2019-11-20 11:39:06

文章被收录于专栏：2014前端笔记2014前端笔记

记录一下这次用docker遇到的一些问题

puppeteer可以使用Network.emulateNetworkConditions和Emulation.setCPUThrottlingRate轻松地模拟不同的网络请求。但是，这一个CPU节流器只是相对延缓你的CPU，在不同的机器我们会得到不同的结果，所以我们必须要统一一个环境来运行我们的程序。

于是docker出现在了我的视野中。记录一下docker的常用命令

docker info
docker run -v /host/path:/container/path -v /path:/path -dit z2014/detector_docker:0.1 /bin/bash
docker ps
docker stop id
docker rm id
docker build -f Dockerfile -t detector_docker:0.2  .

在这里，我主要是利用puppeteer执行一段脚本，然后再从docker容器中，向宿主机post结果回去。

docker run --net=host

--net=host参数可以让容器共享主机的netowrk，但是仅仅限于linux

在windows和imac上这样是无效的，在docker18.03以上的版本，内置了这样的一个特殊的域名来解决这个问题 host.docker.internal

利用trace.json获取到页面不同时间段的屏幕截图

const puppeteer = require('puppeteer');
const fs = require('fs');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.tracing.start({ screenshots: true, path: 'trace.json' });
  await page.goto('https://www.google.com', { timeout: 60000 });
  await page.tracing.stop();

  // --- extracting data from trace.json ---
  const tracing = JSON.parse(fs.readFileSync('./trace.json', 'utf8'));
  const traceScreenshots = tracing.traceEvents.filter(x => (
      x.cat === 'disabled-by-default-devtools.screenshot' &&
      x.name === 'Screenshot' &&
      typeof x.args !== 'undefined' &&
      typeof x.args.snapshot !== 'undefined'
  ));
  traceScreenshots.forEach(function(snap, index) {
    fs.writeFile('trace-screenshot-'+index+'.png', snap.args.snapshot, 'base64', function(err) {
      if (err) {
        console.log('writeFile error', err);
      }
    });
  });
  // --- end extracting data from trace.json ---

  await page.close();
})();

数组中的对象有一个ts属性，ts/1000 - navigationStart算出当前加载时间

下面是关于本次踩坑查到的一些资料

关于puppeteer

网站性能测试利器:Puppeteer trace.json如何使用 trace.json另一个issue

关于docker

问题1

libX11.so.6: cannot open shared object file: No such file or directory

在centos上安装puppeteer时，会有一些基本库安装不上，尝试使用如下命令安装

yum -y install libX11 libXcomposite libXcursor libXdamage libXext libXi libXtst cups-libs libXScrnSaver libXrandr alsa-lib pango atk at-spi2-atk gtk3

问题2

下载的chromium引用路径事例

const puppeteer = require('puppeteer');

const start = async () => {

    const browser = await puppeteer.launch({
        executablePath: "/Users/a2014/Desktop/puppeteer-demo/chrome-mac/Chromium.app/Contents/MacOS/Chromium",
    });

    const page = await browser.newPage();

    await page.goto('https://www.baidu.com');

    await  page.screenshot({
        path:'baidu.png'
    });
    await page.close();
    await browser.close();
}

start();

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

容器镜像服务