用木偶机生成har

Question

我可以记录用户事件(点击，输入值)在任何网站上使用铬扩展，并可以保存步骤和启动网址在mongodb。我想重播那些记录的步骤，并为每一个新的请求生成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))
}}

上面的代码在从db获取的每个步骤(无论是单击还是赋值)上都生成har，但是我希望在任何请求更改(例如：- ajax请求或url更改)之后生成。

谢谢。

Answer 1

我使用Chrome协议- https://github.com/loadmill/har-recorder/blob/master/index.js实现了这一点。

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