Puppeteer相关介绍

最近在使用lighthouse和puppeteer进行一些性能测试相关的工作,感觉puppeteer还是很好用的,下面简单介绍一下puppeteer的使用

概念

Headless Chrome

  • 是一种在无界面的环境中运行 Chrome,与正常Chrome的区别
    • 直接通过命令行或者程序语言操作
    • 没有界面,少了加载 css/js、渲染页面的工作,比真实浏览器更快,更稳定
  • 在启动 Chrome 时添加参数 --headless,便可以 headless 模式启动 Chrome

Puppeteer

  • 是 Node.js 工具引擎
  • 是 Chrome Developer Protocol 的上层封装
  • 提供了高级API来通过DevTools协议控制Chrome或Chromium
  • 默认是headless,可通过参数配置调出界面

Puppeteer可以做什么

  • 生成页面的屏幕截图和PDF。(包括滚动元素的全屏截图)
  • 爬取SPA(单页应用程序)并生成预渲染的内容(即“ SSR”(服务器端渲染))。
  • 自动进行表单提交,UI测试,键盘输入等。
  • 创建最新的自动化测试环境。使用最新的JavaScript和浏览器功能,直接在最新版本的Chrome中运行测试。
  • 捕获站点的时间线跟踪,以帮助诊断性能问题。
  • 测试Chrome扩展程序。

文档资源

API

结合API文档使用


image.png
Browser: 对应一个浏览器实例
BrowserContext: 对应浏览器一个上下文会话
Page:表示一个 Tab 页面
Frame: 一个框架
ExecutionContext: javascript 的执行环境
ElementHandle: 对应 DOM 的一个元素节点
JsHandle:对应 DOM 中的 javascript 对象CDPSession:可以直接与原生的 CDP 进行通信
Coverage:获取 JavaScript 和 CSS 代码覆盖率
Tracing:抓取性能数据进行分析
Response: 页面收到的响应
Request: 页面发出的请求

Puppeteer-Recoder

  • 可以直接记录与浏览器进行交互,生成Puppeteer脚本。
  • 可以在chrome中添加插件直接使用
  • 缺点:无法记录滚动操作
点击record开始记录 生成代码可直接运行
image.png
image.png

一些简单的例子

网页截图功能

const puppeteer = require('puppeteer');

(async () => {
  // 生成browser实例
  const browser = await puppeteer.launch();  
  
  // 解析一个新的页面。页面是在默认浏览器上下文创建的
  const page = await browser.newPage();
  
  // 设置网页大小
  await page.setViewport({ width: 1000, height: 500 });
  
  // 跳转到 https://example.com, 这里可以增加一些参数配置
  await page.goto('https://example.com');
  
  // 生成图片
  await page.screenshot({path: 'example.png'});

  // 生成pdf
  await page.pdf({path: 'page.pdf'});

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

如果想调出界面

const browserConfig = {
    headless: false 
};
const browser = await puppeteer.launch(browserConfig);

如果想截图滚动元素

// 针对滚动元素截屏
async function scrollElementShot(page, selectorName, outputPath) {
    // 选中滚动元素
    const scrollableSectionEl = await page.waitForSelector(selectorName);
    
    // 获取滚动元素参数
    const bounding_box = await scrollableSectionEl.boundingBox();

    await scrollableSectionEl.screenshot({
        path: outputPath,
        clip: bounding_box
    });
}

如果设置不同网络状态

// 一些网络状态
const NETWORK_PRESETS = {
    // 所有速度 / 8 是因为网络速度通常以比特/秒,而 DevTools 预计吞吐量在字节/秒! (1字节 = 8比特)
    GPRS: {
        offline: false, // 是否连接
        downloadThroughput: (50 * 1024) / 8, // 模拟下载速度
        uploadThroughput: (20 * 1024) / 8,  // 模拟上传速度 
        latency: 500 // 模拟延迟(毫秒)
    },
    Regular2G: {
        offline: false,
        downloadThroughput: (250 * 1024) / 8,
        uploadThroughput: (50 * 1024) / 8,
        latency: 300
    },
};

async function setNet(network, page) {
    // 添加网络环境
    if (network !== 'default') {
        // Connect to Chrome DevTools
        await page._client.send('Network.emulateNetworkConditions', NETWORK_PRESETS[network]);
    }
}

const page = await browser.newPage();
// 添加网络环境
// Connect to Chrome DevTools
await page._client.send('Network.emulateNetworkConditions', NETWORK_PRESETS['GPRS']);

如果设置不同GPUThrottling

await page._client.send('Emulation.setCPUThrottlingRate', { rate: 4 });

一些时间节点判断API

// 等待3s
await page.waitForTimeout(3000);

// 等待某个元素出现
await page.waitForSelector('div > .m-tabwrap');

// 等待某个条件项
await page.waitForFunction('window.innerWidth < 100');

性能分析相关API

  • tracing,生成的json文件可直接拖入ChromeDevTools的performance面板中查看
await page.tracing.start({path: 'trace.json', screenshots: true});
await page.click('div > .m-tabwrap > .m-tab > li:nth-child(3) > a');
await page.waitForTimeout(3000);
await page.screenshot({
    path: 'demo1.png'
});
await page.tracing.stop();
  • 通过 page.getMetrics() 可以得到一些页面性能数据
const metrics = await page.metrics();

<!--Timestamp The timestamp when the metrics sample was taken.-->
<!--Documents 页面文档数-->
<!--Frames 页面 frame 数-->
<!--JSEventListeners 页面内事件监听器数-->
<!--Nodes 页面 DOM 节点数-->
<!--LayoutCount 页面 layout 数-->
<!--RecalcStyleCount 样式重算数-->
<!--LayoutDuration 页面 layout 时间-->
<!--RecalcStyleDuration 样式重算时长-->
<!--ScriptDuration script 时间-->
<!--TaskDuration 所有浏览器任务时长-->
<!--JSHeapUsedSize JavaScript 占用堆大小-->
<!--JSHeapTotalSize JavaScript 堆总量-->

更多

更多示例可参考官方示例库

推荐阅读更多精彩内容