GitHub user dosubot[bot] added a comment to the discussion: How can I integrate Superset charts with PlayWright to ensure all charts on the page are fully rendered before taking a screenshot?
<!-- Greeting --> Hi @1sanqian! I'm [Dosu](https://go.dosu.dev/dosubot) and Iām helping the superset team. <!-- Answer --> 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](https://github.com/apache/superset/issues/34913)]. 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](https://github.com/apache/superset/blob/master/superset/utils/webdriver.py)]. If you want to mimic this in your own Playwright script, the core logic looks like: ```python 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](https://github.com/apache/superset/blob/master/superset/config.py)]. 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](https://github.com/apache/superset/pull/36051)]. 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. <!-- Dosu Comment Footer --> *To reply, just mention [@dosu](https://go.dosu.dev/dosubot).* --- <sup>How did I do? [Good](https://app.dosu.dev/response-feedback/e596e2b4-13ca-48fc-9d8e-2321468440fb?feedback_type=great_response) | [Irrelevant](https://app.dosu.dev/response-feedback/e596e2b4-13ca-48fc-9d8e-2321468440fb?feedback_type=irrelevant_answer) | [Incorrect](https://app.dosu.dev/response-feedback/e596e2b4-13ca-48fc-9d8e-2321468440fb?feedback_type=incorrect_sources) | [Verbose](https://app.dosu.dev/response-feedback/e596e2b4-13ca-48fc-9d8e-2321468440fb?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/e596e2b4-13ca-48fc-9d8e-2321468440fb?feedback_type=hallucination) | [Report š](https://app.dosu.dev/response-feedback/e596e2b4-13ca-48fc-9d8e-2321468440fb?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/e596e2b4-13ca-48fc-9d8e-2321468440fb?feedback_type=other)</sup> [](https://app.dosu.dev/a28d3c7e-a9d3-459e-9fb6-3a6f9ff4f357/ask?utm_source=github) [](https://cursor.com/link/prompt?text=Superset%204.0.1%20has%20built-in%20Playwright%20integration%20for%20screenshots%20and%20reports.%20To%20use%20it%2C%20set%20%60PLAYWRIGHT_REPORTS_AND_THUMBNAILS%20%3D%20True%60%20in%20your%20%60superset_config.py%60%2C%20install%20the%20%60playwright%60%20Python%20package%2C%20and%20restart%20Superset%20and%20all%20Celery%20workers.%20This%20integration%20is%20more%20robust%20than%20Selenium%2C%20especially%20for%20dashboards%20with%20many%20charts%20or%20Deck.gl%20visualizations%20%5B%5Bsource%5D%28https%3A//github.com/apache/superset/issues/34913%29%5D.%0A%0ASuperset%20ensures%20all%20charts%20are%20fully%20rendered%20before%20taking%20a%20screenshot%20by%3A%20%20%0A-%20Waiting%20for%20the%20main%20dashboard%20or%20chart%20container%20element%20to% 20appear%20%28by%20class%20name%29.%0A-%20Waiting%20for%20all%20%60.chart-container%60%20elements%20to%20be%20present.%0A-%20Waiting%20for%20all%20%60.loading%60%20elements%20to%20disappear%20%28state%20%60%27detached%27%60%29%2C%20which%20means%20charts%20have%20finished%20rendering.%0A-%20Optionally%20waiting%20for%20a%20configurable%20animation%20delay%20%28%60SCREENSHOT_SELENIUM_ANIMATION_WAIT%60%29%20and%20headstart%20%28%60SCREENSHOT_SELENIUM_HEADSTART%60%29%20%5B%5Bsource%5D%28https%3A//github.com/apache/superset/blob/master/superset/utils/webdriver.py%29%5D.%0A%0AIf%20you%20want%20to%20mimic%20this%20in%20your%20own%20Playwright%20script%2C%20the%20core%20logic%20looks%20like%3A%0A%0A%60%60%60python%0Afrom%20playwright.sync_api%20import%20sync_playwright%0A%0Awith%20sync_playwright%28%29%20as%20p%3A%0A%20%20%20%20browser%20%3D%20p.chromium.launch%28%29%0A%20%20%20%20page%20%3D%20browser.new_page%28%29%0A%20%20%20%20page.goto%28%22https%3A//your-superset-url/superset/dashboar d/123/%22%2C%20wait_until%3D%22load%22%29%0A%20%20%20%20page.wait_for_selector%28%22.dashboard%22%29%20%20%23%20or%20the%20main%20container%20class%0A%20%20%20%20for%20elem%20in%20page.query_selector_all%28%22.chart-container%22%29%3A%0A%20%20%20%20%20%20%20%20elem.wait_for_element_state%28%22visible%22%29%0A%20%20%20%20for%20loading%20in%20page.query_selector_all%28%22.loading%22%29%3A%0A%20%20%20%20%20%20%20%20loading.wait_for_element_state%28%22detached%22%29%0A%20%20%20%20page.wait_for_timeout%285000%29%20%20%23%20Optional%3A%20wait%20for%20animations%20%285s%29%0A%20%20%20%20page.screenshot%28path%3D%22dashboard.png%22%29%0A%20%20%20%20browser.close%28%29%0A%60%60%60%0A%0AYou%20can%20tune%20timeouts%20and%20delays%20using%20Superset%20config%20options%20like%20%60SCREENSHOT_PLAYWRIGHT_DEFAULT_TIMEOUT%60%2C%20%60SCREENSHOT_SELENIUM_ANIMATION_WAIT%60%2C%20and%20%60SCREENSHOT_SELENIUM_HEADSTART%60%20%5B%5Bsource%5D%28https%3A//github.com/apache/superset/blob/master/superset/config .py%29%5D.%0A%0AFor%20large%20dashboards%2C%20Superset%20uses%20a%20tiled%20screenshot%20approach%3A%20it%20scrolls%20the%20dashboard%2C%20waits%20for%20content%20to%20settle%20after%20each%20scroll%2C%20and%20captures%20each%20section%2C%20combining%20them%20into%20a%20full%20screenshot.%20This%20ensures%20even%20content%20outside%20the%20initial%20viewport%20is%20fully%20rendered%20and%20captured%20%5B%5Bsource%5D%28https%3A//github.com/apache/superset/pull/36051%29%5D.%0A%0AIf%20you%20use%20Superset%27s%20built-in%20Playwright%20integration%2C%20these%20waits%20and%20checks%20are%20handled%20for%20you.%20If%20you%20need%20more%20control%20or%20custom%20logic%2C%20you%20can%20adapt%20the%20example%20above.) [](https://go.dosu.dev/discord-bot) [](https://twitter.com/intent/tweet?text=%40dosu_ai%20helped%20me%20solve%20this%2 0issue!&url=https%3A//github.com/apache/superset/discussions/36839) GitHub link: https://github.com/apache/superset/discussions/36839#discussioncomment-15346492 ---- This is an automatically sent email for [email protected]. To unsubscribe, please send an email to: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
