How to Assert That Lazy Loading is Working

Question

I have a table of data that loads rows 50 at a time. If you scroll to the bottom, lazy loading triggers and 50 more rows show. Currently my test for this scrolls to the bottom of the page and a while loop waits for there to be more rows. I am happy with this but I want to do more.

In my lazy loading there is a spinning wheel and a message "Fetching, more rows...". Ideally I would be able to check for this message but the elements only show for a split second then disappears as the rows are loaded. What is the best way to attempt this?

This is the HTML that contains the message I am looking for but not sure exactly what to do with it:

<style type="text/css">
    #loading { display: block; visibility: visible; opacity: 1; position: 
    absolute; z-index: 100; top: 53px; left: 50%; background-color: fafafa; 
    text-align: center; font-size: 2em; height: 900px; width: 1200px; 
    background-position: center 240px; background-repeat: no-repeat; 
    background-image: url(......); margin: 0 -600px; padding: 190px 0; }
    #loading:before { content: 'Loading...'; } .col-next 
    #loading:before { content: 'Fetching more rows, please stand by...'; } .col-next 
    #loading[data-range-end]:before { content: 'Fetching rows 
    from ' attr(data-range-end); }
</style>

<style type="text/css">
    #loading { visibility: hidden; opacity: 0; transition: opacity 1s, 
    visibility 1s linear 1s; }
</style>

Answer 1

IMHO showing or hiding a spinning wheel does not necessarily mean that the loading feature works correctly. Its more a cosmetic thing.

I would count the number of loaded rows before the check, then scroll the page down and wait until more rows are shown (if more rows are not shown in a certain threshold I would throw an error that could be handled by a testing framework). Then I would check if the number of newly loaded rows corresponds to the expectations.

To fetch number of rows you need to be aware of your table structure and build corresponding xpath query.

Answer 2

If it really, really only appears for a few milliseconds, there are things you could experiment with.

• Use an explicit wait but set the polling interval as low as possible (1 millisecond?) and see if it catches the spinner.

• Try setting the Chrome throttling (via chrome options) to the lowest setting. This could possibly slow down the loading, thus keeping the spinner longer on screen. Then you can certainly use an explicit wait.

• As a final resort, try injecting some javascript to check whether or not the spinner has been shown.

Answer 3

This will be a very fragile automated test, I would suggest to manually verify it.

As always suggested , not everything should be automated.Its the cost trade-off which helps one decide to automate or not something.In this scenario the value received from this test is very less compared to the cost associated of creation & maintenance.

Answer 4

Use the following code it worked for me. I am using javascript to find the max scrollable position and scroll till that point, the again get the max scrollable position. Compare it with the older position if they are not the same, loop executes again. In between I check if the webelement required is loaded in the grid.

//div is the webelement of the div which has the lazy load scroll. //element is the webelement we need to verify.

boolean status = false;
try {
            JavascriptExecutor javascriptExecutor = (JavascriptExecutor) webDriver;
            WebElement element, div = webDriver.findElement(divlocator);

            Long divHtBF, divHtAF;
            boolean status = false;
            do {
                divHtBF = (Long) javascriptExecutor.executeScript("return arguments[0].scrollHeight", div);
                javascriptExecutor.executeScript("arguments[0].scrollTop = arguments[0].scrollHeight", div);
                divHtAF = (Long) javascriptExecutor.executeScript("return arguments[0].scrollHeight", div);
                element = webDriver.findElement(elementlocator);
                status = element.isDisplayed();
            } while ((divHtBF != divHtAF) & (!status));
            return status;
        } catch (Exception e) {
            e.printStackTrace();
            return false;
        }