使用 puppeteer 生成 har答案

【问题标题】：Generating har using puppetter使用 puppeteer 生成 har
【发布时间】：2018-09-18 21:21:11
【问题描述】：

我可以使用 chrome 扩展在任何网站上记录用户事件（点击、输入值），并且可以在 mongodb 中保存步骤和启动 url。我想重播那些记录的步骤并为每个新请求生成 HAR。

记录的步骤格式：对于点击

{
  "_id": ObjectId("5ac9f48c9963508c33b83183"),
  "target": "button.btn-sm",
  "command": "click",
  "sequence": 0,
  "recording_id": ObjectId("5ac9f48c9963508c33b83182"),
  "__v": 0
}

用于输入

{
  "_id": ObjectId("5ac9f48c9963508c33b83184"),
  "target": "input[name=\"email\"]",
  "command": "assign",
  "value": "atul@impulsiveweb.com",
  "sequence": 1,
  "recording_id": ObjectId("5ac9f48c9963508c33b83182"),
  "__v": 0
}.

当前生成 har 的代码：->

    const puppeteer = require('puppeteer');
    const { harFromMessages } = require('chrome-har');
    // list of events for converting to HAR
    const events = [];
    // event types to observe
    const observe = [
        'Page.loadEventFired',
        'Page.domContentEventFired',
        'Page.frameStartedLoading',
        'Page.frameAttached',
        'Network.requestWillBeSent',
        'Network.requestServedFromCache',
        'Network.dataReceived',
        'Network.responseReceived',
        'Network.resourceChangedPriority',
        'Network.loadingFinished',
        'Network.loadingFailed',
    ];
    export default async (id,obj) => {
        const browser = await puppeteer.launch();
        const page = await browser.newPage();

    // register events listeners
        const client = await page.target().createCDPSession();
        await client.send('Page.enable');
        await client.send('Network.enable');
        observe.forEach(method => {
            client.on(method, params => {
                events.push({ method, params });
            });
        });
        // perform tests

    const steps = await RecordingSteps.find({recording_id:id}).sort({ sequence: 1 });
        const recording = await Recording.findById(id);
        await page.goto(recording.recording.startUrl);
          for(let i = 0; i < steps.length; i++){
            if(steps[i].command === 'click'){
              await page.click(steps[i].target);
              if(i < steps.length -1){
                await page.waitFor(steps[i+1].target)
              }
            }else if(steps[i].command === 'assign'){
              await page.click(steps[i].target);
              await page.keyboard.type(steps[i].value);
            } //convert events to HAR file
            const har = harFromMessages(events);
await promisify(fs.writeFile)(`${config.storage.file.har1}${i}.har`,JSON.stringify(har))
}}

上面的代码在从数据库获取的每一步（无论是点击还是赋值）上都会生成 har，但我想在任何请求更改后生成例如：- ajax 请求或 url 更改。

谢谢。

【问题讨论】：

您要等待 ajax 调用完成吗？或者别的什么。
是的，如果有的话，我想等待 ajax 调用完成。

标签： node.js headless-browser puppeteer har

【解决方案1】：

我使用 Chrome 开发工具协议实现了这个 - https://github.com/loadmill/har-recorder/blob/master/index.js

我将它封装在一个小型 npm 模块中，以将 selenium 测试捕获为 HAR 文件 - https://www.npmjs.com/package/har-recorder，但这也适用于 Puppeteer。

【讨论】：