Need the ability to set width and height for screenshots

[camilokawerin]

Problem

Currently, the percySnapshot can takes screenshots in several screen widths, but it is not possible to set pairs of widths and heights.

I need to take screenshots for a set of devices which has a specific width and height, i.e.

devices = [
  {
    'name': 'iPad_up_to_6th_gen',
    'width': 1024,
    'height': 768,
  }, {
    'name': 'iPad_Mini_6',
    'width': 1133,
    'height': 744,
  }, {
    'name': 'iPad_up_to_9th_gen',
    'width': 1080,
    'height': 810,
  }, {
    'name': 'iPad_10th_gen',
    'width': 1180,
    'height': 820,
  }, {
    'name': 'iPad_Pro_up_to_6th_gen',
    'width': 1366,
    'height': 1024,
  },
]

Feature requested

Alternatively to the widths option, add an option viewports that allows to specify a set of width and height pairs:

{
    "viewports": [ [1024, 768], [1133, 744], [1080, 810] ]
}

[itsjwala]

hey @camilokawerin 👋

does https://docs.percy.io/docs/capturing-responsive-dom-snapshots solve your usecase?

[camilokawerin]

Thank you for the guide, but already have the latest version in another branch of the project.

The background here is that I'm updating the stack of a Vue project from Node 12 to the latest version, which implies a lot of breaking changes. I'm trying to create a baseline set of screenshots from the outdated stack (branch master) and later a new set from the branch with the stack update (the another branch), so I can track the possible visual regression.

I'll test what you suggested at the updated branch and I'll share the results.

[itsjwala]

Also, did you add the defer-uploads config? as mentioned in the responsive dom capture doc?

[camilokawerin]

Also, did you add the defer-uploads config? as mentioned in the responsive dom capture doc?

I didn't notice that part. I'll try again.

[camilokawerin]

I didn't notice this either:

This feature requires v1.11.0+ of Percy CLI to work

[camilokawerin]

Ok, now I've tried with @percy/cli 1.20.0 and @percy/cypress 3.1.2 and I didn't get the results that I need.

In the first try, I used:

for (const device of devices) {
  cy.viewport(device.width, device.height)
  cy.percySnapshot(`${page}`, {
    width: device.width
  })
}

version: 2
percy:
  defer-uploads: true

And I got a screenshot with 5 different versions, one per width, but each of them with 1024px of height.

In the second try I changed .percy.yml to:

version: 2
snapshot:
  minHeight: 768
percy:
  defer-uploads: true

And I got the 5 versions with 768px of height.

So, in the third try, I removed the minHeight from the global configuration and I set it as an option:

for (const device of devices) {
  cy.viewport(device.width, device.height)
  cy.percySnapshot(`${page}`, {
    width: device.width,
    minHeight: device.height
  })
}

But I got the same result as in the first try, what it means that the minHeight option didn't take effect as it used the default value.

I think that the proposed solution doesn't apply here because our application doesn't change the DOM state based on viewport size. It uses CSS media queries for both screen width and screen height to fit the design on the viewport and avoid scroll bars.

Otherwise, the requested feature wouldn't be necessary if the minHeight, or better, a height option is accepted by the percySnapshot command instead of always relies in the global configuration or default value. Having that, in my case I wouldn't even need to change the viewport before each screenshot.

As a workaround, I'm thinking to add a resize handler to inject some CSS directly to the body, so I can fix it width and height based on viewport size before Percy take the snapshot. It is not a happy solution, but I think it could do the job.