Viewport option doesn't work

[JakubBlazity]

Bug description

Viewport option doesn't have impact on generated image size

How to reproduce

1. Use lost-pixel v3.4.1
2. Create simple setup in example next app:

export const config: CustomProjectConfig = {
  pageShots: {
    pages: [
      { path: "/", name: "Home", viewport: { width: 375, height: 720 } },
    ],
    baseUrl: "http://localhost:3000",
  },
  waitBetweenFlakynessRetries: 5000,
  threshold: 0.0005,
  waitBeforeScreenshot: 10000,
  generateOnly: true,
  shotConcurrency: 5,
  failOnDifference: true,
};

3. Run npx lost-pixel
4. Generated image has default size

Expected behavior

Generated image should have specified size

Lost Pixel information

No response

lost-pixel logs from CI

No response

[Dima Ivashchuk]

Hey @JakubBlazity! What's your exact use case for the viewport? Do you want to make the screenshots for specific size of browser tab always or it's more in the direction of making shots with different breakpoints?

We have a feature for breakpoints, but the viewport as you noticed might not work as expected. We need to work on this!

[JakubBlazity]

@d-ivashchuk
I want to be able create one screenshot for 1920x1080 browser size, and another, lets say for 375x720. Is it possible?

[Dima Ivashchuk]

with our breakpoint shots implementation, we went in the direction of horizontal breakpoints, meaning that you can set that up horizontally.

module.exports = {
  storybookShots: {
    storybookUrl: './storybook-static',
    breakpoints: [640, 1024],
  },
  lostPixelProjectId: 'xxx',
  apiKey: process.env.LOST_PIXEL_API_KEY,
};
uses: lost-pixel/lost-pixel@feature/breakpoint-shots

I don't think setting the viewport in page mode is possible now(we missed something in the implementation), but it should be quite easy to fix. If you want to make a contribution I'd be happy to assist!

[jerico-wf]

I had a look at the codebase and there's a condition that checks if configureBrowser exists. Adding this line made it work for me. Feels a bit strange though.

module.exports = {
  configureBrowser: (browser) => browser,
};

[Dima Ivashchuk]

Hey @jerico-wf! What exactly started to work with configureBrowser present? Might help us fixing it, thanks! I'd also be glad to accept a PR 🙌🏼

[Jerico Pingul]

Hey @d-ivashchuk, just responding from my main account. I found this condition in the code which appears to require browserConfig to be defined for the code to accept page.viewport. Which is why I tried passing in configureBrowser and the viewport started working. Why the condition is there, I'm not so sure..

[Dima Ivashchuk]

Awesome work finding this out, I don't think there is some good reasoning behind this! Would appreciate the PR that fixes this so you don't need to use the hack 🙌🏼

[Jerico Pingul]

@d-ivashchuk sure thing - let me know what you think about this 🙏 #273