fix: align network conditions presets with DevTools (#12542)

This commit is contained in:
Alex Rudenko 2024-06-07 11:34:25 +02:00 committed by GitHub
parent cbf757efce
commit ee1074559d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 53 additions and 9 deletions

View File

@ -1342,7 +1342,7 @@ Enum of valid mouse buttons.
</td><td>
A list of network conditions to be used with [Page.emulateNetworkConditions()](./puppeteer.page.emulatenetworkconditions.md).
A list of pre-defined network conditions to be used with [Page.emulateNetworkConditions()](./puppeteer.page.emulatenetworkconditions.md).
</td></tr>
<tr><td>

View File

@ -4,7 +4,7 @@ sidebar_label: PredefinedNetworkConditions
# PredefinedNetworkConditions variable
A list of network conditions to be used with [Page.emulateNetworkConditions()](./puppeteer.page.emulatenetworkconditions.md).
A list of pre-defined network conditions to be used with [Page.emulateNetworkConditions()](./puppeteer.page.emulatenetworkconditions.md).
#### Signature:
@ -12,6 +12,8 @@ A list of network conditions to be used with [Page.emulateNetworkConditions()](.
PredefinedNetworkConditions: Readonly<{
'Slow 3G': NetworkConditions;
'Fast 3G': NetworkConditions;
'Slow 4G': NetworkConditions;
'Fast 4G': NetworkConditions;
}>;
```
@ -19,12 +21,16 @@ PredefinedNetworkConditions: Readonly<{
```ts
import {PredefinedNetworkConditions} from 'puppeteer';
const slow3G = PredefinedNetworkConditions['Slow 3G'];
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.emulateNetworkConditions(slow3G);
await page.emulateNetworkConditions(PredefinedNetworkConditions['Slow 3G']);
await page.goto('https://www.google.com');
await page.emulateNetworkConditions(PredefinedNetworkConditions['Fast 3G']);
await page.goto('https://www.google.com');
await page.emulateNetworkConditions(PredefinedNetworkConditions['Slow 4G']); // alias to Fast 3G.
await page.goto('https://www.google.com');
await page.emulateNetworkConditions(PredefinedNetworkConditions['Fast 4G']);
await page.goto('https://www.google.com');
// other actions...
await browser.close();

View File

@ -7,19 +7,31 @@
import type {NetworkConditions} from './NetworkManager.js';
/**
* A list of network conditions to be used with
* A list of pre-defined network conditions to be used with
* {@link Page.emulateNetworkConditions}.
*
* @example
*
* ```ts
* import {PredefinedNetworkConditions} from 'puppeteer';
* const slow3G = PredefinedNetworkConditions['Slow 3G'];
*
* (async () => {
* const browser = await puppeteer.launch();
* const page = await browser.newPage();
* await page.emulateNetworkConditions(slow3G);
* await page.emulateNetworkConditions(
* PredefinedNetworkConditions['Slow 3G']
* );
* await page.goto('https://www.google.com');
* await page.emulateNetworkConditions(
* PredefinedNetworkConditions['Fast 3G']
* );
* await page.goto('https://www.google.com');
* await page.emulateNetworkConditions(
* PredefinedNetworkConditions['Slow 4G']
* ); // alias to Fast 3G.
* await page.goto('https://www.google.com');
* await page.emulateNetworkConditions(
* PredefinedNetworkConditions['Fast 4G']
* );
* await page.goto('https://www.google.com');
* // other actions...
* await browser.close();
@ -29,14 +41,40 @@ import type {NetworkConditions} from './NetworkManager.js';
* @public
*/
export const PredefinedNetworkConditions = Object.freeze({
// Generally aligned with DevTools
// https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/core/sdk/NetworkManager.ts;l=398;drc=225e1240f522ca684473f541ae6dae6cd766dd33.
'Slow 3G': {
// ~500Kbps down
download: ((500 * 1000) / 8) * 0.8,
// ~500Kbps up
upload: ((500 * 1000) / 8) * 0.8,
// 400ms RTT
latency: 400 * 5,
} as NetworkConditions,
'Fast 3G': {
// ~1.6 Mbps down
download: ((1.6 * 1000 * 1000) / 8) * 0.9,
// ~0.75 Mbps up
upload: ((750 * 1000) / 8) * 0.9,
// 150ms RTT
latency: 150 * 3.75,
} as NetworkConditions,
// alias to Fast 3G to align with Lighthouse (crbug.com/342406608)
// and DevTools (crbug.com/342406608),
'Slow 4G': {
// ~1.6 Mbps down
download: ((1.6 * 1000 * 1000) / 8) * 0.9,
// ~0.75 Mbps up
upload: ((750 * 1000) / 8) * 0.9,
// 150ms RTT
latency: 150 * 3.75,
} as NetworkConditions,
'Fast 4G': {
// 9 Mbps down
download: ((9 * 1000 * 1000) / 8) * 0.9,
// 1.5 Mbps up
upload: ((1.5 * 1000 * 1000) / 8) * 0.9,
// 60ms RTT
latency: 60 * 2.75,
} as NetworkConditions,
});