javascript - 如何在 puppeteer 中获取所有 xhr 调用？

Question

我正在使用 puppeteer加载网页。

const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();
  await page.setRequestInterception(true);
  page.on('request', (request) => {
    console.log(request.url())
    request.continue();
    ...
  }
}
await page.goto(
    'https://www.onthehouse.com.au/property-for-rent/vic/aspendale-gardens-3195',
    { waitUntil: 'networkidle2' },
  );

我将请求拦截设置为 true并记录所有请求 url。我记录的请求比我在 chrome 浏览器中加载 url 时的请求少得多。
至少有一个请求 https://www.onthehouse.com.au/odin/api/compositeSearch可以在 chrome 开发工具控制台中找到，但在上面的代码中没有显示。

我想知道如何记录所有请求？

Answer 1

我在这个脚本的 4 个变体之间做了一些基准测试。对我来说，结果是一样的。注意:我进行了多次测试，有时由于本地网络速度的原因，通话次数较少。但经过 2-3 次尝试后，Puppeteer 能够捕获所有请求。

在 https://www.onthehouse.com.au/property-for-rent/vic/aspendale-gardens-3195页面有一些async和 defer脚本，我的假设是，当我们使用不同的 Puppeteer 设置或 page.on 中的异步与同步函数时，加载可能会有所不同.

注意 2:我测试了另一个页面，而不是原始问题中的那个页面，因为我已经需要一个 VPN 来访问这个澳大利亚网站，从 Chrome 很容易，使用 Puppeteer 需要更多:相信我，我测试的页面也有类似的吨分析和跟踪请求。

Chrome 网络的基线:28 次调用

首先我访问了xy网页，结果是 28 个电话 在网络选项卡上。

案例1:原始(同步，networkidle2)

  await page.setRequestInterception(true);
  page.on('request', (request) => {
    console.log(request.url())
    request.continue();
    ...
  }
}
await page.goto(
    'https://www.onthehouse.com.au/property-for-rent/vic/aspendale-gardens-3195',
    { waitUntil: 'networkidle2' },
  );

结果: 28 来电

案例2:异步，networkidle2
page.on里面有一个异步函数，所以我们可以等待 request.url()

  await page.setRequestInterception(true);
  page.on('request', async request => {
    console.log(await request.url())
    request.continue();
    ...
  }
}
await page.goto(
    'https://www.onthehouse.com.au/property-for-rent/vic/aspendale-gardens-3195',
    { waitUntil: 'networkidle2' },
  );

结果: 28 来电

案例3:同步，networkidle0

与原版类似，但带有 networkidle0 .

  await page.setRequestInterception(true);
  page.on('request', (request) => {
    console.log(request.url())
    request.continue();
    ...
  }
}
await page.goto(
    'https://www.onthehouse.com.au/property-for-rent/vic/aspendale-gardens-3195',
    { waitUntil: 'networkidle0' },
  );

结果: 28 来电

案例 3:异步，networkidle0
page.on里面有一个异步函数，所以我们可以等待 request.url() .加 networkidle0 .

  await page.setRequestInterception(true);
  page.on('request', async request => {
    console.log(await request.url())
    request.continue();
    ...
  }
}
await page.goto(
    'https://www.onthehouse.com.au/property-for-rent/vic/aspendale-gardens-3195',
    { waitUntil: 'networkidle0' },
  );

结果: 28 来电

由于“网络”选项卡上的请求数量和来自 Puppeteer 的请求数量没有区别，因此我们启动 puppeteer 的方式或收集请求的方式都不是我的想法:

要么你有在您的 Chrome 中接受 Cookie 同意 因此网络将有更多请求(这些请求仅在接受 cookie 后发生)，您可以通过简单的导航接受他们的 cookie 策略，因此在您导航到他们的页面后，网络上会立即有更多请求。

[...] By continuing to use our website, you consent to cookies being used.

解决方案:不要直接访问所需的页面，而是通过点击导航到那里，因此您的 Puppeteer 的 Chromium 将接受 cookie 同意，因此您也将拥有所有分析请求。

一些 Chrome 插件 影响页面上的请求数。

建议:根据隐身 Chrome 的网络选项卡检查您的 Puppeteer 请求，确保所有扩展程序/插件都已禁用。

+ 如果您只对 感兴趣XHR 那么您可能需要添加 request.resourceType将它们与其他代码区分开来 docs .