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.

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

Add device emulation to benchmark-web-vitals #166

Open
wants to merge 4 commits into
base: main
Choose a base branch
from

Conversation

westonruter
Copy link
Collaborator

This is a follow-up to #164.

Being able to specify the window dimensions alone is not always sufficient to test a page. In particular, there is also the device scale factor which is often higher on mobile devices. More importantly, if the user agent is not indicating a mobile device then a site may return a page formatted for desktop. This PR introduces a --emulate-device (-e) parameter to specify one of the known devices in Puppeteer. The --window-viewport arg may still be supplied, and it will override the width and height of the emulated device. If no device is being emulated, then the default viewport remains 960x700.

@westonruter westonruter added the enhancement New feature or request label Nov 26, 2024
@westonruter westonruter changed the title Add/mobile emulation Add device emulation to benchmark-web-vitals Nov 26, 2024
Comment on lines -453 to -457
await page
.mainFrame()
.waitForFunction(
`window.innerWidth === ${ params.windowViewport.width } && window.innerHeight === ${ params.windowViewport.height }`
);
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I removed this code because it with the deviceScaleFactor coming from device emulation, I found the innerWidth and innerHeight to be the viewport's dimensions multiplied by the device scale factor. While I could implement that adjustment, I didn't find that this code was actually necessary.

@@ -338,7 +357,7 @@ export async function handler( opt ) {
const params = getParamsFromOptions( opt );
const results = [];

const browser = await puppeteer.launch( { headless: 'new' } );
const browser = await puppeteer.launch( { headless: true } );
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

This change was caught by TypeScript since Puppeteer the new headless mode is now the default.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant