Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Switch to new puppeteer APIs for emulating conditions #33410

Merged
merged 3 commits into from
Jul 14, 2021
Merged

Switch to new puppeteer APIs for emulating conditions #33410

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8fb1fed
Switch to new puppeteer APIs
talldan Jul 14, 2021
7894ed5
Update comments
talldan Jul 14, 2021
548e4f1
Use setOfflineMode only
talldan Jul 14, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 8 additions & 10 deletions packages/e2e-tests/config/setup-test-framework.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,28 +187,26 @@ async function simulateAdverseConditions() {
return;
}

const client = await page.target().createCDPSession();
if ( OFFLINE ) {
await page.setOfflineMode( true );
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The docs aren't very clear, but I this this is needed if we ever want to test a PWA. But I don't fully know what it does.

}

if ( SLOW_NETWORK || OFFLINE ) {
if ( SLOW_NETWORK ) {
// See: https://chromedevtools.github.io/devtools-protocol/tot/Network#method-emulateNetworkConditions
// The values below simulate fast 3G conditions as per https://github.com/ChromeDevTools/devtools-frontend/blob/80c102878fd97a7a696572054007d40560dcdd21/front_end/sdk/NetworkManager.js#L252-L274
await client.send( 'Network.emulateNetworkConditions', {
// Network connectivity is absent
offline: Boolean( OFFLINE || false ),
await page.emulateNetworkConditions( {
// Download speed (bytes/s)
downloadThroughput: ( ( 1.6 * 1024 * 1024 ) / 8 ) * 0.9,
download: ( ( 1.6 * 1024 * 1024 ) / 8 ) * 0.9,
// Upload speed (bytes/s)
uploadThroughput: ( ( 750 * 1024 ) / 8 ) * 0.9,
upload: ( ( 750 * 1024 ) / 8 ) * 0.9,
// Latency (ms)
latency: 150 * 3.75,
} );
}
Comment on lines +197 to 205
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can just use the predefined conditions here?

await page.emulateNetworkConditions( puppeteer.networkConditions['Fast 3G'] );

Then, we can remove the comments above too.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This might seem silly, but the puppeteer object can't be imported.

Neither of these seem to work:

import puppeteer from 'puppeteer';

import puppeteer from 'puppeteer-core';

Not sure if you have a quick fix, but I don't want to mess around too much with dependencies, much more important stuff to do, so I think let's just ship this as is for now. Or feel free to push a commit if you can solve it.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, seems like a npm/eslint issue. Peer dependency should be installed by default. Upgrading to npm 7 might fix that. But sure, this is good enough 👍.


if ( THROTTLE_CPU ) {
// See: https://chromedevtools.github.io/devtools-protocol/tot/Emulation#method-setCPUThrottlingRate
await client.send( 'Emulation.setCPUThrottlingRate', {
rate: Number( THROTTLE_CPU ),
} );
await page.emulateCPUThrottling( Number( THROTTLE_CPU ) );
}
}

Expand Down