How to handle responsive DOM changes about percy-cypress HOT 5 CLOSED

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) 

from percy-cypress.

@Robdel12 thanks a lot for the response. You are exactly correct and what you suggest makes a lot of sense and I will give it a shot.

from percy-cypress.

Hey, just wanted to say thanks for the answer, it pinpointed my issue perfectly.
Is it really not possible to group those snapshots in Percy when manually changing the viewport with Cypress?
I'm trying to convince my company to use Percy, and this is probably a deal-breaker 😢

from percy-cypress.

I tried this on 4.11.0 (cypress) + 2.3.1 (@percy/cypress) and ran into an issue where the cy.viewport command expects either a width and height integer, or a preset string like 'macbook-13' while puppeteer, which is used by percy still expects a width integer. So the above did not work for me. I ended up having to pass the preset string to the cy.viewport command and an integer to the percySnapshot command.

from percy-cypress.

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.

from percy-cypress.