【免费下载链接】magpieEvery agents model. One place. Codex on DeepSeek, Claude Code on Kimi, from the menu bar.项目地址https://gitcode.com/gh_mirrors/magpie28/magpie点击查看免费下载导读magpie 仓库在 internal/gui/tests/README.md 中为桌面端 GUI 的前端交互维护了一套独立的浏览器级回归测试menu-scroll.test.cjs不启动 Go 后端、不读取用户本地配置而是直接加载真实的前端 HTML/CSS/JS 资源配合隔离的 API fixture在 Chromium 与 WebKit 两个引擎下验证「会话页的文件夹/模型筛选下拉菜单」和「主模型选择器」的滚动、键盘选择与关闭行为。读完本文你将掌握这套测试的运行方式、环境变量控制、底层实现原理包括 Playwright 路由拦截与断言细节并能将其复用到 magpie 后续任何前端交互的回归验证中。一、测试定位为什么不依赖后端也能做回归1.1 测试范围与目标组件根据 README 的描述该套件校验的对象集中在两个 UI 组件会话页的会话文件夹筛选#sessFolder与模型筛选#sessModel这两个按钮位于 internal/gui/assets/index.html 中由sessPick()创建下拉菜单见 internal/gui/assets/app.js选中后触发renderSessions()重绘会话列表app.js 中通过byFolder、byModel过滤。主模型选择器#pop/#list位于 index.html是全局的模型弹出选择面板。测试关注点包括滚轮滚动wheel菜单内容滚动而菜单保持打开滚动条轨道/滑块交互track/thumb点击滚动条轨道、拖动滑块键盘选择ArrowUp/ArrowDown/Enter/Escape与选中后的回调关闭行为点击外部、页面滚动、窗口 resize 等场景下的自动关闭。1.2 完全隔离的运行模型测试通过 Playwright 的page.route(**/*, serve)拦截页面中的所有网络请求由测试自身提供静态资源与 API 数据/boot.js、/wails/runtime.js以最小桩stub替换规避桌面运行时依赖/api/state、/api/sessions、/api/sessions/stats、/api/update、/api/drift、/api/groups、/api/gateway/trace全部返回测试内构造的 fixture 数据任何未预期的/api/*请求会直接触发断言失败assert(!url.pathname.startsWith(/api/), Unexpected API: ...)确保测试覆盖完整、无漏网请求。这意味着不启动 magpie 后端、不触碰用户磁盘上的真实配置前端代码本身的可运行性与交互行为就可以被验证。前端静态资源通过path.resolve(__dirname, ../assets)指向真实资产目录因此测试运行的是仓库内实际交付的 HTML/CSS/JS。二、环境准备与运行命令2.1 依赖要求按 README 与测试源码menu-scroll.test.cjs要求需要Node.js带内置 test runner即node --testPlaywright测试代码从require(playwright)导入chromium与webkitPlaywright 的浏览器二进制playwright install chromium webkit。测试中以chromium.launch({ channel: chromium, ignoreDefaultArgs: [--hide-scrollbars] })启动 Chromium显式保留滚动条便于验证轨道/滑块交互WebKit 直接webkit.launch()。如果 Playwright 安装在仓库之外需要把包含其包的位置加入模块搜索路径NODE_PATH/path/to/node_modules node --test internal/gui/tests/menu-scroll.test.cjs2.2 完整运行命令node --test internal/gui/tests/menu-scroll.test.cjs该命令默认同时在 Chromium 与 WebKit 两个引擎上执行同一套用例。应用本身不依赖任何前端打包工具或 npm 依赖——前端是纯静态资源这也是测试能直接加载真实文件的前提。2.3 环境变量控制环境变量作用示例BROWSER只跑单个引擎取值chromium或webkitBROWSERwebkit node --test internal/gui/tests/menu-scroll.test.cjsARTIFACT_DIR指定外部目录用于保留截图与 Playwright trace失败断言也会留存现场ARTIFACT_DIR/tmp/magpie-artifacts node --test internal/gui/tests/menu-scroll.test.cjsNODE_PATHPlaywright 安装在仓库外时指向其 node_modules见上文ARTIFACT_DIR生效时测试的t.after钩子会先递归创建该目录然后写入${engine}.png整页截图与${engine}.zipPlaywright tracing 归档含截图与快照未设置时仅收集 tracing 而不落盘。这对 CI 排障非常有价值一次t.test失败时仍会保留当时两个引擎各自的截图与 trace。注意README 明确说明这些浏览器检查独立于make test。make test只执行go vet ./... go test ./...见 Makefile因此前端浏览器回归需要单独纳入 CI 或本地开发流程而不能依赖 Go 测试入口。三、测试夹具Fixtures数据怎么来测试在进程中构造了三组隔离数据模拟真实后端返回值usage40 条用量记录每条含agent: fixture、cwd/projects/project-01到project-40、modelmodel-01到model-40、input40000 递减 500、output: 1000、cache_read/cache_write: 0、cost: 1、priced: true。40 条记录保证了下拉菜单必然溢出可视区从而触发滚动路径。sessions由 usage 映射而来每条含id、title: Session N、name: Fixture、last/start时间戳与models: [u]。state单个 agentfixture其model字段的options来自 40 个模型值用于驱动主模型选择器#pop/#list的长列表。会话列表断言#sessList .sess-item数量为 40正是依赖这份 fixture 的量级来保证「必然溢出」。可见 fixtures 不仅是静态数据其规模本身就是测试逻辑的一部分。四、滚动与关闭行为的实现原理4.1 三种滚动手势如何模拟scrollMenu(page, selector, gesture)首先断言scrollHeight clientHeightfixture 必须溢出否则测试前提失效然后按手势执行wheel滚轮鼠标移到菜单中心page.mouse.wheel(0, 240)向下滚动 240 像素track滚动条轨道在菜单右下角(x width - 6, y height - 25)处点击滚动条轨道drag拖动滑块鼠标按下后分 10 步拖到y 200再松开模拟拖动滚动条滑块。随后scrolled()用waitForFunction等待菜单满足「未隐藏且scrollTop 0」并断言菜单仍然可见且确实发生了滚动。这验证了核心交互语义滚动菜单内容不应导致菜单关闭。4.2 前端为何如此实现前端菜单由openProtoMenu()app.js构建菜单打开时注册了三个全局监听器其中 scroll 监听的关键逻辑是// Scrolling the menu keeps it open; scrolling outside moves its anchor. const scroll (e) { if (!box.contains(e.target)) closeProtoMenu(); };即滚动事件的目标在菜单内部时菜单保持打开滚动发生在菜单外部如页面主体时关闭菜单。测试中的「page scroll」用例正是验证这一点——在菜单打开后对页面滚轮断言菜单 detached。4.3 关闭行为全景测试覆盖的关闭场景包括场景操作断言Escape 键打开筛选菜单后按 Escape菜单数量为 0且焦点回到触发按钮e document.activeElement外部点击打开后点击会话搜索框#sessQ菜单 detached页面滚动打开后在(1000, 650)滚轮 200菜单 detached窗口 resizesetViewportSize({ width: 1101 })菜单 detached重新打开关闭后再次点击并滚轮菜单仍可正常打开滚动前端侧closeProtoMenu()会移除 mousedown/keydown/scroll/resize 四个监听器并删除 DOM 节点app.js确保菜单生命周期干净。五、键盘选择与状态联动5.1 键盘遍历openProtoMenu的 keydown 处理器实现了循环遍历Escape 关闭并归还焦点ArrowDown/ArrowUp 在条目间移动焦点首/尾按模运算环绕。测试对应的键盘用例打开#sessFolder或#sessModel菜单按 ArrowUp断言菜单滚动且最后一个.pm-item成为document.activeElementpreventScroll: true保证焦点移动不破坏滚动位置按 Enter断言菜单关闭按钮文本匹配(?:project|model)-40——即选中了列表末尾项断言会话列表被过滤为 1 条且名称为 Session 40。这同时验证了「筛选状态 →renderSessions()→ 列表重绘」的完整联动sessModel/sessFolder的全局状态在 app.js 定义选值后经choose回调更新并触发重渲染app.js。5.2 主模型选择器「main model picker keeps scrolling」用例切换到 Agents 视图#nav [data-viewagents]依次用 wheel/track/drag 三种手势验证#list滚动随后在#q搜索框按 Escape 关闭断言#pop隐藏。注意主选择器的关闭方式与筛选菜单不同前者是模态 pop后者是 proto-menu测试对两种菜单形态都做了覆盖。六、工程实践要点与扩展建议6.1 为什么这套测试值得保留真实前端 隔离后端加载的是 internal/gui/assets 下真实交付的 HTML/CSS/JS而非复制粘贴的测试副本杜绝「测试代码与线上代码分叉」跨引擎覆盖Chromium 与 WebKit 双引擎验证可提前暴露滚动条、焦点管理、动画等引擎差异测试还通过reducedMotion: reduce与注入 CSS 固定滚动条宽度消除动画与 OS 滚动条偏好对结果的影响零外部状态不读用户配置、不起后端确定性高、可并行、适合纳入 CI 的独立 job。6.2 运行时错误护栏测试全程收集pageerror事件并在引擎级用例结束时assert.deepEqual(errors, [], page runtime errors)——任何未捕获的 JS 异常都会让测试失败。这与addInitScript预设magpie.usageTab sessions默认落在会话页配合保证了测试路径与真实用户路径一致。6.3 扩展思路参照本测试的骨架可以低成本扩展出更多前端回归新增对#sessAgent分段控件、配额页#quotaMode的切换断言复用serve()路由拦截为/api/...注入边界数据如空 sessions、单条 sessions验证空态与单条目 UI将ARTIFACT_DIR纳入 CI 的 artifact 收集便于失败后离线分析 trace。结语menu-scroll.test.cjs是 magpie 前端质量保障中一块小而关键的拼图它以最小的运行时依赖把最容易回归的滚动、键盘与关闭交互钉死在双引擎下。结合 README 中记录的运行方式、环境变量与 Playwright 版本基线1.63.0无论是本地node --test快速验证还是 CI 中独立于make test的浏览器回归 job都能开箱即用。理解其 fixture 构造与路由拦截机制后你也可以轻松为 magpie 的其他前端交互编写同等级别的回归保护。赞分享【免费下载链接】magpieEvery agents model. One place. Codex on DeepSeek, Claude Code on Kimi, from the menu bar.项目地址https://gitcode.com/gh_mirrors/magpie28/magpie点击查看免费下载相关推荐ChartDB选择器单选多选下拉菜单ChartDB选择器单选多选下拉菜单 概述 在数据库图表设计工具ChartDB中选择器组件是用户交互的核心元素。ChartDB提供了三种强大的选择器组件数据库前端数据可视化AI 应用OrderedPMap使用指南PCollections中的有序映射实现详解OrderedPMap使用指南PCollections中的有序映射实现详解 在Java开发中持久化集合库PCollections为开发者提供了高效、线程安全软件架构summarize 手动端到端测试清单验证 Auto 模型自动选择与 Presets 的实战指南summarize 手动端到端测试清单验证 Auto 模型自动选择与 Presets 的实战指南 本篇技术指南以 summarize 项目CLI Chr创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
magpie 前端下拉菜单滚动回归测试实战：用 Playwright 双引擎验证会话筛选器与模型选择器
【免费下载链接】magpieEvery agents model. One place. Codex on DeepSeek, Claude Code on Kimi, from the menu bar.项目地址https://gitcode.com/gh_mirrors/magpie28/magpie点击查看免费下载导读magpie 仓库在 internal/gui/tests/README.md 中为桌面端 GUI 的前端交互维护了一套独立的浏览器级回归测试menu-scroll.test.cjs不启动 Go 后端、不读取用户本地配置而是直接加载真实的前端 HTML/CSS/JS 资源配合隔离的 API fixture在 Chromium 与 WebKit 两个引擎下验证「会话页的文件夹/模型筛选下拉菜单」和「主模型选择器」的滚动、键盘选择与关闭行为。读完本文你将掌握这套测试的运行方式、环境变量控制、底层实现原理包括 Playwright 路由拦截与断言细节并能将其复用到 magpie 后续任何前端交互的回归验证中。一、测试定位为什么不依赖后端也能做回归1.1 测试范围与目标组件根据 README 的描述该套件校验的对象集中在两个 UI 组件会话页的会话文件夹筛选#sessFolder与模型筛选#sessModel这两个按钮位于 internal/gui/assets/index.html 中由sessPick()创建下拉菜单见 internal/gui/assets/app.js选中后触发renderSessions()重绘会话列表app.js 中通过byFolder、byModel过滤。主模型选择器#pop/#list位于 index.html是全局的模型弹出选择面板。测试关注点包括滚轮滚动wheel菜单内容滚动而菜单保持打开滚动条轨道/滑块交互track/thumb点击滚动条轨道、拖动滑块键盘选择ArrowUp/ArrowDown/Enter/Escape与选中后的回调关闭行为点击外部、页面滚动、窗口 resize 等场景下的自动关闭。1.2 完全隔离的运行模型测试通过 Playwright 的page.route(**/*, serve)拦截页面中的所有网络请求由测试自身提供静态资源与 API 数据/boot.js、/wails/runtime.js以最小桩stub替换规避桌面运行时依赖/api/state、/api/sessions、/api/sessions/stats、/api/update、/api/drift、/api/groups、/api/gateway/trace全部返回测试内构造的 fixture 数据任何未预期的/api/*请求会直接触发断言失败assert(!url.pathname.startsWith(/api/), Unexpected API: ...)确保测试覆盖完整、无漏网请求。这意味着不启动 magpie 后端、不触碰用户磁盘上的真实配置前端代码本身的可运行性与交互行为就可以被验证。前端静态资源通过path.resolve(__dirname, ../assets)指向真实资产目录因此测试运行的是仓库内实际交付的 HTML/CSS/JS。二、环境准备与运行命令2.1 依赖要求按 README 与测试源码menu-scroll.test.cjs要求需要Node.js带内置 test runner即node --testPlaywright测试代码从require(playwright)导入chromium与webkitPlaywright 的浏览器二进制playwright install chromium webkit。测试中以chromium.launch({ channel: chromium, ignoreDefaultArgs: [--hide-scrollbars] })启动 Chromium显式保留滚动条便于验证轨道/滑块交互WebKit 直接webkit.launch()。如果 Playwright 安装在仓库之外需要把包含其包的位置加入模块搜索路径NODE_PATH/path/to/node_modules node --test internal/gui/tests/menu-scroll.test.cjs2.2 完整运行命令node --test internal/gui/tests/menu-scroll.test.cjs该命令默认同时在 Chromium 与 WebKit 两个引擎上执行同一套用例。应用本身不依赖任何前端打包工具或 npm 依赖——前端是纯静态资源这也是测试能直接加载真实文件的前提。2.3 环境变量控制环境变量作用示例BROWSER只跑单个引擎取值chromium或webkitBROWSERwebkit node --test internal/gui/tests/menu-scroll.test.cjsARTIFACT_DIR指定外部目录用于保留截图与 Playwright trace失败断言也会留存现场ARTIFACT_DIR/tmp/magpie-artifacts node --test internal/gui/tests/menu-scroll.test.cjsNODE_PATHPlaywright 安装在仓库外时指向其 node_modules见上文ARTIFACT_DIR生效时测试的t.after钩子会先递归创建该目录然后写入${engine}.png整页截图与${engine}.zipPlaywright tracing 归档含截图与快照未设置时仅收集 tracing 而不落盘。这对 CI 排障非常有价值一次t.test失败时仍会保留当时两个引擎各自的截图与 trace。注意README 明确说明这些浏览器检查独立于make test。make test只执行go vet ./... go test ./...见 Makefile因此前端浏览器回归需要单独纳入 CI 或本地开发流程而不能依赖 Go 测试入口。三、测试夹具Fixtures数据怎么来测试在进程中构造了三组隔离数据模拟真实后端返回值usage40 条用量记录每条含agent: fixture、cwd/projects/project-01到project-40、modelmodel-01到model-40、input40000 递减 500、output: 1000、cache_read/cache_write: 0、cost: 1、priced: true。40 条记录保证了下拉菜单必然溢出可视区从而触发滚动路径。sessions由 usage 映射而来每条含id、title: Session N、name: Fixture、last/start时间戳与models: [u]。state单个 agentfixture其model字段的options来自 40 个模型值用于驱动主模型选择器#pop/#list的长列表。会话列表断言#sessList .sess-item数量为 40正是依赖这份 fixture 的量级来保证「必然溢出」。可见 fixtures 不仅是静态数据其规模本身就是测试逻辑的一部分。四、滚动与关闭行为的实现原理4.1 三种滚动手势如何模拟scrollMenu(page, selector, gesture)首先断言scrollHeight clientHeightfixture 必须溢出否则测试前提失效然后按手势执行wheel滚轮鼠标移到菜单中心page.mouse.wheel(0, 240)向下滚动 240 像素track滚动条轨道在菜单右下角(x width - 6, y height - 25)处点击滚动条轨道drag拖动滑块鼠标按下后分 10 步拖到y 200再松开模拟拖动滚动条滑块。随后scrolled()用waitForFunction等待菜单满足「未隐藏且scrollTop 0」并断言菜单仍然可见且确实发生了滚动。这验证了核心交互语义滚动菜单内容不应导致菜单关闭。4.2 前端为何如此实现前端菜单由openProtoMenu()app.js构建菜单打开时注册了三个全局监听器其中 scroll 监听的关键逻辑是// Scrolling the menu keeps it open; scrolling outside moves its anchor. const scroll (e) { if (!box.contains(e.target)) closeProtoMenu(); };即滚动事件的目标在菜单内部时菜单保持打开滚动发生在菜单外部如页面主体时关闭菜单。测试中的「page scroll」用例正是验证这一点——在菜单打开后对页面滚轮断言菜单 detached。4.3 关闭行为全景测试覆盖的关闭场景包括场景操作断言Escape 键打开筛选菜单后按 Escape菜单数量为 0且焦点回到触发按钮e document.activeElement外部点击打开后点击会话搜索框#sessQ菜单 detached页面滚动打开后在(1000, 650)滚轮 200菜单 detached窗口 resizesetViewportSize({ width: 1101 })菜单 detached重新打开关闭后再次点击并滚轮菜单仍可正常打开滚动前端侧closeProtoMenu()会移除 mousedown/keydown/scroll/resize 四个监听器并删除 DOM 节点app.js确保菜单生命周期干净。五、键盘选择与状态联动5.1 键盘遍历openProtoMenu的 keydown 处理器实现了循环遍历Escape 关闭并归还焦点ArrowDown/ArrowUp 在条目间移动焦点首/尾按模运算环绕。测试对应的键盘用例打开#sessFolder或#sessModel菜单按 ArrowUp断言菜单滚动且最后一个.pm-item成为document.activeElementpreventScroll: true保证焦点移动不破坏滚动位置按 Enter断言菜单关闭按钮文本匹配(?:project|model)-40——即选中了列表末尾项断言会话列表被过滤为 1 条且名称为 Session 40。这同时验证了「筛选状态 →renderSessions()→ 列表重绘」的完整联动sessModel/sessFolder的全局状态在 app.js 定义选值后经choose回调更新并触发重渲染app.js。5.2 主模型选择器「main model picker keeps scrolling」用例切换到 Agents 视图#nav [data-viewagents]依次用 wheel/track/drag 三种手势验证#list滚动随后在#q搜索框按 Escape 关闭断言#pop隐藏。注意主选择器的关闭方式与筛选菜单不同前者是模态 pop后者是 proto-menu测试对两种菜单形态都做了覆盖。六、工程实践要点与扩展建议6.1 为什么这套测试值得保留真实前端 隔离后端加载的是 internal/gui/assets 下真实交付的 HTML/CSS/JS而非复制粘贴的测试副本杜绝「测试代码与线上代码分叉」跨引擎覆盖Chromium 与 WebKit 双引擎验证可提前暴露滚动条、焦点管理、动画等引擎差异测试还通过reducedMotion: reduce与注入 CSS 固定滚动条宽度消除动画与 OS 滚动条偏好对结果的影响零外部状态不读用户配置、不起后端确定性高、可并行、适合纳入 CI 的独立 job。6.2 运行时错误护栏测试全程收集pageerror事件并在引擎级用例结束时assert.deepEqual(errors, [], page runtime errors)——任何未捕获的 JS 异常都会让测试失败。这与addInitScript预设magpie.usageTab sessions默认落在会话页配合保证了测试路径与真实用户路径一致。6.3 扩展思路参照本测试的骨架可以低成本扩展出更多前端回归新增对#sessAgent分段控件、配额页#quotaMode的切换断言复用serve()路由拦截为/api/...注入边界数据如空 sessions、单条 sessions验证空态与单条目 UI将ARTIFACT_DIR纳入 CI 的 artifact 收集便于失败后离线分析 trace。结语menu-scroll.test.cjs是 magpie 前端质量保障中一块小而关键的拼图它以最小的运行时依赖把最容易回归的滚动、键盘与关闭交互钉死在双引擎下。结合 README 中记录的运行方式、环境变量与 Playwright 版本基线1.63.0无论是本地node --test快速验证还是 CI 中独立于make test的浏览器回归 job都能开箱即用。理解其 fixture 构造与路由拦截机制后你也可以轻松为 magpie 的其他前端交互编写同等级别的回归保护。赞分享【免费下载链接】magpieEvery agents model. One place. Codex on DeepSeek, Claude Code on Kimi, from the menu bar.项目地址https://gitcode.com/gh_mirrors/magpie28/magpie点击查看免费下载相关推荐ChartDB选择器单选多选下拉菜单ChartDB选择器单选多选下拉菜单 概述 在数据库图表设计工具ChartDB中选择器组件是用户交互的核心元素。ChartDB提供了三种强大的选择器组件数据库前端数据可视化AI 应用OrderedPMap使用指南PCollections中的有序映射实现详解OrderedPMap使用指南PCollections中的有序映射实现详解 在Java开发中持久化集合库PCollections为开发者提供了高效、线程安全软件架构summarize 手动端到端测试清单验证 Auto 模型自动选择与 Presets 的实战指南summarize 手动端到端测试清单验证 Auto 模型自动选择与 Presets 的实战指南 本篇技术指南以 summarize 项目CLI Chr创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
