improve ci action renders

gabrielburnworth · gabrielburnworth · commit 9bd0d5fccfb0 · 2026-06-10T13:05:15.000-07:00
diff --git a/scripts/ci/combine-render-images b/scripts/ci/combine-render-images
@@ -1,4 +1,5 @@
 #!/usr/bin/env bun
+// @ts-nocheck
 const fs = require('fs');
 const path = require('path');
 const { chromium } = require('playwright');
@@ -17,7 +18,7 @@ const screenshotName = requiredEnv('SCREENSHOT_NAME');
 const fpsSamplesName = requiredEnv('FPS_SAMPLES_NAME');
 const sceneMetricsName = requiredEnv('SCENE_METRICS_NAME');
 const feCoverageName = requiredEnv('FE_COVERAGE_NAME');
-const renderImageScale = Number(process.env.COMBINED_RENDER_IMAGE_SCALE || 2);
+const renderImageScale = Number(process.env.COMBINED_RENDER_IMAGE_SCALE || 3);
 if (!Number.isFinite(renderImageScale) || renderImageScale <= 0) {
     console.error('COMBINED_RENDER_IMAGE_SCALE must be a positive number');
     process.exit(1);
@@ -34,10 +35,27 @@ const metricRow = name => [
     [`${name} metrics`, imagePath(`${sceneMetricsName}_${name}`)],
     [],
 ];
-const screenshotCell = name => [
-    name.replace(/_/g, ' '),
-    imagePath(`${screenshotName}_${name}`),
-];
+const actionScreenshotPaths = name => {
+    const prefix = `${screenshotName}_${name}_action_`;
+    if (!fs.existsSync('/tmp')) { return []; }
+    return fs.readdirSync('/tmp')
+        .filter(file => file.startsWith(prefix) && file.endsWith('.png'))
+        .sort((a, b) => {
+            const aIndex = Number(a.slice(prefix.length, -4));
+            const bIndex = Number(b.slice(prefix.length, -4));
+            return aIndex - bIndex;
+        })
+        .map(file => path.join('/tmp', file));
+};
+const screenshotCell = name => {
+    const actionPaths = actionScreenshotPaths(name);
+    return [
+        name.replace(/_/g, ' '),
+        actionPaths.length > 0
+            ? actionPaths
+            : imagePath(`${screenshotName}_${name}`),
+    ];
+};
 const rows = [
     metricRow('promo_xl'),
     metricRow('app'),
@@ -62,21 +80,26 @@ const escapeHtml = value => String(value)
     .replace(/</g, '&lt;')
     .replace(/>/g, '&gt;')
     .replace(/"/g, '&quot;');
-const cell = ([title, filePath]) => {
-    if (!title && !filePath) {
+const imageTag = filePath => `<img src="${imageData(filePath)}" />`;
+const cell = ([title, filePaths]) => {
+    if (!title && !filePaths) {
         return '<div class="empty"></div>';
     }
-    if (!fs.existsSync(filePath)) {
+    const paths = Array.isArray(filePaths) ? filePaths : [filePaths];
+    const existingPaths = paths.filter(filePath => filePath && fs.existsSync(filePath));
+    if (existingPaths.length === 0) {
+        const missingPath = paths.find(Boolean);
         return `
           <figure class="missing">
             <figcaption>${escapeHtml(title)}</figcaption>
-            <div>Missing ${escapeHtml(path.basename(filePath))}</div>
+            <div>Missing ${escapeHtml(path.basename(missingPath))}</div>
           </figure>`;
     }
+    const imageClass = existingPaths.length > 1 ? 'images multi-images' : 'images';
     return `
       <figure>
         <figcaption>${escapeHtml(title)}</figcaption>
-        <img src="${imageData(filePath)}" />
+        <div class="${imageClass}">${existingPaths.map(imageTag).join('')}</div>
       </figure>`;
 };
 const rowHtml = rows
@@ -105,6 +128,8 @@ const html = `<!doctype html>
     figure {
       margin: 0;
       padding: 12px;
+      min-width: 0;
+      overflow: auto;
       background: #ffffff;
       border: 1px solid #d0d7de;
       border-radius: 6px;
@@ -122,6 +147,17 @@ const html = `<!doctype html>
       height: auto;
       background: #ffffff;
     }
+    .images {
+      display: grid;
+      gap: 8px;
+    }
+    .multi-images {
+      grid-auto-flow: column;
+      grid-auto-columns: minmax(0, 1fr);
+    }
+    .multi-images img {
+      object-fit: contain;
+    }
     .missing div {
       min-height: 160px;
       display: grid;
diff --git a/scripts/ci/render-env b/scripts/ci/render-env
@@ -6,7 +6,7 @@
 : "${SCENE_METRICS_NAME:=scene_metrics}"
 : "${CHOSEN_METRICS:=${SCENE_METRICS_NAME}_${CHOSEN_NAME}}"
 : "${COMBINED_RENDER_IMAGE:=render_summary}"
-: "${COMBINED_RENDER_IMAGE_SCALE:=2}"
+: "${COMBINED_RENDER_IMAGE_SCALE:=3}"
 : "${FE_COVERAGE_NAME:=fe_coverage}"
 : "${SCENE_METRICS_HEADER:=epoch, FPS, Calls, Triangles, Points, Lines, Geometries, Textures, Objects, Meshes, Instanced meshes, commit sha}"
 : "${ARTIFACT_BRANCH:=ci-artifacts}"
diff --git a/scripts/ci/render-url-records b/scripts/ci/render-url-records
@@ -7,10 +7,12 @@ with open(sys.argv[1], encoding="utf-8") as f:
 
 for entry in entries:
     actions = entry.get("actions", [])
+    roi = entry.get("roi", {})
     print("\034".join([
         entry["name"],
         entry["mode"],
         entry["url"],
         json.dumps(actions, separators=(",", ":")) if actions else "",
         entry.get("state", ""),
+        json.dumps(roi, separators=(",", ":")) if roi else "",
     ]))
diff --git a/scripts/ci/render-urls.json b/scripts/ci/render-urls.json
@@ -32,15 +32,28 @@
       {
         "fill": {
           "placeholder": "Filter...",
-          "value": "Genesis"
+          "value": "v1.8"
+        }
+      },
+      {
+        "fill": {
+          "placeholder": "Filter...",
+          "value": "v0"
         }
       },
       {
         "hover": {
           "class": "bp6-icon-cross"
         }
       }
-    ]
+    ],
+    "roi": {
+      "x": 575,
+      "y": 430,
+      "width": 275,
+      "height": 400,
+      "scale": 2
+    }
   },
   {
     "name": "password_reset",
diff --git a/scripts/ci/run-playwright-render b/scripts/ci/run-playwright-render
@@ -92,7 +92,7 @@ valid_scene_metrics() {
   [ -n "$row" ] && [ "$row" != "undefined" ] && [ "$row" != "null" ]
 }
 
-while IFS=$'\034' read -r -u 3 name mode url actions state; do
+while IFS=$'\034' read -r -u 3 name mode url actions state roi; do
   screenshot_path="/tmp/${SCREENSHOT_NAME}_${name}.png"
   fps_samples_path="/tmp/${FPS_SAMPLES_NAME}_${name}.csv"
   scene_metrics_path="/tmp/${SCENE_METRICS_NAME}_${name}.csv"
@@ -106,6 +106,7 @@ while IFS=$'\034' read -r -u 3 name mode url actions state; do
     )
     [ -n "$actions" ] && fps_args+=(--actions "$actions")
     [ -n "$state" ] && fps_args+=(--state "$state")
+    [ -n "$roi" ] && fps_args+=(--roi "$roi")
 
     echo -e "\n\n\n"
     if [ "$mode" = "screenshot" ]; then
diff --git a/scripts/ci/test_python_scripts.py b/scripts/ci/test_python_scripts.py
@@ -119,7 +119,29 @@ def test_render_url_records_outputs_field_separated_records(self):
             "promo\034fps\034http://localhost:3000/promo\034"
             "[{\"click\":{\"title\":\"Run\"}},"
             "{\"fill\":{\"placeholder\":\"Filter...\",\"value\":\"Genesis\"}},"
-            "{\"hover\":{\"classname\":\"item\"}}]\034app\n")
+            "{\"hover\":{\"classname\":\"item\"}}]\034app\034\n")
+        self.assertEqual(stderr, "")
+
+    def test_render_url_records_outputs_roi_when_present(self):
+        with tempfile.NamedTemporaryFile("w", delete=False) as file:
+            json.dump([{
+                "name": "dropdown",
+                "mode": "screenshot",
+                "url": "http://localhost:3000/demo",
+                "roi": {"x": 1, "y": 2, "width": 3, "height": 4},
+            }], file)
+            file_path = file.name
+        try:
+            code, stdout, stderr = run_script(
+                "render-url-records", [file_path])
+        finally:
+            Path(file_path).unlink(missing_ok=True)
+
+        self.assertEqual(code, 0)
+        self.assertEqual(
+            stdout,
+            "dropdown\034screenshot\034http://localhost:3000/demo\034\034\034"
+            "{\"x\":1,\"y\":2,\"width\":3,\"height\":4}\n")
         self.assertEqual(stderr, "")
 
     def test_create_compare_link_uses_latest_deployment_sha(self):
diff --git a/scripts/fps.js b/scripts/fps.js
@@ -17,6 +17,7 @@ function parseArgs(argv) {
         '--fps-samples-path': 'samplesCsvPath',
         '--actions': 'actions',
         '--state': 'state',
+        '--roi': 'roi',
     };
 
     for (let i = 0; i < argv.length; i++) {
@@ -56,6 +57,15 @@ const openWindow = Boolean(process.env.DISPLAY && process.env.OPEN_WINDOW);
 const executablePath = process.env.PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH;
 const screenshotOnly = options.screenshotOnly;
 const actions = options.actions ? JSON.parse(options.actions) : [];
+const roi = options.roi ? JSON.parse(options.roi) : undefined;
+const roiScale = (() => {
+    if (!roi) { return undefined; }
+    const value = Number(roi.scale || 2);
+    if (!Number.isFinite(value) || value <= 0) {
+        throw new Error(`ROI scale must be a positive number: ${JSON.stringify(roi)}`);
+    }
+    return value;
+})();
 const state = options.state ? path.join('/tmp', `${options.state}.json`) : undefined;
 const saveState = path.join('/tmp', `${name}.json`);
 const commitSha = () => {
@@ -108,6 +118,7 @@ function printUsage() {
         '  --screenshot-only                      Take a screenshot without FPS metrics.',
         '  --actions <json>                       Perform ordered actions after page load.',
         '  --state <name>                         Load cookies and localStorage from /tmp/<name>.json.',
+        '  --roi <json>                           Crop screenshots to {x,y,width,height}.',
         '',
         'Environment:',
         '  CI                                    Use CI browser launch behavior.',
@@ -206,6 +217,50 @@ async function performAction(page, action) {
     throw new Error(`Unknown action: ${JSON.stringify(action)}`);
 }
 
+function screenshotOptions(destination) {
+    const screenshot = {
+        path: destination,
+        fullPage: true,
+        timeout: 60_000,
+    };
+    if (!roi) { return screenshot; }
+
+    const clip = {};
+    for (const key of ['x', 'y', 'width', 'height']) {
+        const value = Number(roi[key]);
+        if (!Number.isFinite(value)) {
+            throw new Error(`ROI ${key} must be a finite number: ${JSON.stringify(roi)}`);
+        }
+        clip[key] = value;
+    }
+    if (clip.width <= 0 || clip.height <= 0 || clip.x < 0 || clip.y < 0) {
+        throw new Error(`ROI must have non-negative x/y and positive width/height: ${JSON.stringify(roi)}`);
+    }
+    delete screenshot.fullPage;
+    screenshot.clip = clip;
+    return screenshot;
+}
+
+async function saveScreenshot(page, destination, label) {
+    fs.mkdirSync(path.dirname(destination), { recursive: true });
+    await page.screenshot(screenshotOptions(destination));
+    console.log(`${label}=${destination}`);
+}
+
+function actionScreenshotPath(index) {
+    const extension = path.extname(screenshotPath);
+    const basePath = extension
+        ? screenshotPath.slice(0, -extension.length)
+        : screenshotPath;
+    return `${basePath}_action_${index + 1}${extension}`;
+}
+
+async function performScreenshotAction(page, action, destination) {
+    await performAction(page, action);
+    await page.waitForTimeout(1000);
+    await saveScreenshot(page, destination, 'ACTION_SCREENSHOT');
+}
+
 async function main() {
     console.log(`Launching Chromium with args:\n  ${chromiumArgs.join('\n  ')}\n`);
     if (executablePath) {
@@ -216,7 +271,10 @@ async function main() {
         executablePath,
         args: chromiumArgs,
     });
-    const contextOptions = state ? { storageState: state } : {};
+    const contextOptions = {
+        ...(state ? { storageState: state } : {}),
+        ...(roiScale ? { deviceScaleFactor: roiScale } : {}),
+    };
     if (state) {
         console.log(`STATE=${state}`);
     }
@@ -227,18 +285,18 @@ async function main() {
     try {
         await page.goto(url, { waitUntil: 'domcontentloaded' });
         await prepareStressResources(page, url);
-        for (const action of actions) {
-            await performAction(page, action);
+        for (const [index, action] of actions.entries()) {
+            if (screenshotOnly) {
+                await performScreenshotAction(page, action, actionScreenshotPath(index));
+            } else {
+                await performAction(page, action);
+            }
         }
         if (screenshotOnly) {
-            await page.waitForTimeout(1000);
-            fs.mkdirSync(path.dirname(screenshotPath), { recursive: true });
-            await page.screenshot({
-                path: screenshotPath,
-                fullPage: true,
-                timeout: 60_000,
-            });
-            console.log(`SCREENSHOT=${screenshotPath}`);
+            if (actions.length === 0) {
+                await page.waitForTimeout(1000);
+                await saveScreenshot(page, screenshotPath, 'SCREENSHOT');
+            }
             return;
         }
         const renderer = await webglRenderer(page);
@@ -307,13 +365,7 @@ async function main() {
             throw new Error('window.__scene_metrics was not available');
         }
         console.log(`SCENE_METRICS=${data}`);
-        fs.mkdirSync(path.dirname(screenshotPath), { recursive: true });
-        await page.screenshot({
-            path: screenshotPath,
-            fullPage: true,
-            timeout: 60_000,
-        });
-        console.log(`FPS_SCREENSHOT=${screenshotPath}`);
+        await saveScreenshot(page, screenshotPath, 'FPS_SCREENSHOT');
         saveFpsSamplesCsv(sampleValues, samplesCsvPath);
         console.log(`FPS_SAMPLES_CSV=${samplesCsvPath}`);
         await saveStorage(page);

Original file line number	Diff line number	Diff line change
`@@ -32,15 +32,28 @@`
`32`	`32`	`{`
`33`	`33`	`"fill": {`
`34`	`34`	`"placeholder": "Filter...",`
`35`		`- "value": "Genesis"`
	`35`	`+ "value": "v1.8"`
	`36`	`+ }`
	`37`	`+ },`
	`38`	`+ {`
	`39`	`+ "fill": {`
	`40`	`+ "placeholder": "Filter...",`
	`41`	`+ "value": "v0"`
`36`	`42`	`}`
`37`	`43`	`},`
`38`	`44`	`{`
`39`	`45`	`"hover": {`
`40`	`46`	`"class": "bp6-icon-cross"`
`41`	`47`	`}`
`42`	`48`	`}`
`43`		`- ]`
	`49`	`+ ],`
	`50`	`+ "roi": {`
	`51`	`+ "x": 575,`
	`52`	`+ "y": 430,`
	`53`	`+ "width": 275,`
	`54`	`+ "height": 400,`
	`55`	`+ "scale": 2`
	`56`	`+ }`
`44`	`57`	`},`
`45`	`58`	`{`
`46`	`59`	`"name": "password_reset",`
Original file line number	Diff line number	Diff line change
`@@ -92,7 +92,7 @@ valid_scene_metrics() {`
`92`	`92`	`[ -n "$row" ] && [ "$row" != "undefined" ] && [ "$row" != "null" ]`
`93`	`93`	`}`
`94`	`94`
`95`		`-while IFS=$'\034' read -r -u 3 name mode url actions state; do`
	`95`	`+while IFS=$'\034' read -r -u 3 name mode url actions state roi; do`
`96`	`96`	`screenshot_path="/tmp/${SCREENSHOT_NAME}_${name}.png"`
`97`	`97`	`fps_samples_path="/tmp/${FPS_SAMPLES_NAME}_${name}.csv"`
`98`	`98`	`scene_metrics_path="/tmp/${SCENE_METRICS_NAME}_${name}.csv"`
`@@ -106,6 +106,7 @@ while IFS=$'\034' read -r -u 3 name mode url actions state; do`
`106`	`106`	`)`
`107`	`107`	`[ -n "$actions" ] && fps_args+=(--actions "$actions")`
`108`	`108`	`[ -n "$state" ] && fps_args+=(--state "$state")`
	`109`	`+ [ -n "$roi" ] && fps_args+=(--roi "$roi")`
`109`	`110`
`110`	`111`	`echo -e "\n\n\n"`
`111`	`112`	`if [ "$mode" = "screenshot" ]; then`