Transcripted Summary
The next interesting case we're going to look at is lazy loading. Some pages employ lazy loading techniques to improve the performance of their webpage. What this means is that the page will not load certain resources, such as images, until the user has scrolled them into the viewport. This can be problematic when writing automation tests as you will need to ensure that all of the resources are loaded into the DOM before you call eyes.check(). Otherwise, the unloaded resources won't be sent to the Ultrafast Grid and won't show up in your test results. The Applitools Eyes SDKs offer a built-in mechanism for ensuring that your page's resources have been loaded into the page before capturing a screenshot.
In the last section, we captured a full page screenshot of the Applitools home page. If you looked closely at those test results however, you'd have noticed that some of the images were missing. This is because these images are lazy loaded and we never loaded them in before capturing the Dom Snapshot. Let's head over to our code and make a change to resolve this issue.
To handle the lazy loading, I've added this call to the .lazyLoad() method within our call to eyes.check(). This function will incrementally scroll down the page and ensure that the resources are loaded in before it captures the DOM Snapshot and sends it to the Ultrafast Grid.
The lazyLoad function works fine with no arguments passed to it however, you are able to configure the time it waits before scrolling, how big of a scroll it performs and more by passing a LazyLoadOptions object to it. I've placed documentation on this in the write up down below for those interested. Let's now rerun our test and review the results once again.
If we check out our test results, we can see that after adding the lazyLoad() function to our call to eyes.check(), all of the images are now loading in as expected.
The lazyLoad function is a quick solution for capturing lazy loaded pages that is built right into the Eyes SDK. It will scroll the page for you so that you don't need to implement custom logic and also allows you to configure how the algorithm performs. Be sure to only call the lazyLoad function for pages that absolutely need it as this can slow down your test suite if it's run for every single test case.
