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>