Unsuccessful capture of responsive DOM snapshots

Learn how to handle responsive DOM changes in Percy.

Percy’s SDKs capture a single DOM snapshot and subsequently re-render that DOM across the snapshot widths. This approach assumes that the DOM remains same across various widths.

If your application’s DOM changes at different widths, you must resize the test browser to the appropriate width and then capture a Percy snapshot. This ensures that DOM’s state aligns correctly with the specified width.

How you achieve this is different between test frameworks but the principals are the same. Learn more

• Ensure defer-uploads: true is set to true in configuration yml file. Learn more
• Capture Percy snapshots specifically for the designated width, ensuring a consistent snapshot name. This enables Percy to group together multiple widths seamlessly.
• Resize the test browser
• Capture a Percy snapshot for just that width

For example, in Cypress:

Reference Topic

• Percy Common - FAQs