Checking if the page is fully loaded

Using Streamlit
1

Hi there, how you people doing?

Context:

I developed a Streamlit report that will eventually be integrated into a portal. For now, we are capturing screenshots of the report using Selenium and saving them as PNGs in an S3 bucket.

The Problem:

Since the report involves data processing, Selenium needs some time to fully load the page before capturing the screenshot. Initially, we used time.sleep(), but this approach was unreliable—sometimes it waited too long, and other times, not long enough.

We then experimented with tracking when the page was fully loaded. The simplest solution was to add an invisible container that loads last, signaling when the page is ready. This worked about 90% of the time.

However, in some cases, even though the container was loaded, certain elements—like charts—were not fully rendered. We also attempted using a spinner, but this significantly increased loading time (from 4s to over 30s).

Question:

Is there a reliable way to ensure that all page elements, including charts, are fully rendered before taking the screenshot?

2

Best I’ve been able to find so far (I’m using playwright not selenium so YMMV) is something that checks for idle network state (e.g. for playwright page.wait_for_load_state("networkidle"). Sadly I’ve found some things (e.g. I suspect st.fragment-type reruns) make it look like streamlit is loaded up when it is not. But this is the best I’ve found to date.

3

If checking the ready state of the app doesn’t give you the results you need, you could try injecting some invisible element at the end of your script with a particular class or ID. You could update this ID if you need to handle reruns of the same page (e.g. dynamically generate an invisible element at the beginning and a matching one at the end, changing the ID on each rerun)

4

I tried some things that worked, i can be sure if it will work for everything:

  1. I asked to wait until the last element from my page loads. It worked great when i had no charts, with charts i used a time.sleep(2) to be sure that the charts loaded

  2. I also checked the DOM until nothing more was loaded. Worked sometimes and i couldn’t find why. Like, 80% of the tries were right, with everything loaded, but sometimes if failed to identify things!

5

Something a bit hacky that I just came up with: wait until the Stop button disappears (as this is a sign the “running man” indicating a rerun is happening has also stopped). I believe this button is missing in many deployment patterns, so may not be a perfect solution, but we’re using playwright for testing via GitHub Actions so it should suffice:

async def rerun_complete(page):
    # Stop button disappears when "running man" is done
    await expect(page.locator("button").get_by_text("Stop")).not_to_be_visible()