开发与工程 ✓ Microsoft · 官方 screenshot-testingvisual-regression-testingscreenshot-baselinesgithub-actionsgithub-clici

CI 组件截图基线调查

从 CI 检查结果和截图制品中调查组件截图差异。

FollowSkills 评估 · FSRS-2.0
不推荐
37/ 100 五分制 1.9 / 5
信任安全14 / 25 · 2.8/5

技能明确指出基线由外部 Azure 截图服务管理,并提供按 CI artifact 下载的路径;但未说明数据流、访问权限、敏感截图处理、用户确认、回滚或提交安全边界。描述声称会“commit”基线,而正文明确说无需手动更新,存在权限与行为边界不清,因此扣分。

可靠稳定5 / 20 · 1.3/5

正文步骤较短且下载命令具体,但依赖已认证且可用的 gh CLI、GitHub 权限和有效 run-id,未说明缺失 artifact、权限失败、网络失败或比较失败时的诊断与恢复。顶部描述与正文关于是否提交基线相互矛盾,静态证据不足,且无专属测试,因此不超过静态上限。

适用触发6 / 15 · 2.0/5

触发条件和主要场景写得清楚:CI 报告截图差异时调查组件截图;但输入、输出、非适用范围、比较工具和后续决策标准不完整。依赖 GitHub CI、GitHub CLI 及海外 Azure 服务,可能影响中国大陆网络环境,因此扣分。

规范维护5 / 15 · 1.7/5

名称和场景基本匹配,结构简洁,并说明基线存储迁移和 Git LFS 变化;但没有安装说明、CLI 版本、参数约束、示例输出、FAQ、限制、版本/变更记录或明确维护责任。仓库上下文提供 MIT 许可证和 Microsoft 来源,但不能弥补技能文档治理信息不足。

有效结果3 / 15 · 1.0/5

可帮助用户下载 CI 原始截图进行人工调查,但不能完成描述所称的“更新并提交”任务;没有给出本地比较方法、判定标准或修复/接受流程,结果仍需较多人工工作,边际价值有限。

证据核验4 / 10 · 2.0/5

技能提供了可审计的命令和外部服务说明,仓库上下文也说明 CI 管理截图;但未提供与该技能关键路径对应的专属 workflow、测试、固定服务响应或可复现输出,且本评估未执行任何步骤,因此仅给有限静态证据分。

证据充分度: 评估于 2026年7月20日 审查版本 5b3e1be7be9e
使用前请注意
  • 技能元数据与正文对“提交基线”是否仍需执行存在直接矛盾,使用前应确认实际目标是调查 artifact 还是修改仓库。
  • 命令依赖 gh 认证、有效 run-id、GitHub artifact 权限及 Azure 服务可达性;未提供失败诊断或大陆网络替代方案。
  • 下载的截图可能包含项目代码或界面数据,文档未说明存储、清理或敏感信息处理要求。
查看完整评分方法 →

它能做什么 & 适用场景

这个技能用于调查组件截图测试发现的视觉差异,并处理 CI 运行中的截图制品。当前截图基线不再存储在仓库中,而是由外部截图服务管理,服务地址为 hediet-screenshots.azurewebsites.net。合并到 main 分支后,合并提交中的截图会自动成为新的基线,因此通常不需要手动更新或提交基线图片。它适合需要核对 PR 截图差异、下载原始截图并在本地比较的开发流程。

Checking Component Screenshots GitHub Action 检测到变化时,指导用户查看 PR 评论中的前后截图对比;使用 gh run download <run-id> --name screenshots --dir .tmp/screenshots 从 CI 运行中下载名为 screenshots 的制品;说明可对下载到 .tmp/screenshots 的完整截图集合进行本地比较。它不会要求把基线图片写回 test/componentFixtures/.screenshots/baseline/,也不会使用 Git LFS 存储截图。

  1. 组件测试触发 `Checking Component Screenshots` Action 并在 PR 中报告差异时,开发者查看前后截图以判断变化是否合理。
  2. CI 截图结果需要脱离 PR 评论进行细查时,开发者下载 `screenshots` 制品并检查原始捕获图片。
  3. 合并前需要确认组件视觉变化时,维护者在本地比较 CI 下载的完整截图集合。
  4. 团队希望继续维护截图测试、但不想在 Git 仓库中保存基线图片时,采用外部截图服务管理流程。

优缺点一览

优点
  • 明确使用 PR 评论中的前后对比和 CI 截图制品进行调查。
  • 截图基线由外部服务按提交 SHA 管理,仓库不再保存基线图片。
  • 不再依赖 Git LFS 存储截图。
  • 提供了可直接执行的 GitHub CLI 制品下载命令。
局限
  • 它主要提供调查流程,不包含截图差异修复或本地比较工具的具体命令。
  • 需要能够访问 CI 运行、PR 评论和外部截图服务的网络环境。
  • 需要 GitHub CLI;源材料没有说明认证、权限配置或失败重试方式。
  • 没有说明外部截图服务的价格、可用性保证或数据保留政策。

如何安装

技能位于 VS Code 仓库的 .github/skills/update-screenshots/SKILL.md。可先执行 git clone https://github.com/microsoft/vscode.git,然后将该技能目录保留在 .github/skills/update-screenshots/。源材料没有说明具体 Agent 客户端的注册、安装或配置步骤,也没有列出额外的软件包安装命令。

如何使用

将其作为子代理运行,并在组件截图 Action 报告差异时触发,例如:请调查这次 CI 组件截图差异,并下载截图制品进行本地比较。 先查看 CI 发布的 PR 评论;需要原始图片时执行 gh run download <run-id> --name screenshots --dir .tmp/screenshots。不要手动提交截图基线:源材料说明合并到 main 后,合并提交会自动成为新的基线。

对比同类

与源材料描述的旧流程相比,截图不再通过仓库中的 test/componentFixtures/.screenshots/baseline/ 或 Git LFS 保存,而是由外部截图服务按提交 SHA 管理。该技能保留 CI 制品下载和本地调查步骤,但不再要求手动提交新的基线。

常见问题

它会把新的截图基线提交到 Git 仓库吗?
不会。当前说明称基线图片不再存储在仓库中,合并到 `main` 后,合并提交中的截图会自动成为新的基线。
什么时候应该使用这个技能?
当 `Checking Component Screenshots` GitHub Action 检测到变化并在 PR 中发布前后对比时,使用它查看差异或下载原始截图进行调查。
使用它需要什么?
需要 CI 运行的访问能力、网络连接、可写的本地文件系统,以及可执行 `gh run download` 的 GitHub CLI。源材料未说明具体认证配置。
它能直接修复或批准截图差异吗?
源材料只说明如何查看 PR 对比和下载截图制品,没有提供修复差异、批准变更或执行本地比较的专用命令。

同仓库的其他 Skills

均来自 microsoft/vscode

开发与工程 ✓ Microsoft · 官方

工具重命名兼容性检查

防止内置工具重命名破坏现有提示词与工具配置。

开发与工程 ✓ Microsoft · 官方

Copilot Chat OpenTelemetry 埋点指南

为 Copilot Chat 统一设计和维护 OpenTelemetry 埋点。

开发与工程 ✓ Microsoft · 官方

VS Code 配置策略维护助手

规范 VS Code 企业配置策略的注册、导出与验证。

设计与前端 ✓ Microsoft · 官方

VS Code 设计哲学

用价值、原则和设计动作,把“看起来不对”转化为可执行的界面改进。

开发与工程 ✓ Microsoft · 官方

Agent 主机端到端测试助手

用严格的回放夹具维护 VS Code Agent 主机端到端测试。

开发与工程 ✓ Microsoft · 官方

VS Code 集成浏览器架构指南

帮助开发者安全理解和修改 VS Code 集成浏览器的跨进程架构。

开发与工程 ✓ Microsoft · 官方

VS Code Agents 窗口会话架构

帮助代理安全实现和修复 VS Code Agents 窗口功能。

开发与工程 ✓ Microsoft · 官方

智能提交助手

根据仓库惯例生成提交信息并安全提交代码变更。

开发与工程 ✓ Microsoft · 官方

Agent Host 日志分析

定位 Agent Host 导出日志中的会话、传输与主机问题。

开发与工程 ✓ Microsoft · 官方

VS Code 单元测试助手

在 VS Code 源码仓库中按文件、测试名称或匹配模式运行单元测试。

开发与工程 ✓ Microsoft · 官方

VS Code Agent 定制助手

帮助创建、修复和排查 VS Code Agent 定制文件及其加载问题。

开发与工程 ✓ Microsoft · 官方

Code OSS 启动与调试

为 VS Code 源码构建提供隔离启动、Playwright 自动化和多进程调试端口。

开发与工程 ✓ Microsoft · 官方

VS Code 无障碍开发助手

为 VS Code 交互式功能提供可执行的无障碍实现规范。

设计与前端 ✓ Microsoft · 官方

VS Code CSS 布局规范

用 VS Code 规范构建稳健的 CSS 布局与文本截断体验

开发与工程 ✓ Microsoft · 官方

VS Code Chat 性能实验室

基准测试聊天渲染性能,并检测会话中的内存泄漏。

开发与工程 ✓ Microsoft · 官方

组件夹具与截图测试

帮助你为 VS Code 组件创建稳定、可主题化的截图测试夹具。

开发与工程 ✓ Microsoft · 官方

VS Code 冒烟测试助手

运行、筛选并调试 VS Code 端到端冒烟测试。

开发与工程 ✓ Microsoft · 官方

VS Code 崩溃转储符号化

将原生 VS Code 崩溃转储转换为带方法名的可读回溯。

开发与工程 ✓ Microsoft · 官方

VS Code 本地 Web 工作台

在本地 vscode.dev 中验证 VS Code 工作台和 Agents 窗口改动。

开发与工程 ✓ Microsoft · 官方

反馈执行器

读取当前会话反馈并落实对应代码修改。

相关 Skills