How to handle responsive DOM changes

I have been playing around with this library and I noticed something querky in terms of my screen shots. It seems when I set the widths option within cy.percySnapshot the screenshot is taken during the resize of the screen which causes layout issues. By this I mean the screenshot is happening while the layout is still repositioning itself based on the response styles. Is it possible to delay the snapshot a little bit after the width has been set?

Packages: @percy/cypress: 2.3.1 cypress: 4.3.0

[Robdel12]

Hey @jarretmoses, thanks for the issue! I suspect something else is going on. It sounds like your apps DOM changes between widths? The way Percy works is by capturing the DOM of the page (and its state) when percySnapshot is called. When then do asset discovery on the DOM & send it off to the API where its rendered concurrently across browsers & widths.

If your applications DOM changes when the browser is resized, this current method doesn’t work. We render that same DOM at different widths with JS disabled (to prevent JS from altering any captured state). This method assumes the DOM stays the same and you’re using CSS media queries entirely to alter the page.

To fix this you’ll have to resize the test browser before calling percySnapshot for accurate snapshots.

// A helper to make this easy, feel free to edit
Cypress.Commands.add('percyResponsiveSnapshot', (name, width, options = {}) => {
  delete options.widths // we never want to use those in this helper

  cy
    // https://docs.cypress.io/api/commands/viewport.html#Syntax
    .viewport(width)
    .percySnapshot(`${name} - ${width}`, { widths: [width], ...options })
    // Set back the orignal width if you'd like
    //.viewport()
});

// usage:
cy.percyResponsiveSnapshot('Homepage', 320) 

[github-actions[bot]]

This issue is stale because it has been open for more than 14 days with no activity. Remove stale label or comment or this will be closed in 14 days.