How can I integrate Superset charts with PlayWright to ensure all charts on the page are fully rendered before taking a screenshot?

[1sanqian]

How can I integrate Superset charts with Playwright to ensure all charts on the page are fully rendered before taking a screenshot? My current Superset version is 4.0.1.

[dosubot[bot]]

Hi @1sanqian! I'm Dosu and I’m helping the superset team.

Superset 4.0.1 has built-in Playwright integration for screenshots and reports. To use it, set PLAYWRIGHT_REPORTS_AND_THUMBNAILS = True in your superset_config.py, install the playwright Python package, and restart Superset and all Celery workers. This integration is more robust than Selenium, especially for dashboards with many charts or Deck.gl visualizations [source].

Superset ensures all charts are fully rendered before taking a screenshot by:

• Waiting for the main dashboard or chart container element to appear (by class name).
• Waiting for all .chart-container elements to be present.
• Waiting for all .loading elements to disappear (state 'detached'), which means charts have finished rendering.
• Optionally waiting for a configurable animation delay (SCREENSHOT_SELENIUM_ANIMATION_WAIT) and headstart (SCREENSHOT_SELENIUM_HEADSTART) [source].

If you want to mimic this in your own Playwright script, the core logic looks like:

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page()
    page.goto("https://your-superset-url/superset/dashboard/123/", wait_until="load")
    page.wait_for_selector(".dashboard")  # or the main container class
    for elem in page.query_selector_all(".chart-container"):
        elem.wait_for_element_state("visible")
    for loading in page.query_selector_all(".loading"):
        loading.wait_for_element_state("detached")
    page.wait_for_timeout(5000)  # Optional: wait for animations (5s)
    page.screenshot(path="dashboard.png")
    browser.close()

You can tune timeouts and delays using Superset config options like SCREENSHOT_PLAYWRIGHT_DEFAULT_TIMEOUT, SCREENSHOT_SELENIUM_ANIMATION_WAIT, and SCREENSHOT_SELENIUM_HEADSTART [source].

For large dashboards, Superset uses a tiled screenshot approach: it scrolls the dashboard, waits for content to settle after each scroll, and captures each section, combining them into a full screenshot. This ensures even content outside the initial viewport is fully rendered and captured [source].

If you use Superset's built-in Playwright integration, these waits and checks are handled for you. If you need more control or custom logic, you can adapt the example above.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[1sanqian]

我使用的是C# 语言,请回复我相关这个语言的解决方法@dosu

[hexsyro]

1. Wait for .chart-container elements
2. Wait for loading indicators to disappear
3. Wait for network idle (all data loaded)
4. Add small buffer for animations