Capturing lazy-loaded elements in Percy snapshots

Learn how to use beforeSnapshot option to scroll and capture lazy-loaded elements.

Lazy-loaded elements (for example: a footer logo) are not captured in Percy snapshots when using the snapshot command without a test browser. This happens because the asset-discovery browser doesn’t scroll, so elements outside the initial viewport are not requested or loaded. While waitForSelector and window.scrollTo work in test or renderer browsers, they don’t affect the asset-discovery browser.

To address this, use the beforeSnapshot option in your snapshots.yml file to scroll the page in the asset-discovery browser before the snapshot is taken. This ensures that lazy-loaded elements enter the viewport and get captured correctly.

This scrolls to the bottom of the page before Percy captures the snapshot, allowing lazy-loaded elements like footer logos to load and appear correctly.

Reference Topic

• Percy Common - FAQs