Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Puppeteer: is there a way to access the DevTools Network API?

I am trying to use Puppeteer for end-to-end tests. These tests require accessing the network emulation capabilities of DevTools (e.g. to simulate offline browsing).

So far I am using chrome-remote-interface, but it is too low-level for my taste.

As far as I know, Puppeteer does not expose the network DevTools features (emulateNetworkConditions in the DevTools protocol).

Is there an escape hatch in Puppeteer to access those features, e.g. a way to execute a Javascript snippet in a context in which the DevTools API is accessible?

Thanks

Edit: OK, so it seems that I can work around the lack of an API using something like this:

    const client = page._client;
    const res = await client.send('Network.emulateNetworkConditions',
      { offline: true, latency: 40, downloadThroughput: 40*1024*1024, 
      uploadThroughput: 40*1024*1024 });

But I suppose it is Bad Form and may slip under my feet at any time?

like image 908
Rom1 Avatar asked Sep 06 '17 09:09

Rom1


People also ask

How do I read the Developer tab in Network Tools?

Finding the Console/Network Tab in Google Chrome: Either click the three dots in the top right of your chrome browser to open the menu. Then, go to 'More tools > Developer Tools' and then switch to the Console Tab. Or, Press Ctrl+Shift+J (Windows / Linux) or Cmd+Opt+J (Mac).

How do I use DevTools network?

In common web browsers like Google Chrome or Firefox, you can "right-click" and then click "Inspect" or "Inspect Element" to open the developer tools in your browser. Then, in Developer Tools, navigate to "Network" and re-load the page.


1 Answers

Update: headless Chrome now supports network throttling!

In Puppeteer, you can emulate devices (https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pageemulateoptions) but not network conditions. It's something we're considering, but headless Chrome needs to support network throttling first.

To emulate a device, I'd use the predefined devices found in DeviceDescriptors:

const puppeteer = require('puppeteer');
const devices = require('puppeteer/DeviceDescriptors');
const iPhone = devices['iPhone 6'];

puppeteer.launch().then(async browser => {
  const page = await browser.newPage();
  await page.emulate(iPhone);
  await page.goto('https://www.google.com');
  // other actions...
  browser.close();
});
like image 83
ebidel Avatar answered Oct 22 '22 14:10

ebidel