Wait for asynchronous load

Trakr’s screenshot processing engine takes an aggressive approach by default when taking the screenshot of a page. This is aimed to be efficient and fast. While this works for a majority of websites and web-apps, sometimes it comes with the expense of screenshot quality.

When do we need to wait for asynchronous load

Asynchronous loading (sometimes referred to as AJAX) is a common technique for modern browsers to progressively load elements in order to speed up the entire page load time. It is also originally designed to mimic desktop applications by minimizing the need for a page reload.

An example of asynchronous page loading is demonstrated below:

Upon inspection of the html, we can see that a CSS class “loaded” is added to the body element when the page completes its asynchronous loading process. This is a common practice on websites.

 

Configure Trakr to wait for asynchronous loading

We can configure Trakr to wait for asynchronous loading by “listening” to a specific element on the page (normally body or html tag) and the presence of a specific CSS class on that tag before taking the screenshot. Trakr will wait up to 15 seconds before issuing a wait timeout error.

You can find this under project settings >> screenshot

It’s also possible to listen for a specific CSS class to disappear from an element (e.g. a CSS class named “loading”) before taking the screenshot by unchecking the “CSS class is present” box.