Capturing responsive snapshots
Learn how to handle responsive snapshots when performing automated visual testing.
Percy captures responsive snapshots which allows users to provide multiple root resources for a single snapshot. This ensures accurate rendering for responsive websites.
Prerequisites
- Use @percy/cli version 1.30.0 or higher.
- Install the corresponding SDK with the specified version.
- For the best experience, use Chrome with Selenium version 4 or higher.
Configurations
Learn how to use the responsiveSnapshotCapture flag in global configuration file or at the snapshot level.
Global configuration file
Snapshot level
Use Percy SDK version v2.1.0 or higher for Python, JavaScript, .NET, and Java. Use v1.1.0 or higher for Ruby.
Use the RESPONSIVE_CAPTURE_SLEEP_TIME environment variable to wait after each resize if your webpage is not loading properly at certain widths. Set it to an integer value in seconds; the default is 0.
Things to keep in mind:
- Set deferUploads to false when using this feature.
- You can pass the width when taking individual snapshots, either at the global configuration or snapshot level based on your requirements. Learn more.
- Firefox can only capture snapshots for DOM widths 450px or larger due to a resizing limitation.
- With Selenium 3, resize Chrome to a minimum of 500px. Firefox retains the 450px limit due to the resizing limitation.
Related 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
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!