Is it possible to leverage DevTools Network API in Puppeteer?

Other Questions Puppeteer
1

I’m working on end-to-end tests using Puppeteer and need to simulate different network conditions. Does anyone know if there’s a way to access the DevTools Network API through Puppeteer?

I’ve tried using chrome-remote-interface, but it’s not user-friendly enough for my needs. Puppeteer doesn’t seem to have built-in support for network emulation features like emulateNetworkConditions.

I’m wondering if there’s a workaround or a way to run JavaScript that can interact with the DevTools API in Puppeteer. Has anyone found a solution for this?

I did come across a potential hack:

const browserInstance = await puppeteer.launch();
const page = await browserInstance.newPage();
const clientConnection = page._client;

await clientConnection.send('Network.simulateNetworkConditions', {
  offline: true,
  latency: 100,
  downloadSpeed: 500000,
  uploadSpeed: 500000
});

But I’m not sure if this is a good practice or if it might break in future versions. Any thoughts or better alternatives?

2

I’ve worked with the DevTools Network API using Puppeteer on a couple of projects. While Puppeteer doesn’t directly expose the network API, you can use a Chrome DevTools Protocol (CDP) session to tap into the functionality.

My method was to create a CDP session with the page:

const client = await page.target().createCDPSession();

Then, enable the network features:

await client.send('Network.enable');

Once enabled, simulating network conditions becomes straightforward:

await client.send('Network.emulateNetworkConditions', {
  offline: false,
  latency: 200,
  downloadThroughput: 780000,
  uploadThroughput: 330000
});

This approach provided precise control over network scenarios. However, it’s wise to monitor Puppeteer updates since these internal CDP methods might evolve. For many cases, Puppeteer’s built-in emulateNetworkConditions remains a more stable alternative.

3

I’ve experimented with accessing the DevTools Network API using Puppeteer by creating a CDP session with page.target().createCDPSession().

After establishing the session, I enabled network features with Network.enable() and then used Network.emulateNetworkConditions to set parameters for latency, download, and upload speeds. This technique provides granular control over network simulation but depends on internal methods that may change in future versions. In my experience, using Puppeteer’s built-in emulateNetworkConditions offers a more stable approach for consistent testing.

4

yo, i’ve messed around with this too. u can totally use CDP to get at those network api goodies. just do something like:

const client = await page.target().createCDPSession();
await client.send(‘Network.enable’);

then u can simulate different network stuff. it works pretty good but might break later so watch out lol. puppeteer’s built-in network stuff is prolly safer if u don’t need anything fancy