Skip to main content
Transform your testing process with: Company-wide Licences, Test Observability & App Percy
No Result Found

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:

Cypress
Copy icon Copy

Reference Topic

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked





Thank you for your valuable feedback

Is this page helping you?

Yes
No

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked





Thank you for your valuable feedback!

Talk to an Expert
Download Copy Check Circle