test: add QA regression test for PR #10550

- Download QA guide artifact in report job
- Extract prerequisites, test focus, and steps from guide JSON
- Display below the purpose description: focus → prerequisites → steps
- Separated by a subtle divider with smaller font

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

.github/workflows/pr-qa.yaml

@@ -696,6 +696,13 @@ jobs:
       - name: Setup frontend
         uses: ./.github/actions/setup-frontend
 
+      - name: Download QA guides
+        continue-on-error: true
+        uses: actions/download-artifact@37930b1c2abaa49bbe596cd826c3c89aef350131 # v7.0.0
+        with:
+          name: qa-guides-${{ github.run_id }}
+          path: qa-guides
+
       - name: Download BEFORE artifacts
         if: needs.qa-before.result == 'success'
         uses: actions/download-artifact@37930b1c2abaa49bbe596cd826c3c89aef350131 # v7.0.0
@@ -978,6 +985,8 @@ jobs:
           for os in Linux macOS Windows; do
             GIF_URL="${VIDEO_BASE}/qa-${os}-thumb.gif"
             VID_URL="${VIDEO_BASE}/qa-${os}.mp4"
+            # Fallback to pass1 for multi-pass recordings
+            curl -sf --head "$VID_URL" >/dev/null 2>&1 || VID_URL="${VIDEO_BASE}/qa-${os}-pass1.mp4"
             if curl -sf --head "$VID_URL" >/dev/null 2>&1; then
               if curl -sf --head "$GIF_URL" >/dev/null 2>&1; then
                 VIDEO_SECTION="${VIDEO_SECTION}[![${os} QA](${GIF_URL})](${VID_URL})"$'\n'

browser_tests/tests/qa-pr10397.spec.ts

@@ -1,51 +0,0 @@
-import { expect } from '@playwright/test'
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-
-test.describe('Select Component Escape Key Propagation', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    // Ensure clean state
-    await comfyPage.workflow.setupWorkflowsDirectory({})
-  })
-
-  test('pressing Escape in a Select dropdown closes only the menu and not the parent dialog', async ({
-    comfyPage
-  }) => {
-    const { page } = comfyPage
-
-    // 1. Open the Settings dialog
-    await comfyPage.menu.topbar.openTopbarMenu()
-    await page.getByRole('menuitem', { name: 'Settings' }).click()
-
-    const settingsDialog = page.getByRole('dialog')
-    await expect(settingsDialog).toBeVisible()
-
-    // 2. Open a Select dropdown (e.g., Language)
-    // Select components in ComfyUI use aria-haspopup="listbox"
-    const selectTrigger = settingsDialog
-      .locator('button[aria-haspopup="listbox"]')
-      .first()
-    await selectTrigger.click()
-
-    // Verify the dropdown menu is open
-    const dropdownContent = page.locator('[data-dismissable-layer]')
-    await expect(dropdownContent).toBeVisible()
-
-    // 3. Press Escape
-    // This should close the dropdown but NOT the Settings dialog
-    await page.keyboard.press('Escape')
-
-    // 4. Assertions
-    await expect(dropdownContent).not.toBeVisible()
-    await expect(settingsDialog).toBeVisible()
-
-    // Visual verification that the dialog is still present and focused
-    await expect(settingsDialog).toHaveScreenshot(
-      'settings-dialog-remains-open.png'
-    )
-
-    // 5. Press Escape again
-    // Now that the dropdown is closed, Escape should close the dialog
-    await page.keyboard.press('Escape')
-    await expect(settingsDialog).not.toBeVisible()
-  })
-})

browser_tests/tests/qa-pr10550.spec.ts

@@ -0,0 +1,49 @@
+import { expect } from '@playwright/test'
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+test.describe('Dropdown Menu Behavior', { tag: '@ui' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.workflow.setupWorkflowsDirectory({})
+    // Load a workflow containing a node with a dropdown (e.g., Load Image)
+    await comfyPage.workflow.loadWorkflow('load_image_workflow')
+  })
+
+  test('should autofocus search input when opening dropdown', async ({
+    comfyPage
+  }) => {
+    const node = comfyPage.page
+      .locator('.comfy-node')
+      .filter({ hasText: 'Load Image' })
+
+    // Open the dropdown menu by clicking the image selection widget
+    await node.locator('button').first().click()
+
+    // The search input should be automatically focused (PR Change)
+    const searchInput = comfyPage.page.locator('input[placeholder*="Search"]')
+    await expect(searchInput).toBeVisible()
+    await expect(searchInput).toBeFocused()
+  })
+
+  test('should capture wheel events and prevent canvas zooming', async ({
+    comfyPage
+  }) => {
+    const node = comfyPage.page
+      .locator('.comfy-node')
+      .filter({ hasText: 'Load Image' })
+
+    // Open the dropdown
+    await node.locator('button').first().click()
+    const dropdown = comfyPage.page.locator('[data-capture-wheel="true"]')
+    await expect(dropdown).toBeVisible()
+
+    // Hover over the dropdown and scroll the mouse wheel
+    // In the "Before" state, this would trigger canvas zoom.
+    // In the "After" state, the event is captured by the dropdown.
+    await dropdown.hover()
+    await comfyPage.page.mouse.wheel(0, 500)
+    await comfyPage.nextFrame()
+
+    // Verify the canvas hasn't zoomed by checking the node's visual state remains identical
+    await expect(node).toHaveScreenshot('canvas-zoom-unchanged.png')
+  })
+})

scripts/qa-deploy-pages.sh

@@ -131,11 +131,56 @@ cat > "$DEPLOY_DIR/_headers" <<'HEADERSEOF'
   Cache-Control: public, max-age=86400
 HEADERSEOF
 
+# Build purpose description from pr-context.txt
+PURPOSE_HTML=""
+if [ -f pr-context.txt ]; then
+  # Extract title line and first paragraph of description
+  PR_TITLE=$(grep -m1 '^Title:' pr-context.txt | sed 's/^Title: //')
+  if [ "$TARGET_TYPE" = "issue" ]; then
+    PURPOSE_LABEL="Issue #${TARGET_NUM}"
+    PURPOSE_VERB="reports"
+  else
+    PURPOSE_LABEL="PR #${TARGET_NUM}"
+    PURPOSE_VERB="aims to"
+  fi
+  # Get first ~300 chars of description body (after "Description:" line)
+  PR_DESC=$(sed -n '/^Description:/,/^###/p' pr-context.txt | grep -v '^Description:\|^###' | head -5 | sed 's/&/\&amp;/g; s/</\&lt;/g; s/>/\&gt;/g' | tr '\n' ' ' | head -c 400)
+  [ -z "$PR_DESC" ] && PR_DESC=$(sed -n '3,8p' pr-context.txt | sed 's/&/\&amp;/g; s/</\&lt;/g; s/>/\&gt;/g' | tr '\n' ' ' | head -c 400)
+  # Build requirements from QA guide JSON
+  REQS_HTML=""
+  QA_GUIDE=$(ls qa-guides/qa-guide-*.json 2>/dev/null | head -1)
+  if [ -f "$QA_GUIDE" ]; then
+    PREREQS=$(python3 -c "
+import json, sys, html
+try:
+  g = json.load(open(sys.argv[1]))
+  prereqs = g.get('prerequisites', [])
+  steps = g.get('steps', [])
+  focus = g.get('test_focus', '')
+  parts = []
+  if focus:
+    parts.append('<strong>Test focus:</strong> ' + html.escape(focus))
+  if prereqs:
+    parts.append('<strong>Prerequisites:</strong> ' + ', '.join(html.escape(p) for p in prereqs))
+  if steps:
+    parts.append('<strong>Steps:</strong> ' + ' → '.join(html.escape(s.get('description', str(s))) for s in steps[:6]))
+    if len(steps) > 6:
+      parts[-1] += ' → ...'
+  print('<br>'.join(parts))
+except: pass
+" "$QA_GUIDE" 2>/dev/null)
+    [ -n "$PREREQS" ] && REQS_HTML="<div class=purpose-reqs>${PREREQS}</div>"
+  fi
+
+  PURPOSE_HTML="<div class=purpose><div class=purpose-label>${PURPOSE_LABEL} ${PURPOSE_VERB}</div><strong>${PR_TITLE}</strong><br>${PR_DESC}${REQS_HTML}</div>"
+fi
+
 echo -n "$COMMIT_HTML" > "$DEPLOY_DIR/.commit_html"
 echo -n "$CARDS" > "$DEPLOY_DIR/.cards_html"
 echo -n "$RUN_LINK" > "$DEPLOY_DIR/.run_link"
 # Badge HTML with copy button (placeholder URL filled after deploy)
 echo -n '<div class="badge-bar"><img src="badge.svg" alt="QA Badge" class="badge-img"/><button class="copy-badge" title="Copy badge markdown" onclick="copyBadge()"><svg width=14 height=14 viewBox="0 0 24 24" fill=none stroke=currentColor stroke-width=2><rect x=9 y=9 width=13 height=13 rx=2/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button></div>' > "$DEPLOY_DIR/.badge_html"
+echo -n "$PURPOSE_HTML" > "$DEPLOY_DIR/.purpose_html"
 python3 -c "
 import sys, pathlib
 d = pathlib.Path(sys.argv[1])
@@ -144,9 +189,10 @@ t = t.replace('{{COMMIT_HTML}}', (d / '.commit_html').read_text())
 t = t.replace('{{CARDS}}', (d / '.cards_html').read_text())
 t = t.replace('{{RUN_LINK}}', (d / '.run_link').read_text())
 t = t.replace('{{BADGE_HTML}}', (d / '.badge_html').read_text())
+t = t.replace('{{PURPOSE_HTML}}', (d / '.purpose_html').read_text())
 sys.stdout.write(t)
 " "$DEPLOY_DIR" "$TEMPLATE" > "$DEPLOY_DIR/index.html"
-rm -f "$DEPLOY_DIR/.commit_html" "$DEPLOY_DIR/.cards_html" "$DEPLOY_DIR/.run_link" "$DEPLOY_DIR/.badge_html"
+rm -f "$DEPLOY_DIR/.commit_html" "$DEPLOY_DIR/.cards_html" "$DEPLOY_DIR/.run_link" "$DEPLOY_DIR/.badge_html" "$DEPLOY_DIR/.purpose_html"
 
 cat > "$DEPLOY_DIR/404.html" <<'ERROREOF'
 <!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>404</title>

scripts/qa-report-template.html

@@ -79,9 +79,13 @@ h1{font-size:clamp(1.25rem,2.5vw,1.625rem);font-weight:700;letter-spacing:-.03em
 .vctrl .vtime{font-family:var(--font-mono);font-size:.6875rem;color:var(--fg-dim);min-width:10ch;text-align:center}
 .vctrl .vsep{width:1px;height:1rem;background:var(--border);flex-shrink:0}
 .vctrl .vhint{font-size:.6rem;color:var(--fg-dim);margin-left:auto}
+.purpose{background:linear-gradient(135deg,oklch(100% 0 0/.04),oklch(100% 0 0/.02));border:1px solid oklch(100% 0 0/.08);border-radius:var(--r-lg);padding:1rem 1.25rem;margin-bottom:1.5rem;font-size:.85rem;line-height:1.7;color:oklch(80% 0.01 265)}
+.purpose strong{color:var(--fg);font-weight:600}
+.purpose .purpose-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--fg-muted);margin-bottom:.4rem}
+.purpose .purpose-reqs{margin-top:.75rem;padding-top:.75rem;border-top:1px solid oklch(100% 0 0/.06);font-size:.8rem;color:oklch(70% 0.01 265);line-height:1.8}
 </style></head><body><div class=container>
 <header><div class=header-icon><svg width=20 height=20 viewBox="0 0 24 24" fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><polygon points="23 7 16 12 23 17 23 7"/><rect x=1 y=5 width=15 height=14 rx=2 ry=2/></svg></div><div><h1>QA Session Recordings</h1><div class=meta>ComfyUI Frontend &middot; Automated QA{{COMMIT_HTML}}{{RUN_LINK}}</div>{{BADGE_HTML}}</div></header>
-<div class=grid>{{CARDS}}</div>
+{{PURPOSE_HTML}}<div class=grid>{{CARDS}}</div>
 </div><script>
 function copyBadge(){const u=location.href.replace(/\/[^/]*$/,'/');const b=u+'badge.svg';const md='[![QA Badge]('+b+')]('+u+')';navigator.clipboard.writeText(md).then(()=>{const btn=document.querySelector('.copy-badge');btn.classList.add('copied');btn.innerHTML='<svg width=14 height=14 viewBox="0 0 24 24" fill=none stroke=currentColor stroke-width=2><polyline points="20 6 9 17 4 12"/></svg>';setTimeout(()=>{btn.classList.remove('copied');btn.innerHTML='<svg width=14 height=14 viewBox="0 0 24 24" fill=none stroke=currentColor stroke-width=2><rect x=9 y=9 width=13 height=13 rx=2/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>'},2000)})}
 document.querySelectorAll('[data-md]').forEach(el=>{const t=el.textContent;el.removeAttribute('data-md');el.innerHTML=marked.parse(t)});