broken snapshots dealing with DOM changes & responsiveness

[Judimax]

Hello all

if you head to https://sortforyou.com you will find the site to be very responsive

percy is resizing something but my app cannot pick up on what percy is doing, can someone help as to why the snapshots are giving us weird photos of our website. is there a wait supposed to happen in between https://percy.io/WindsorEmpire/website/builds/3999456

[Robdel12]

Hey @MichaelOdumosu57! I can't load the site at the moment:

But my guess is the websites DOM changes based on width (JS needs to run)? Percy works by capturing a single DOM snapshot and then rendering that at various widths. This works really well if the layout is changed with just CSS media queries, but won't work if the DOM needs to change based on screensize. You can do two things:

• Enable JavaScript for your snapshots. This could fix this issue, but it also tends to introduce other issues where the JS can change things on the page, causing unstable snapshots (and lots of diffs). It's always worth trying this first, though. It's the easiest and if it works well then that's awesome 😃
• If that doesn't work then you will need to resize the test browser for each snapshot width using the resize_to method. Something like this:

page.current_window.resize_to(1800, 800)
Percy.snapshot(page, { name: 'Name - 1800', widths: [1800] })

page.current_window.resize_to(1187, 800)
Percy.snapshot(page, { name: 'Name - 1187', widths: [1187] })

This does lose the ability to group snapshot widths together (which is something we're looking to handle nicely in the future for you)

[Judimax]

I had to do the 2nd option and it worked thnx

[Judimax]

sorry about I'll redeploy in a few minutes we had to use the 2nd solution you gave us to get our responsive testing however for this one page, I put a specific sleep however I think its that js problem If you can explain what js might be doing we appreciate it otherwise head to blog anchor on the home page and give it a mobile emulation

here the screenshot we slept 30 sec on before taking https://percy.io/WindsorEmpire/website/builds/4003090 we deployed the site your should see it now

[cesarizu]

@Robdel12 Has the ability to group snapshot widths together been implemented yet?

[Robdel12]

It has not @cesarizu -- you will still need to interpolate the width into the snapshot name.

[cesarizu]

@Robdel12 Applying this workaround, is there any way to sort the snapshots by name on the Percy review screen? Right now they are sorted first by size, so related snapshots are very far away.

[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.

[github-actions[bot]]

This issue was closed because it has been stalled for 28 days with no activity.