Updated example screenshot of the toolbar with the new design.

docs/changes.rst

@@ -19,6 +19,9 @@ Pending
   an ``aria-live`` status for history refreshes, and WCAG 2.1 AA contrast in
   both themes.
 * Added a talk to the resources documentation.
+* Updated the example screenshot.
+* Updated the screenshot capture logic to find the toolbar elements in the
+  shadow DOM.
 
 7.1.1 (2026-08-14)
 ------------------

example/screenshot.py

@@ -5,6 +5,7 @@
 import subprocess
 from time import sleep
 
+from selenium.common import NoSuchElementException
 from selenium.webdriver.common.by import By
 from selenium.webdriver.common.keys import Keys
 from selenium.webdriver.support import expected_conditions as EC
@@ -17,7 +18,7 @@ def parse_args():
     parser.add_argument("--headless", action="store_true")
     parser.add_argument("--outfile", "-o", required=True)
     parser.add_argument("--width", type=int, default=900)
-    parser.add_argument("--height", type=int, default=700)
+    parser.add_argument("--height", type=int, default=1200)
     return parser.parse_args()
 
 
@@ -61,6 +62,21 @@ def submit_form(selenium, data):
     WebDriverWait(selenium, timeout=5).until(EC.url_changes(url))
 
 
+def find_including_toolbar(selenium, by, value):
+    """Find the toolbar elements within the shadow root DOM"""
+    selectors = {
+        By.ID: "#{}",
+        By.CLASS_NAME: ".{}",
+        By.TAG_NAME: "{}",
+        By.CSS_SELECTOR: "{}",
+    }
+    try:
+        return selenium.find_element(by, value)
+    except NoSuchElementException:
+        shadow_root = selenium.find_element(By.ID, "djDebugRoot").shadow_root
+        return shadow_root.find_element(By.CSS_SELECTOR, selectors[by].format(value))
+
+
 def main():
     args = parse_args()
     with example_server() as p:
@@ -73,12 +89,12 @@ def main():
 
                 selenium.get("http://localhost:8000/admin/auth/user/")
                 # Check if SQL Panel is already visible:
-                sql_panel = selenium.find_element(By.ID, "djdt-SQLPanel")
+                sql_panel = find_including_toolbar(selenium, By.ID, "djdt-SQLPanel")
                 if not sql_panel:
                     # Open the admin sidebar.
-                    el = selenium.find_element(By.ID, "djDebugToolbarHandle")
+                    el = find_including_toolbar(selenium, By.ID, "djDebugToolbarHandle")
                     el.click()
-                    sql_panel = selenium.find_element(By.ID, "djdt-SQLPanel")
+                    sql_panel = find_including_toolbar(selenium, By.ID, "djdt-SQLPanel")
                 # Open the SQL panel.
                 sql_panel.click()