多模态 AI 在 UI 异常检测中的应用：截图+代码的双通道分析

多模态 AI 在 UI 异常检测中的应用：截图+代码的双通道分析

一、那个"看着正常但功能死掉"的表格排序按钮

QA 报告了一个 Bug："用户管理表格的排序按钮点击没反应。"打开页面一看，按钮视觉完好——蓝色箭头图标、圆角边框、hover 态正常。但onClick事件丢了。根因是前一天某位同事重构时误删了事件绑定，而快照测试只看截图（按钮还在），单元测试只测了组件内部方法是否正确调用（mocked）。

这就是单模态检测的盲区：快照测试只看"长什么样"，单元测试只看"函数调了没"，两者之间的"交互是否可用"成了真空地带。

多模态 AI 的解法：同时输入页面截图和 HTML 源码，让模型在两个模态之间做交叉验证。截图告诉模型"这个元素看起来是一个可交互按钮"，HTML 告诉模型"这个按钮的onClick是否存在"。

二、双通道检测架构

flowchart TD A[页面加载] --> B1[截图通道] A --> B2[DOM 通道] B1 --> C1[视觉元素识别<br/>按钮/输入框/链接] B2 --> C2[DOM 解析<br/>交互属性提取] C1 --> D[交叉验证层] C2 --> D D --> E1{视觉上可交互<br/>→ DOM 中有事件?} E1 -->|无事件| F1[缺失交互 Bug] E1 -->|有事件| E2{DOM 中定义的事件<br/>→ 视觉上有对应元素?} E2 -->|无元素| F2[幽灵事件处理器] E2 -->|有元素| G[通过] D --> E3{截图中的文本<br/>→ DOM 中对应文本一致?} E3 -->|不一致| F3[文本渲染 Bug] F1 --> H[生成异常报告] F2 --> H F3 --> H

三、多模态检测实现

// multimodal-detector/ui-anomaly-detector.ts // 多模态 UI 异常检测器 // 结合截图分析和 DOM 分析，发现单模态测不出的 Bug import { chromium, Page } from 'playwright'; import sharp from 'sharp'; interface VisualElement { type: 'button' | 'input' | 'link' | 'icon' | 'text'; bbox: { x: number; y: number; width: number; height: number }; text?: string; confidence: number; // 视觉识别置信度 } interface DOMElement { tag: string; selector: string; events: string[]; // ['onClick', 'onChange', ...] text: string; role?: string; ariaLabel?: string; bbox: { x: number; y: number; width: number; height: number }; } interface Anomaly { type: 'missing-interaction' | 'ghost-event' | 'text-mismatch' | 'hidden-interactive'; severity: 'critical' | 'warning'; visualElement?: VisualElement; domElement?: DOMElement; description: string; screenshot: Buffer; // 标注后的截图 } /** * 多模态异常检测主函数 * * 设计意图：同时采集页面的截图数据和 DOM 数据， * 在两个模态之间做交叉验证，识别"看起来正常但功能异常"的 Bug */ async function detectAnomalies(page: Page): Promise<Anomaly[]> { const anomalies: Anomaly[] = []; // ---- 通道 1：截图采集 ---- const screenshot = await page.screenshot({ fullPage: false }); // 视觉元素识别（使用 OCR + 目标检测模型） // 将截图发送给多模态 LLM（如 GPT-4 Vision / Claude Vision） const visualElements = await analyzeScreenshot(screenshot); // ---- 通道 2：DOM 采集 ---- const domElements = await extractDOMElements(page); // ---- 交叉验证 ---- // 检查 1：视觉上可交互的元素在 DOM 中是否绑定了事件 for (const visual of visualElements) { if (visual.type === 'button' || visual.type === 'link') { const matchingDOM = findMatchingDOMElements(visual, domElements); if (matchingDOM.length > 0) { const hasEvents = matchingDOM.some( dom => dom.events.some(e => e.startsWith('on')) ); if (!hasEvents) { anomalies.push({ type: 'missing-interaction', severity: 'critical', visualElement: visual, domElement: matchingDOM[0], description: `元素在视觉上表现为可交互的 ${visual.type}，但 DOM 中未绑定任何事件处理器`, screenshot: await annotateScreenshot(screenshot, visual.bbox) }); } } } } // 检查 2：DOM 中绑定事件的元素在截图中是否可见 for (const dom of domElements) { if (dom.events.length > 0 && dom.bbox.width > 0 && dom.bbox.height > 0) { const matchingVisual = visualElements.find(v => isOverlapping(v.bbox, dom.bbox, 0.5) ); if (!matchingVisual) { anomalies.push({ type: 'hidden-interactive', severity: 'warning', domElement: dom, description: `DOM 元素 ${dom.tag}(${dom.selector}) 绑定的事件处理器无法在截图中找到对应的视觉元素，可能被隐藏或渲染在视口外`, screenshot: await annotateScreenshot(screenshot, dom.bbox, 'red') }); } } } // 检查 3：截图中的文本与 DOM 中的文本是否一致 for (const visual of visualElements) { if (visual.text && visual.text.length > 0) { const matchingDOM = findMatchingDOMElements(visual, domElements); for (const dom of matchingDOM) { if (dom.text && !textsMatch(visual.text!, dom.text)) { anomalies.push({ type: 'text-mismatch', severity: 'critical', visualElement: visual, domElement: dom, description: `截图显示文本 "${visual.text}"，但 DOM 中对应文本为 "${dom.text}"`, screenshot: await annotateScreenshot(screenshot, visual.bbox) }); } } } } return anomalies; } /** * 将截图发送给多模态 LLM 进行视觉元素识别 * * Prompt 策略：指令模型扮演"UI 审计员"的角色， * 要求它识别所有可交互元素并返回结构化 JSON */ async function analyzeScreenshot(screenshot: Buffer): Promise<VisualElement[]> { // 实际实现中调用 GPT-4 Vision API // const response = await openai.chat.completions.create({ // model: 'gpt-4-vision-preview', // messages: [{ // role: 'user', // content: [ // { type: 'image_url', image_url: { url: `data:image/png;base64,${screenshot.toString('base64')}` } }, // { type: 'text', text: PROMPT } // ] // }] // }); const PROMPT = ` 你是一个 UI 审计员。请分析这张网页截图，识别所有可交互的 UI 元素。 对于每个元素，请提供： - type: 元素类型 (button/input/link/icon/text) - bbox: 边界框 {x, y, width, height}（以像素为单位，相对于截图的左上角） - text: 元素上可见的文字（如果有） - confidence: 识别置信度 0~1 请以 JSON 数组格式输出，不要包含其他文字。 `.trim(); return []; } /** * 提取页面 DOM 中的交互元素信息 */ async function extractDOMElements(page: Page): Promise<DOMElement[]> { return await page.evaluate(() => { const elements: any[] = []; // 遍历所有绑定事件的元素 const interactiveSelectors = [ 'button', 'a[href]', 'input', 'select', 'textarea', '[onclick]', '[onChange]', '[onSubmit]', '[role="button"]', '[tabindex]:not([tabindex="-1"])' ]; document.querySelectorAll(interactiveSelectors.join(',')).forEach((el) => { const htmlEl = el as HTMLElement; const rect = htmlEl.getBoundingClientRect(); const computed = window.getComputedStyle(htmlEl); // 忽略不可见元素（display:none, visibility:hidden, opacity:0） if (computed.display === 'none' || computed.visibility === 'hidden' || parseFloat(computed.opacity) === 0) { return; } // 收集所有绑定的事件类型 const events: string[] = []; const eventPrefixes = ['on']; for (const key of Object.keys(htmlEl) as (keyof HTMLElement)[]) { if (typeof key === 'string' && key.startsWith('on')) { events.push(key); } } // 同时检查 React __reactProps（如果是 React 应用） const reactProps = (htmlEl as any).__reactProps; if (reactProps) { Object.keys(reactProps).forEach((key) => { if (key.startsWith('on') && !events.includes(key)) { events.push(key); } }); } elements.push({ tag: htmlEl.tagName.toLowerCase(), selector: getSelector(htmlEl), events, text: htmlEl.textContent?.trim().slice(0, 100) || '', role: htmlEl.getAttribute('role') || undefined, ariaLabel: htmlEl.getAttribute('aria-label') || undefined, bbox: { x: Math.round(rect.x), y: Math.round(rect.y), width: Math.round(rect.width), height: Math.round(rect.height) } }); }); return elements; function getSelector(el: HTMLElement): string { if (el.id) return `#${el.id}`; if ((el as any).__reactFiber) { const key = (el as any).__reactFiber?.key; if (key) return `[data-key="${key}"]`; } return el.tagName.toLowerCase(); } }); } /** * 在截图上标注异常区域 */ async function annotateScreenshot( screenshot: Buffer, bbox: { x: number; y: number; width: number; height: number }, color: string = 'red' ): Promise<Buffer> { // 使用 sharp 在截图上画矩形框 const { width: imgWidth, height: imgHeight } = await sharp(screenshot).metadata(); const svgOverlay = ` <svg width="${imgWidth}" height="${imgHeight}"> <rect x="${bbox.x}" y="${bbox.y}" width="${bbox.width}" height="${bbox.height}" fill="none" stroke="${color}" stroke-width="3" stroke-dasharray="5,5" /> </svg> `; return await sharp(screenshot) .composite([{ input: Buffer.from(svgOverlay), top: 0, left: 0 }]) .png() .toBuffer(); } /** 查找与视觉元素在空间上匹配的 DOM 元素 */ function findMatchingDOMElements( visual: VisualElement, domElements: DOMElement[] ): DOMElement[] { return domElements.filter(dom => isOverlapping(visual.bbox, dom.bbox, 0.3) ); } /** 判断两个边界框的重叠面积是否超过阈值 */ function isOverlapping( a: { x: number; y: number; width: number; height: number }, b: { x: number; y: number; width: number; height: number }, threshold: number ): boolean { const overlapX = Math.max(0, Math.min(a.x + a.width, b.x + b.width) - Math.max(a.x, b.x)); const overlapY = Math.max(0, Math.min(a.y + a.height, b.y + b.height) - Math.max(a.y, b.y)); const overlapArea = overlapX * overlapY; const areaA = a.width * a.height; const areaB = b.width * b.height; const minArea = Math.min(areaA, areaB); return minArea > 0 && overlapArea / minArea > threshold; } /** 简易文本匹配（忽略空白和标点差异） */ function textsMatch(visualText: string, domText: string): boolean { const normalize = (s: string) => s.replace(/\s+/g, ' ').replace(/[，,。.]/g, '').trim().toLowerCase(); return normalize(visualText) === normalize(domText); }

四、多模态检测的成本与频次策略

API 调用成本。一张 1280x720 的截图发送给 GPT-4 Vision 的成本约 $0.01（按 2024 年定价）。如果每个 PR 检查 10 个页面，单次 $0.10。建议策略：只在 PR 涉及 UI 组件变更时触发，而非每个 commit 都跑。

视觉识别的误检率。LLM 对"这个元素是什么类型"的判定准确率约 85-90%。图标型按钮（没有文字、纯 SVG icon）的误检率较高。交叉验证可以把单个模态 90% 的准确率提升到双模态联合判定的 98%+。

不能替代人工走查。多模态检测覆盖的是"结构性异常"（按钮没事件、文字不一致、元素不可见），不覆盖"交互流程是否顺畅"这样的体验级问题。

五、总结

多模态 UI 异常检测是快照测试和单元测试的"中间一公里"——它不替代任何一种测试，但填补了两者之间的空白：

1. 截图通道回答"看起来正常吗？"
2. DOM 通道回答"功能上完整吗？"
3. 交叉验证层回答"两者一致吗？"——不一致的地方就是 Bug

检测的三类典型异常：

• 缺失交互：视觉上是按钮，DOM 中无事件绑定
• 幽灵事件：DOM 中绑定了事件，但对应元素在截图中不可见
• 文本不一致：渲染文本与源码文本不符（可能是 CSS 隐藏/截断/覆盖）