Hide sticky headers in tests

Add style tag in screenshot routine

Author: philippamarkovics

src/nextjournal/clerk/render.cljs

@@ -515,7 +515,7 @@
     [:div
      [:div.overflow-x-auto.overflow-y-hidden.w-full
       (into [:table.text-xs.sans-serif.text-gray-900.dark:text-white.not-prose {:ref !table-ref}] children)]
-     [:div.overflow-x-auto.overflow-y-hidden.w-full.shadow
+     [:div.overflow-x-auto.overflow-y-hidden.w-full.shadow.sticky-table-header
       [:table.text-xs.sans-serif.text-gray-900.dark:text-white.not-prose {:ref !table-clone-ref :style {:margin 0}}]]]))
 
 (defn throwable-view [{:keys [via trace]}]

ui_tests/screenshots.cljs

@@ -44,6 +44,7 @@
   ([{:keys [out-dir]} page]
    (println+flush "📷 Starting screenshotting…")
    (p/let [og-captures (.locator page ".open-graph-image-capture")
+           _ (.addStyleTag page #js {:content ".sticky-table-header { display: none !important; box-shadow: none !important;}"})
            og-captures-count (.count og-captures)
            results (if (< 0 og-captures-count)
                      og-captures
@@ -56,25 +57,25 @@
          (p/let [res (.nth results i)
                  bounds (.boundingBox res)]
            (if true #_ (<= 250 (.-height bounds))
-             (p/let [id (.getAttribute res "data-block-id")
-                     imgs (.locator res "img")
-                     imgs-count (.count imgs)
-                     single-image? (= imgs-count 1)
-                     _ (println+flush (str "🔍 Result #" (inc i) " contains " imgs-count " " (if single-image? "image" "images") "."))
-                     subject (if single-image? (.first imgs) res)
-                     _ (println+flush (str "📸 Screenshotting result #" (inc i) " - ID: " id
-                                           " (" (if single-image? "single image" "entire result") ")"
-                                           " with bounds " (.-width bounds) "×" (.-height bounds)))
-                     buffer (.screenshot subject)
-                     base64 (.toString buffer "base64")
-                     image-uri (str "data:image/png;base64," base64)
-                     _ (.evaluate res (str "nextjournal.clerk.trim_image.append_trimmed_image("
-                                           (pr-str image-uri) "," (pr-str (str "res-" i)) ")"))
-                     trimmed-res (.locator page (str "#res-" i))
-                     trimmed-bounds (.boundingBox trimmed-res)]
-               (println+flush (str "🔪 Trimming result #" (inc i) " to bounds " (.-width trimmed-bounds) "×" (.-height trimmed-bounds)))
-               (.screenshot trimmed-res #js {:path (->path out-dir (str (if id (name (edn/read-string id)) (str "result-" (inc i))) ".png"))}))
-             (println+flush "🦘 Skipping result with bounds" (str (.-width bounds) "×" (.-height bounds))))
+               (p/let [id (.getAttribute res "data-block-id")
+                       imgs (.locator res "img")
+                       imgs-count (.count imgs)
+                       single-image? (= imgs-count 1)
+                       _ (println+flush (str "🔍 Result #" (inc i) " contains " imgs-count " " (if single-image? "image" "images") "."))
+                       subject (if single-image? (.first imgs) res)
+                       _ (println+flush (str "📸 Screenshotting result #" (inc i) " - ID: " id
+                                             " (" (if single-image? "single image" "entire result") ")"
+                                             " with bounds " (.-width bounds) "×" (.-height bounds)))
+                       buffer (.screenshot subject)
+                       base64 (.toString buffer "base64")
+                       image-uri (str "data:image/png;base64," base64)
+                       _ (.evaluate res (str "nextjournal.clerk.trim_image.append_trimmed_image("
+                                             (pr-str image-uri) "," (pr-str (str "res-" i)) ")"))
+                       trimmed-res (.locator page (str "#res-" i))
+                       trimmed-bounds (.boundingBox trimmed-res)]
+                 (println+flush (str "🔪 Trimming result #" (inc i) " to bounds " (.-width trimmed-bounds) "×" (.-height trimmed-bounds)))
+                 (.screenshot trimmed-res #js {:path (->path out-dir (str (if id (name (edn/read-string id)) (str "result-" (inc i))) ".png"))}))
+               (println+flush "🦘 Skipping result with bounds" (str (.-width bounds) "×" (.-height bounds))))
            (p/recur (inc i)))
          (println+flush "✅ Done."))))))