Enable breakpoint shots

[Dima Ivashchuk]

Mode

Other

Feature description

It's a frequently requested feature coming from different users that run lost-pixel in all modes to make screenshots of their responsive designs. This makes high sense as usually, the responsive designs are the ones that suffer first from visual regressions due to the fact that they may not be manually checked during the development phase.

The suggestion is to enable this feature for all modes. We would need an extension on the top level of the config with some new parameter e.g. responsiveShotDimensions(the name is exemplary and might be revised). This prop would receive the array of breakpoints that will be used then to resize the browser when making the screenshots. Moreover, this parameter shall be present also at the level of individual shots to make sure that this feature is flexible enough to use on one story/one page if needed. Page level settings should override global settings.

Here is the example of config on page shots:

import { CustomProjectConfig } from 'lost-pixel';

export const config: CustomProjectConfig = {
  pageShots: {
    pages: [{ path: '/app', name: 'app', responsiveShotDimensions: ['600px', '1024px', '2000px'] }, { path: '/blog', name: 'blog' }],
    baseUrl: 'http://172.17.0.1:3000',
  },
  responsiveShotDimensions: ['600px', '1024px']
  generateOnly: true,
  failOnDifference: true,
};

In this case /blog should receive the globally set dimensions( ['600px', '1024px']) and /app the one set locally(['600px', '1024px', '2000px'])

Whenever the shots are prepared in src/createShots.ts we could just automatically prepend the shots with set dimensions to the array that function outputs and this will take care about making screenshots later on with different dimensions. We would need to name it properly because we will essentially duplicate the shots:

/app becomes /app[600px], /app[1024px], /app[2000px] or similar

[Chris Ward]

I think this is an absolute must-have, and unsure how you're able to charge people on the platform without it?

[Dima Ivashchuk]

hey @chrisbward! we have some of our clients testing just their component libraries where the breakpoints are not as useful as for testing whole pages. Still we prioritise this feature and it's something I am actively working on now. Do you have any ideas on how it work the best, what's your use-case?

[Dima Ivashchuk]

hey @chrisbward if you want to give a shot for our breakpoint implementation I already have something for you. If so drop me a reply here & I will explain how to run the new version of lost-pixel with breakpoints in a couple of easy steps