用 agent-browser 验证 AIRI 显示模型导入Live2D / VRM / MMD 跨端自动化测试实战【免费下载链接】airi Self hosted, you-owned Grok Companion, a container of souls of waifu, cyber livings to bring them into our worlds, wishing to achieve Neuro-samas altitude. Capable of realtime voice chat, Minecraft, Factorio playing. Web / macOS / Windows supported.项目地址: https://gitcode.com/GitHub_Trending/ai/airi导读AIRIstage-tamagotchi Electron 桌面端、stage-web 网页端、stage-pocket 移动端都支持用户通过模型选择器导入自定义显示模型Live2D ZIP、VRM、MMD ZIP/PMX/PMD。本指南讲解如何使用agent-browserCDP 驱动的浏览器自动化 CLI配合$use-agent-browser-with-input-file技能完整跑通「绕过 onboarding → 打开模型设置 → 上传本地模型文件 → 通过 UI 选择导入的模型 → 验证舞台渲染」的端到端自动化测试流程。读完本文你将掌握三种运行时Electron / Web / 移动端 Web 布局的启动与定位方法、各格式的导入契约与选择器、五条渲染后置条件以及上传、持久化、渲染三个独立检查点的判定原则。背景为什么用 agent-browser 测 AIRI 的模型导入AIRI 的显示模型导入链路涉及**原生文件对话框、VueUseuseFileDialog动态创建的隐藏 file input、IndexedDB 持久化、多渲染器Live2D / VRM / MMD**四层复杂逻辑手工测试难以覆盖格式差异与竞态条件。agent-browser是专为 AI Agent 设计的浏览器自动化 CLI通过 Chrome/Chromium CDP 连接以无障碍树快照accessibility-tree snapshot和紧凑的eN元素引用驱动交互不依赖 Playwright/Puppeteer并内置会话、认证、状态持久化与视频录制能力。它在仓库中的入口 stub 位于 .agents/skills/agent-browser/SKILL.md安装方式为npm i -g agent-browser agent-browser install。仓库的 AGENTS.md 明确约定了技能组合涉及 HTML input 上传的 Web/Electron 流程先调用$use-agent-browser-with-input-file涉及 AIRI 显示模型导入与渲染验证的测试则调用$use-agent-browser-for-airi后者在文件上传机制上复用前者并额外封装 AIRI 专属的路由、状态准备、格式行为和渲染器验证。工具链初始化约定执行浏览器命令前必须先拉取与当前安装版本严格匹配的技能内容避免过时指令agent-browser skills get core --full目标为 Electron 时额外执行agent-browser skills get electron --full同时调用$agent-browser、$use-agent-browser-with-input-file以及 Electron 场景下的$agent-browser-electron三个技能分工如下agent-browser 负责浏览器自动化原语input-file 技能负责文件输入发现、临时插桩、上传命令与通用上传后验证Airi 技能负责 AIRI 路由、状态与格式行为。其 Agent 注册元数据见 .agents/skills/use-agent-browser-for-airi/agents/openai.yaml。运行时选择三种被测表面导入测试可以覆盖三个运行时先从主文档选择入口进入对应的运行时参考指南Electron stage-tamagotchi读 .agents/skills/use-agent-browser-for-airi/references/electron.md验证桌面端真正的多窗口目标切换与 CDP 连接。stage-web读 .agents/skills/use-agent-browser-for-airi/references/web.md验证纯浏览器端的导入与渲染。stage-pocket 与移动端覆盖读 .agents/skills/use-agent-browser-for-airi/references/mobile.md验证共享 Vue UI 在紧凑布局下的表现与原生端边界。三个运行时共享同一份模型导入契约见下一节差异只在于启动方式、目标定位与收尾清理。模型导入契约格式、菜单项与选择器AIRI 当前通过 VueUseuseFileDialog创建每种格式的文件输入并保持其与 DOM 分离detached——这在 model-selector.vue 中可以得到源码印证live2dDialog、vrmDialog、mmdDialog分别以useFileDialog({ accept: .zip })、useFileDialog({ accept: .vrm })、useFileDialog({ accept: .zip,.pmx,.pmd })创建。由于输入节点不挂在文档树上agent-browser 无法用 CSS 选择器直接选中因此三种格式统一采用detached-input 方法详见 .agents/skills/use-agent-browser-with-input-file/references/detached-input.md且必须在点击格式菜单项之前安装桥接。格式菜单项输入选择器格式专属后置结果Live2DLive2Dinput[data-agent-browser-upload][accept.zip]检查校验报告仅当报告允许导入时点击Confirm。VRMVRMinput[data-agent-browser-upload][accept.vrm]等待导入卡片出现不期望出现 Live2D 校验确认。MMDMMDinput[data-agent-browser-upload][accept.zip,.pmx,.pmd]将归档/模型存储与纹理、物理、动态导入、渲染分别验证。源码中 model-selector.vue 显示 MMD 的格式判定逻辑.pmd归为DisplayModelFormat.PMD.pmx或.zip归为PMXZip其余扩展名直接返回渲染器在加载时通过魔数magic bytes区分 zip 与裸模型。Live2D 导入前会先执行validateLive2DZipmodel-selector.vuestatus VALID且无错误时自动确认否则弹出Live2DReportModal校验报告等待人工/自动化确认。测试夹具的来源与合规Live2D / VRM解析$use-vishot-for-airi技能文档.agents/skills/use-vishot-for-airi/SKILL.md中记录的本地夹具路径。MMD使用包含模型及其纹理目录的已授权归档ZIP 内需同时含模型与纹理目录。注意不要在测试或源码注释中编码贡献者的私有夹具名。detached-input 桥接原理核心问题应用点击控件时通过input.click()触发文件对话框而该 input 从未append到文档。agent-browser 无法对游离节点使用选择器因此需要在浏览器测试会话内临时暴露它。在点击格式菜单项之前先注入桥接agent-browser eval window.__agentBrowserOriginalFileInputClick ?? HTMLInputElement.prototype.click; HTMLInputElement.prototype.click function () { if (this.type file) { this.dataset.agentBrowserUpload true; document.body.append(this); return; } return window.__agentBrowserOriginalFileInputClick.call(this); }; true这段代码的行为要点保留普通非 file 类型点击的原生行为只拦截type file的输入阻止原生选择器弹出给应用创建的精确 input 打上data-agent-browser-upload标记将同一个节点附加到文档保留其既有change监听器VueUseuseFileDialog的onChange回调仍能触发。随后检查被捕获的输入并上传注意必须使用绝对路径agent-browser eval Array.from(document.querySelectorAll(input[data-agent-browser-upload]), input ({ accept: input.accept, multiple: input.multiple, connected: input.isConnected })) agent-browser upload input[data-agent-browser-upload][accept.zip] /absolute/path/to/archive.zip若桥接捕获了多个输入务必用accept、multiple或其他应用自有属性收窄选择器不要向所有标记输入上传。在应用的change处理器消费完文件后恢复原型并只移除本桥接创建的节点agent-browser eval if (window.__agentBrowserOriginalFileInputClick) { HTMLInputElement.prototype.click window.__agentBrowserOriginalFileInputClick; delete window.__agentBrowserOriginalFileInputClick; } document.querySelectorAll(input[data-agent-browser-upload]).forEach(input input.remove()); true当页面会继续保持打开时这一步恢复桥接是导入流程第 7 步的强制要求。桥接属于可丢弃测试会话的运行时插桩不是应用代码绝不能提交进仓库。准备 AIRI 状态绕过 onboarding为了保证测试的可复现性使用全新的浏览器会话或专用 Electron user-data 目录并在打开模型设置路由之前标记 onboarding 已完成agent-browser eval localStorage.setItem(onboarding/completed, true); localStorage.setItem(onboarding/skipped, false); location.reload(); true这两个 key 的实际消费方可以在 display-model-from-file.ts 中印证Vishot 场景的markOnboardingCompleted同样写入onboarding/completedtrue与onboarding/skippedfalse。随后打开/settings/models点击Select model再次快照。导入模型七步操作序列点击第一个Options for Display Models按钮源码中该aria-label出现在 model-selector.vue 的导入下拉触发器上点击后展开Live2D / VRM / Spine / MMD / Tachie菜单项。重新快照点击精确的 Live2D / VRM / MMD 菜单项。按 detached-input 方法用上表匹配的选择器上传文件。重新快照。若 Live2D 校验弹出报告检查报告内容仅当报告允许导入时点击Confirm。等待精确的 basename出现在导入模型卡片上且该卡片拥有自己的Pick按钮——detached 输入控件上显示的文件名不足为凭它只证明赋值成功。点击该导入卡片的Pick按钮。页面保持打开时在 change 处理器完成后恢复 detached-input 桥接。每一步交互后都应重新快照因为元素引用eN在 DOM 变化后会失效。Electron 场景下 Live2D 校验报告可能打开模态框若可见的Confirm按钮被可访问性点击路径中的遮挡对话框盖住先重新快照并解析遮挡对话框仅在诊断兜底时才使用 DOM.click()直接点击精确的可见 Confirm 按钮并记录「普通指针自动化未能到达它」这一事实。验证结果五条必查后置条件导入并点击Pick后全部满足以下条件才算通过localStorage.getItem(settings/stage/model)以display-model-开头——即选中了刚导入的自定义模型而非预设。最终舞台展示的是导入的模型而不是预设模型、空白画布、加载状态或导入对话框。截图在视觉上与上传的格式和夹具匹配。agent-browser errors中无模型加载失败。agent-browser console中无相关的 Live2D、VRM、MMD、ZIP、纹理、物理或动态导入失败。两个重要警示不要从 AIRI 头部卡片/档案下拉框推断当前显示模型——它标识的是活动角色卡片可能保留不同的标签。上传、持久化、渲染是三个独立检查点可见的导入卡片只能证明「存储成功」不能证明渲染器能消费该文件。正如 verify-upload.md 强调的把「导入卡片 空白舞台」上报为「存储通过、渲染失败」而不是一次成功的上传测试。localStorage 与持久化契约的源码印证第 1 条条件的含义在 stage-model.ts 中一目了然模型选择以useLocalStorageManualResetstring(settings/stage/model, preset-live2d-1, ...)持久化默认值为预设preset-live2d-1。而自定义模型的 key 生成于 display-models.ts 的addDisplayModelid: \display-model-${nanoid()}随后通过localforage.setItem写入 IndexedDB数据库localforage、storekeyvaluepairs。加载时 [loadDisplayModelsFromIndexedDB](https://link.gitcode.com/i/593997ca449ec07fb5bc5589fd8ab89b) 遍历所有display-model-前缀的 key 并入列表——这就是后置条件 1 判断前缀的依据。同时源码注释明确要求保持await localforage.setItem不丢事件否则updateStageModel可能在 IndexedDB 写入完成前读取新模型 id 并回退到默认模型[display-models.ts](https://link.gitcode.com/i/aea660d0a89447b83660c5eeea1cf63a)、[stage-model.ts](https://link.gitcode.com/i/43dce2db4eede78c2316156f8639cc4e)。updateStageModel还会根据模型格式解析渲染器Live2D ZIP →live2d、VRM →vrm、PMX/PMD →mmdstage-model.ts。Electron 运行时stage-tamagotchi 实操以已知 CDP 端口启动优先使用专用 user-data 目录避免导入的夹具与 onboarding 状态污染贡献者日常 profile。开发模式APP_REMOTE_DEBUGtrue \ APP_REMOTE_DEBUG_PORT9250 \ APP_REMOTE_DEBUG_NO_OPENtrue \ pnpm dev:tamagotchi根目录 package.json 中dev:tamagotchi定义为pnpm -rF proj-airi/stage-tamagotchi run dev。环境变量的底层实现在 apps/stage-tamagotchi/src/main/app/debugger.tsAPP_REMOTE_DEBUGtrue时在 app ready 之前通过app.commandLine.appendSwitch(remote-debugging-port, ...)开启 Electron 的 CDP 端点端口默认 9222并校验端口为 0–65535 的整数APP_REMOTE_DEBUG_NO_OPENtrue阻止自动打开系统浏览器见该文件的openDebugger。若使用构建产物则直接以 Electron 可执行文件启动apps/stage-tamagotchi/out/main/index.js并显式传入新建临时目录下的--user-data-dir。选择渲染目标Electron 会暴露多个 target必须先枚举原始目标再连接curl -sS http://127.0.0.1:9250/json/list agent-browser --session airi-electron --cdp 9250 tab识别主/#/target用其稳定的tNid 切换校验 URL设置 onboarding 存储并关闭已存在的/onboardingtarget。展开主控件并打开设置agent-browser --session airi-electron --cdp 9250 snapshot -i # 将 eN 替换为当前快照中 Expand 的引用 agent-browser --session airi-electron --cdp 9250 click eN agent-browser --session airi-electron --cdp 9250 find role button click --name Open settings再次枚举 target切换到新的/settingstarget 并路由到模型设置agent-browser --session airi-electron --cdp 9250 eval location.hash /settings/models; true agent-browser --session airi-electron --cdp 9250 snapshot -i每条命令都必须带上--session airi-electron --cdp 9250然后遵循 SKILL.md 的共享导入契约。点击Pick后切回主 target等待其 canvas 出现并截图检查 errors 与 console 输出需要在格式间做隔离时用全新的临时 profile 重跑。stage-web 运行时实操在已知 origin 启动 stage-web每种格式使用一个全新的 agent-browser 会话pnpm -F proj-airi/stage-web dev --host 127.0.0.1 --port 5173 agent-browser --session airi-web-live2d open http://127.0.0.1:5173/settings/models设置 onboarding 存储、reload、等待Select model遵循共享的 detached-input 导入契约。点击Pick后agent-browser eval localStorage.getItem(settings/stage/model) agent-browser open http://127.0.0.1:5173/ agent-browser wait canvas agent-browser screenshot agent-browser errors agent-browser console两个细节其一当应用暴露渲染器就绪信号时应显式等待——canvas 存在于 DOM 不等于渲染成功它可能因加载器失败而保持空白其二MMD 要专门检查 console 中的纹理、归档、物理与 Vite 动态导入失败。收集完证据后关闭每个会话全新会话可以避免从贡献者浏览器 profile 中误删无关的 IndexedDB 模型。stage-pocket 与移动端覆盖实操浏览器驱动的移动布局运行 stage-pocket 的 Web 表面专用 HTTPS 端口pnpm -F proj-airi/stage-pocket dev:web --host 127.0.0.1 --port 5174 agent-browser --session airi-pocket-web --ignore-https-errors open https://127.0.0.1:5174/settings/modelsdev:web对应 apps/stage-pocket/package.json 的dev:web: vite。操作设置页时若控件存在于 DOM 但视觉上位于紧凑布局之外可临时切到桌面宽度视口agent-browser set viewport 768 1024遵循共享导入契约。点击Pick后切换到目标手机视口再打开舞台并采集证据agent-browser set viewport 390 844 agent-browser open https://127.0.0.1:5174/ agent-browser wait canvas agent-browser screenshot覆盖边界这一步只验证 stage-pocket 的共享 Vue UI 与移动端响应式渲染器不验证原生文件选择器、Android WebView、WKWebView、文件系统权限或 Capacitor 桥。这类能力必须走原生端测试。Android 模拟器原生覆盖仅当adb devices列出了已启动的模拟器、且存在可检查 WebView 或驱动原生选择器的自动化桥时才运行原生 Android 测试。agent-browser 需要可达的 Chromium CDP 端点——不要因为应用能启动就声称已覆盖。使用根目录 package.json 的pnpm dev:pocket:android对应 apps/stage-pocket/package.json 的cap-vite -- android运行项目运行时通过原生文档选择器上传每种格式返回 AIRI 选中导入卡片验证最终渲染器与 Logcat。当adb或兼容的 WebView 调试端点不可用时如实记录为「not runnable」。iOS Simulator使用根目录 package.json 的pnpm dev:pocket:ios对应 apps/stage-pocket/package.json 的cap-vite -- ios配合已启动的 Simulator做手动或 XCUITest/Appium 覆盖。WKWebView 暴露的是 Safari Web Inspector 而非 Chromium CDPagent-browser 无法直接自动化。不要用 agent-browser 的移动视口结果替代原生 iOS 覆盖浏览器驱动的 stage-pocket 结果与原生 Simulator 结果必须作为独立的两行分别报告。原生文件选择器的通用边界依据 native-file-chooser.mdagent-browser 的upload命令只能把文件赋给 HTML input不能驱动任意操作系统选择器窗口。因此先判断选择器归谁所有——Electron 场景下若应用最终在渲染器创建 HTML input 就回到 attached/detached 方法真正的 Electron 主进程或 OS 对话框走平台自动化机制后再回 agent-browser 做渲染验证Android/iOS 原生选择器走模拟器自动化并单独报告。若选择器无法被安全控制把原生选择检查点记录为 not runnable不得用键入路径、合成文件名或视口模拟冒充已覆盖。上传验证的四层检查点无论哪种运行时都要验证「最深的可观察结果」而不是在agent-browser upload成功退出时停止赋值Assignment目标输入收到了预期的文件。处理Processing应用产生了预期的文件名、预览、校验结果、进度状态或导入记录。持久化Persistence应用在 store / IndexedDB / 后续路由中保留了新选择AIRI 中是settings/stage/model指向display-model-*且模型实体写入 localforage。消费Consumption目标查看器/编辑器/渲染器实际使用了上传的内容AIRI 中是舞台 canvas 渲染出该模型。赋值后重新快照等待应用专属的后置条件最终检查点执行agent-browser errors与agent-browser console。采集能区分「上传文件」与「默认或缓存数据」的证据报告第一个失败的检查点与相关错误而不要把整个流程折叠成一个笼统的通过/失败。关闭与会话收尾测试结束后关闭所有 agent-browser 会话停止为测试启动的进程只删除专用的临时 Electron user-data 目录不要动贡献者正常 profile按「每个格式 × 每个运行时」分别上报passed / failed / not runnable附上第一个失败检查点与相关 console 错误。与 Vishot 场景的衔接当需要确定性视觉证据时可把 agent-browser 验证稳定的流程编码为 Playwright 驱动的 Vishot 场景。仓库提供了现成的可复用场景 display-model-from-file.ts通过环境变量注入模型路径与格式pnpm build:tamagotchi AIRI_DISPLAY_MODEL_FORMATlive2d \ AIRI_DISPLAY_MODEL_PATH/absolute/path/to/model.zip \ pnpm exec vishot capture \ ./packages/scenarios-stage-tamagotchi-electron/src/scenarios/display-model-from-file.ts \ --target electron \ --app-entrypoint ./apps/stage-tamagotchi/out/main/index.js \ --cwd . \ --settle-ms 2500 \ --output-dir ./.vishot/display-model/live2dAIRI_DISPLAY_MODEL_FORMAT仅接受live2d、vrm、mmd三值AIRI_DISPLAY_MODEL_PATH必须为绝对路径display-model-from-file.ts。该场景的契约与本指南完全同构标记 onboarding 完成并关闭已打开的 onboarding 渲染器 → 通过窗口助手打开 Settings → Models → 在选择 Live2D/VRM/MMD 前等待 Playwright 文件选择器 → 通过新的 IndexedDB 模型 key 关联导入 → 选中导入卡片并等待主窗口选择同步 → 捕获主舞台并在结束后移除导入夹具其cleanup会恢复 localStorage 并删除 IndexedDB 中该display-model-*记录见 display-model-from-file.ts。当截图仍显示预设模型、导入对话框、空白舞台或加载状态时该捕获视为失败必须逐一检查生成的每张图片。【免费下载链接】airi Self hosted, you-owned Grok Companion, a container of souls of waifu, cyber livings to bring them into our worlds, wishing to achieve Neuro-samas altitude. Capable of realtime voice chat, Minecraft, Factorio playing. Web / macOS / Windows supported.项目地址: https://gitcode.com/GitHub_Trending/ai/airi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
用 agent-browser 验证 AIRI 显示模型导入：Live2D / VRM / MMD 跨端自动化测试实战
用 agent-browser 验证 AIRI 显示模型导入Live2D / VRM / MMD 跨端自动化测试实战【免费下载链接】airi Self hosted, you-owned Grok Companion, a container of souls of waifu, cyber livings to bring them into our worlds, wishing to achieve Neuro-samas altitude. Capable of realtime voice chat, Minecraft, Factorio playing. Web / macOS / Windows supported.项目地址: https://gitcode.com/GitHub_Trending/ai/airi导读AIRIstage-tamagotchi Electron 桌面端、stage-web 网页端、stage-pocket 移动端都支持用户通过模型选择器导入自定义显示模型Live2D ZIP、VRM、MMD ZIP/PMX/PMD。本指南讲解如何使用agent-browserCDP 驱动的浏览器自动化 CLI配合$use-agent-browser-with-input-file技能完整跑通「绕过 onboarding → 打开模型设置 → 上传本地模型文件 → 通过 UI 选择导入的模型 → 验证舞台渲染」的端到端自动化测试流程。读完本文你将掌握三种运行时Electron / Web / 移动端 Web 布局的启动与定位方法、各格式的导入契约与选择器、五条渲染后置条件以及上传、持久化、渲染三个独立检查点的判定原则。背景为什么用 agent-browser 测 AIRI 的模型导入AIRI 的显示模型导入链路涉及**原生文件对话框、VueUseuseFileDialog动态创建的隐藏 file input、IndexedDB 持久化、多渲染器Live2D / VRM / MMD**四层复杂逻辑手工测试难以覆盖格式差异与竞态条件。agent-browser是专为 AI Agent 设计的浏览器自动化 CLI通过 Chrome/Chromium CDP 连接以无障碍树快照accessibility-tree snapshot和紧凑的eN元素引用驱动交互不依赖 Playwright/Puppeteer并内置会话、认证、状态持久化与视频录制能力。它在仓库中的入口 stub 位于 .agents/skills/agent-browser/SKILL.md安装方式为npm i -g agent-browser agent-browser install。仓库的 AGENTS.md 明确约定了技能组合涉及 HTML input 上传的 Web/Electron 流程先调用$use-agent-browser-with-input-file涉及 AIRI 显示模型导入与渲染验证的测试则调用$use-agent-browser-for-airi后者在文件上传机制上复用前者并额外封装 AIRI 专属的路由、状态准备、格式行为和渲染器验证。工具链初始化约定执行浏览器命令前必须先拉取与当前安装版本严格匹配的技能内容避免过时指令agent-browser skills get core --full目标为 Electron 时额外执行agent-browser skills get electron --full同时调用$agent-browser、$use-agent-browser-with-input-file以及 Electron 场景下的$agent-browser-electron三个技能分工如下agent-browser 负责浏览器自动化原语input-file 技能负责文件输入发现、临时插桩、上传命令与通用上传后验证Airi 技能负责 AIRI 路由、状态与格式行为。其 Agent 注册元数据见 .agents/skills/use-agent-browser-for-airi/agents/openai.yaml。运行时选择三种被测表面导入测试可以覆盖三个运行时先从主文档选择入口进入对应的运行时参考指南Electron stage-tamagotchi读 .agents/skills/use-agent-browser-for-airi/references/electron.md验证桌面端真正的多窗口目标切换与 CDP 连接。stage-web读 .agents/skills/use-agent-browser-for-airi/references/web.md验证纯浏览器端的导入与渲染。stage-pocket 与移动端覆盖读 .agents/skills/use-agent-browser-for-airi/references/mobile.md验证共享 Vue UI 在紧凑布局下的表现与原生端边界。三个运行时共享同一份模型导入契约见下一节差异只在于启动方式、目标定位与收尾清理。模型导入契约格式、菜单项与选择器AIRI 当前通过 VueUseuseFileDialog创建每种格式的文件输入并保持其与 DOM 分离detached——这在 model-selector.vue 中可以得到源码印证live2dDialog、vrmDialog、mmdDialog分别以useFileDialog({ accept: .zip })、useFileDialog({ accept: .vrm })、useFileDialog({ accept: .zip,.pmx,.pmd })创建。由于输入节点不挂在文档树上agent-browser 无法用 CSS 选择器直接选中因此三种格式统一采用detached-input 方法详见 .agents/skills/use-agent-browser-with-input-file/references/detached-input.md且必须在点击格式菜单项之前安装桥接。格式菜单项输入选择器格式专属后置结果Live2DLive2Dinput[data-agent-browser-upload][accept.zip]检查校验报告仅当报告允许导入时点击Confirm。VRMVRMinput[data-agent-browser-upload][accept.vrm]等待导入卡片出现不期望出现 Live2D 校验确认。MMDMMDinput[data-agent-browser-upload][accept.zip,.pmx,.pmd]将归档/模型存储与纹理、物理、动态导入、渲染分别验证。源码中 model-selector.vue 显示 MMD 的格式判定逻辑.pmd归为DisplayModelFormat.PMD.pmx或.zip归为PMXZip其余扩展名直接返回渲染器在加载时通过魔数magic bytes区分 zip 与裸模型。Live2D 导入前会先执行validateLive2DZipmodel-selector.vuestatus VALID且无错误时自动确认否则弹出Live2DReportModal校验报告等待人工/自动化确认。测试夹具的来源与合规Live2D / VRM解析$use-vishot-for-airi技能文档.agents/skills/use-vishot-for-airi/SKILL.md中记录的本地夹具路径。MMD使用包含模型及其纹理目录的已授权归档ZIP 内需同时含模型与纹理目录。注意不要在测试或源码注释中编码贡献者的私有夹具名。detached-input 桥接原理核心问题应用点击控件时通过input.click()触发文件对话框而该 input 从未append到文档。agent-browser 无法对游离节点使用选择器因此需要在浏览器测试会话内临时暴露它。在点击格式菜单项之前先注入桥接agent-browser eval window.__agentBrowserOriginalFileInputClick ?? HTMLInputElement.prototype.click; HTMLInputElement.prototype.click function () { if (this.type file) { this.dataset.agentBrowserUpload true; document.body.append(this); return; } return window.__agentBrowserOriginalFileInputClick.call(this); }; true这段代码的行为要点保留普通非 file 类型点击的原生行为只拦截type file的输入阻止原生选择器弹出给应用创建的精确 input 打上data-agent-browser-upload标记将同一个节点附加到文档保留其既有change监听器VueUseuseFileDialog的onChange回调仍能触发。随后检查被捕获的输入并上传注意必须使用绝对路径agent-browser eval Array.from(document.querySelectorAll(input[data-agent-browser-upload]), input ({ accept: input.accept, multiple: input.multiple, connected: input.isConnected })) agent-browser upload input[data-agent-browser-upload][accept.zip] /absolute/path/to/archive.zip若桥接捕获了多个输入务必用accept、multiple或其他应用自有属性收窄选择器不要向所有标记输入上传。在应用的change处理器消费完文件后恢复原型并只移除本桥接创建的节点agent-browser eval if (window.__agentBrowserOriginalFileInputClick) { HTMLInputElement.prototype.click window.__agentBrowserOriginalFileInputClick; delete window.__agentBrowserOriginalFileInputClick; } document.querySelectorAll(input[data-agent-browser-upload]).forEach(input input.remove()); true当页面会继续保持打开时这一步恢复桥接是导入流程第 7 步的强制要求。桥接属于可丢弃测试会话的运行时插桩不是应用代码绝不能提交进仓库。准备 AIRI 状态绕过 onboarding为了保证测试的可复现性使用全新的浏览器会话或专用 Electron user-data 目录并在打开模型设置路由之前标记 onboarding 已完成agent-browser eval localStorage.setItem(onboarding/completed, true); localStorage.setItem(onboarding/skipped, false); location.reload(); true这两个 key 的实际消费方可以在 display-model-from-file.ts 中印证Vishot 场景的markOnboardingCompleted同样写入onboarding/completedtrue与onboarding/skippedfalse。随后打开/settings/models点击Select model再次快照。导入模型七步操作序列点击第一个Options for Display Models按钮源码中该aria-label出现在 model-selector.vue 的导入下拉触发器上点击后展开Live2D / VRM / Spine / MMD / Tachie菜单项。重新快照点击精确的 Live2D / VRM / MMD 菜单项。按 detached-input 方法用上表匹配的选择器上传文件。重新快照。若 Live2D 校验弹出报告检查报告内容仅当报告允许导入时点击Confirm。等待精确的 basename出现在导入模型卡片上且该卡片拥有自己的Pick按钮——detached 输入控件上显示的文件名不足为凭它只证明赋值成功。点击该导入卡片的Pick按钮。页面保持打开时在 change 处理器完成后恢复 detached-input 桥接。每一步交互后都应重新快照因为元素引用eN在 DOM 变化后会失效。Electron 场景下 Live2D 校验报告可能打开模态框若可见的Confirm按钮被可访问性点击路径中的遮挡对话框盖住先重新快照并解析遮挡对话框仅在诊断兜底时才使用 DOM.click()直接点击精确的可见 Confirm 按钮并记录「普通指针自动化未能到达它」这一事实。验证结果五条必查后置条件导入并点击Pick后全部满足以下条件才算通过localStorage.getItem(settings/stage/model)以display-model-开头——即选中了刚导入的自定义模型而非预设。最终舞台展示的是导入的模型而不是预设模型、空白画布、加载状态或导入对话框。截图在视觉上与上传的格式和夹具匹配。agent-browser errors中无模型加载失败。agent-browser console中无相关的 Live2D、VRM、MMD、ZIP、纹理、物理或动态导入失败。两个重要警示不要从 AIRI 头部卡片/档案下拉框推断当前显示模型——它标识的是活动角色卡片可能保留不同的标签。上传、持久化、渲染是三个独立检查点可见的导入卡片只能证明「存储成功」不能证明渲染器能消费该文件。正如 verify-upload.md 强调的把「导入卡片 空白舞台」上报为「存储通过、渲染失败」而不是一次成功的上传测试。localStorage 与持久化契约的源码印证第 1 条条件的含义在 stage-model.ts 中一目了然模型选择以useLocalStorageManualResetstring(settings/stage/model, preset-live2d-1, ...)持久化默认值为预设preset-live2d-1。而自定义模型的 key 生成于 display-models.ts 的addDisplayModelid: \display-model-${nanoid()}随后通过localforage.setItem写入 IndexedDB数据库localforage、storekeyvaluepairs。加载时 [loadDisplayModelsFromIndexedDB](https://link.gitcode.com/i/593997ca449ec07fb5bc5589fd8ab89b) 遍历所有display-model-前缀的 key 并入列表——这就是后置条件 1 判断前缀的依据。同时源码注释明确要求保持await localforage.setItem不丢事件否则updateStageModel可能在 IndexedDB 写入完成前读取新模型 id 并回退到默认模型[display-models.ts](https://link.gitcode.com/i/aea660d0a89447b83660c5eeea1cf63a)、[stage-model.ts](https://link.gitcode.com/i/43dce2db4eede78c2316156f8639cc4e)。updateStageModel还会根据模型格式解析渲染器Live2D ZIP →live2d、VRM →vrm、PMX/PMD →mmdstage-model.ts。Electron 运行时stage-tamagotchi 实操以已知 CDP 端口启动优先使用专用 user-data 目录避免导入的夹具与 onboarding 状态污染贡献者日常 profile。开发模式APP_REMOTE_DEBUGtrue \ APP_REMOTE_DEBUG_PORT9250 \ APP_REMOTE_DEBUG_NO_OPENtrue \ pnpm dev:tamagotchi根目录 package.json 中dev:tamagotchi定义为pnpm -rF proj-airi/stage-tamagotchi run dev。环境变量的底层实现在 apps/stage-tamagotchi/src/main/app/debugger.tsAPP_REMOTE_DEBUGtrue时在 app ready 之前通过app.commandLine.appendSwitch(remote-debugging-port, ...)开启 Electron 的 CDP 端点端口默认 9222并校验端口为 0–65535 的整数APP_REMOTE_DEBUG_NO_OPENtrue阻止自动打开系统浏览器见该文件的openDebugger。若使用构建产物则直接以 Electron 可执行文件启动apps/stage-tamagotchi/out/main/index.js并显式传入新建临时目录下的--user-data-dir。选择渲染目标Electron 会暴露多个 target必须先枚举原始目标再连接curl -sS http://127.0.0.1:9250/json/list agent-browser --session airi-electron --cdp 9250 tab识别主/#/target用其稳定的tNid 切换校验 URL设置 onboarding 存储并关闭已存在的/onboardingtarget。展开主控件并打开设置agent-browser --session airi-electron --cdp 9250 snapshot -i # 将 eN 替换为当前快照中 Expand 的引用 agent-browser --session airi-electron --cdp 9250 click eN agent-browser --session airi-electron --cdp 9250 find role button click --name Open settings再次枚举 target切换到新的/settingstarget 并路由到模型设置agent-browser --session airi-electron --cdp 9250 eval location.hash /settings/models; true agent-browser --session airi-electron --cdp 9250 snapshot -i每条命令都必须带上--session airi-electron --cdp 9250然后遵循 SKILL.md 的共享导入契约。点击Pick后切回主 target等待其 canvas 出现并截图检查 errors 与 console 输出需要在格式间做隔离时用全新的临时 profile 重跑。stage-web 运行时实操在已知 origin 启动 stage-web每种格式使用一个全新的 agent-browser 会话pnpm -F proj-airi/stage-web dev --host 127.0.0.1 --port 5173 agent-browser --session airi-web-live2d open http://127.0.0.1:5173/settings/models设置 onboarding 存储、reload、等待Select model遵循共享的 detached-input 导入契约。点击Pick后agent-browser eval localStorage.getItem(settings/stage/model) agent-browser open http://127.0.0.1:5173/ agent-browser wait canvas agent-browser screenshot agent-browser errors agent-browser console两个细节其一当应用暴露渲染器就绪信号时应显式等待——canvas 存在于 DOM 不等于渲染成功它可能因加载器失败而保持空白其二MMD 要专门检查 console 中的纹理、归档、物理与 Vite 动态导入失败。收集完证据后关闭每个会话全新会话可以避免从贡献者浏览器 profile 中误删无关的 IndexedDB 模型。stage-pocket 与移动端覆盖实操浏览器驱动的移动布局运行 stage-pocket 的 Web 表面专用 HTTPS 端口pnpm -F proj-airi/stage-pocket dev:web --host 127.0.0.1 --port 5174 agent-browser --session airi-pocket-web --ignore-https-errors open https://127.0.0.1:5174/settings/modelsdev:web对应 apps/stage-pocket/package.json 的dev:web: vite。操作设置页时若控件存在于 DOM 但视觉上位于紧凑布局之外可临时切到桌面宽度视口agent-browser set viewport 768 1024遵循共享导入契约。点击Pick后切换到目标手机视口再打开舞台并采集证据agent-browser set viewport 390 844 agent-browser open https://127.0.0.1:5174/ agent-browser wait canvas agent-browser screenshot覆盖边界这一步只验证 stage-pocket 的共享 Vue UI 与移动端响应式渲染器不验证原生文件选择器、Android WebView、WKWebView、文件系统权限或 Capacitor 桥。这类能力必须走原生端测试。Android 模拟器原生覆盖仅当adb devices列出了已启动的模拟器、且存在可检查 WebView 或驱动原生选择器的自动化桥时才运行原生 Android 测试。agent-browser 需要可达的 Chromium CDP 端点——不要因为应用能启动就声称已覆盖。使用根目录 package.json 的pnpm dev:pocket:android对应 apps/stage-pocket/package.json 的cap-vite -- android运行项目运行时通过原生文档选择器上传每种格式返回 AIRI 选中导入卡片验证最终渲染器与 Logcat。当adb或兼容的 WebView 调试端点不可用时如实记录为「not runnable」。iOS Simulator使用根目录 package.json 的pnpm dev:pocket:ios对应 apps/stage-pocket/package.json 的cap-vite -- ios配合已启动的 Simulator做手动或 XCUITest/Appium 覆盖。WKWebView 暴露的是 Safari Web Inspector 而非 Chromium CDPagent-browser 无法直接自动化。不要用 agent-browser 的移动视口结果替代原生 iOS 覆盖浏览器驱动的 stage-pocket 结果与原生 Simulator 结果必须作为独立的两行分别报告。原生文件选择器的通用边界依据 native-file-chooser.mdagent-browser 的upload命令只能把文件赋给 HTML input不能驱动任意操作系统选择器窗口。因此先判断选择器归谁所有——Electron 场景下若应用最终在渲染器创建 HTML input 就回到 attached/detached 方法真正的 Electron 主进程或 OS 对话框走平台自动化机制后再回 agent-browser 做渲染验证Android/iOS 原生选择器走模拟器自动化并单独报告。若选择器无法被安全控制把原生选择检查点记录为 not runnable不得用键入路径、合成文件名或视口模拟冒充已覆盖。上传验证的四层检查点无论哪种运行时都要验证「最深的可观察结果」而不是在agent-browser upload成功退出时停止赋值Assignment目标输入收到了预期的文件。处理Processing应用产生了预期的文件名、预览、校验结果、进度状态或导入记录。持久化Persistence应用在 store / IndexedDB / 后续路由中保留了新选择AIRI 中是settings/stage/model指向display-model-*且模型实体写入 localforage。消费Consumption目标查看器/编辑器/渲染器实际使用了上传的内容AIRI 中是舞台 canvas 渲染出该模型。赋值后重新快照等待应用专属的后置条件最终检查点执行agent-browser errors与agent-browser console。采集能区分「上传文件」与「默认或缓存数据」的证据报告第一个失败的检查点与相关错误而不要把整个流程折叠成一个笼统的通过/失败。关闭与会话收尾测试结束后关闭所有 agent-browser 会话停止为测试启动的进程只删除专用的临时 Electron user-data 目录不要动贡献者正常 profile按「每个格式 × 每个运行时」分别上报passed / failed / not runnable附上第一个失败检查点与相关 console 错误。与 Vishot 场景的衔接当需要确定性视觉证据时可把 agent-browser 验证稳定的流程编码为 Playwright 驱动的 Vishot 场景。仓库提供了现成的可复用场景 display-model-from-file.ts通过环境变量注入模型路径与格式pnpm build:tamagotchi AIRI_DISPLAY_MODEL_FORMATlive2d \ AIRI_DISPLAY_MODEL_PATH/absolute/path/to/model.zip \ pnpm exec vishot capture \ ./packages/scenarios-stage-tamagotchi-electron/src/scenarios/display-model-from-file.ts \ --target electron \ --app-entrypoint ./apps/stage-tamagotchi/out/main/index.js \ --cwd . \ --settle-ms 2500 \ --output-dir ./.vishot/display-model/live2dAIRI_DISPLAY_MODEL_FORMAT仅接受live2d、vrm、mmd三值AIRI_DISPLAY_MODEL_PATH必须为绝对路径display-model-from-file.ts。该场景的契约与本指南完全同构标记 onboarding 完成并关闭已打开的 onboarding 渲染器 → 通过窗口助手打开 Settings → Models → 在选择 Live2D/VRM/MMD 前等待 Playwright 文件选择器 → 通过新的 IndexedDB 模型 key 关联导入 → 选中导入卡片并等待主窗口选择同步 → 捕获主舞台并在结束后移除导入夹具其cleanup会恢复 localStorage 并删除 IndexedDB 中该display-model-*记录见 display-model-from-file.ts。当截图仍显示预设模型、导入对话框、空白舞台或加载状态时该捕获视为失败必须逐一检查生成的每张图片。【免费下载链接】airi Self hosted, you-owned Grok Companion, a container of souls of waifu, cyber livings to bring them into our worlds, wishing to achieve Neuro-samas altitude. Capable of realtime voice chat, Minecraft, Factorio playing. Web / macOS / Windows supported.项目地址: https://gitcode.com/GitHub_Trending/ai/airi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考