fix: use available Python in visual CI

playwright.config.js

@@ -1,5 +1,17 @@
+const fs = require("fs");
+
 const { defineConfig, devices } = require("@playwright/test");
 
+const python =
+  process.env.PYTHON_BIN ||
+  (process.platform === "win32"
+    ? fs.existsSync(".venv\\Scripts\\python.exe")
+      ? ".venv\\Scripts\\python.exe"
+      : "python"
+    : fs.existsSync(".venv/bin/python")
+      ? ".venv/bin/python"
+      : "python");
+
 module.exports = defineConfig({
   testDir: "./tests/visual",
   timeout: 30_000,
@@ -29,7 +41,7 @@ module.exports = defineConfig({
     },
   ],
   webServer: {
-    command: "npm run build:css && .venv/bin/python -m flask --app demo.app run --no-debugger --no-reload --port 5000",
+    command: `npm run build:css && ${python} -m flask --app demo.app run --no-debugger --no-reload --port 5000`,
     url: "http://127.0.0.1:5000",
     reuseExistingServer: !process.env.CI,
     timeout: 120_000,

tests/visual/gallery.spec.js

@@ -1,34 +1,48 @@
 const { test, expect } = require("@playwright/test");
 
+async function screenshotOptions(page, testInfo) {
+  const viewport = page.viewportSize();
+  const minimumHeight = testInfo.project.name === "mobile" ? 2196 : 1520;
+  const contentHeight = await page.evaluate(
+    () => document.documentElement.scrollHeight,
+  );
+  const height = Math.max(contentHeight, minimumHeight);
+
+  await page.setViewportSize({ ...viewport, height });
+
+  return {
+    animations: "disabled",
+    fullPage: false,
+    maxDiffPixelRatio: 0.05,
+  };
+}
+
 test.describe("component gallery", () => {
-  test("gallery layout remains stable", async ({ page }) => {
+  test("gallery layout remains stable", async ({ page }, testInfo) => {
     await page.goto("/");
     await expect(page).toHaveTitle(/component gallery/);
-    await expect(page).toHaveScreenshot("gallery.png", {
-      animations: "disabled",
-      fullPage: true,
-      maxDiffPixelRatio: 0.05,
-    });
+    await expect(page).toHaveScreenshot(
+      "gallery.png",
+      await screenshotOptions(page, testInfo),
+    );
   });
 
-  test("mobile layout remains stable", async ({ page }) => {
+  test("mobile layout remains stable", async ({ page }, testInfo) => {
     await page.goto("/");
-    await expect(page).toHaveScreenshot("gallery.png", {
-      animations: "disabled",
-      fullPage: true,
-      maxDiffPixelRatio: 0.05,
-    });
+    await expect(page).toHaveScreenshot(
+      "gallery.png",
+      await screenshotOptions(page, testInfo),
+    );
   });
 
-  test("dark theme remains readable", async ({ page }) => {
+  test("dark theme remains readable", async ({ page }, testInfo) => {
     await page.goto("/");
     await page.evaluate(() => {
       document.documentElement.dataset.theme = "dark";
     });
-    await expect(page).toHaveScreenshot("gallery-dark.png", {
-      animations: "disabled",
-      fullPage: true,
-      maxDiffPixelRatio: 0.05,
-    });
+    await expect(page).toHaveScreenshot(
+      "gallery-dark.png",
+      await screenshotOptions(page, testInfo),
+    );
   });
 });