如何在 puppeteer 中获取所有 xhr 调用?

2023-12-26

我在用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 开发工具控制台中找到,但在上面的代码中没有显示。

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


我对该脚本的 4 个变体进行了一些基准测试。对我来说,结果是一样的。Note:我做了多次测试,有时由于本地网络速度的原因,呼叫较少。但经过 2-3 次尝试,Puppeteer 能够捕获所有请求。

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

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


Chrome 网络的基线:28 次调用

首先我访问了 xy 网页,结果是28 calls on the Network tab.

情况 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' },
  );

Result: 28 calls

情况 2:异步,网络空闲2

The 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' },
  );

Result: 28 calls

情况 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' },
  );

Result: 28 calls

情况 3:异步,networkidle0

The page.on里面有一个异步函数,所以我们可以等待request.url(). Plus 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' },
  );

Result: 28 calls


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

  • Either you have accepted the Cookie Consent in your Chrome so the Network will have more requests (these requests only happen after the cookies are accepted), you can accept their cookie policy with a simple navigation, so after you've navigated inside their page there will be more requests on Network immediately.

    [...] 继续使用我们的网站即表示您同意使用 cookie。

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

  • Some Chrome 插件影响页面上的请求数量。

Advise:根据隐身 Chrome 的“网络”选项卡检查您的 Puppeteer 请求,确保禁用所有扩展/插件。


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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 puppeteer 中获取所有 xhr 调用? 的相关文章

随机推荐