如何在Azure DevOps工作项上下文菜单中添加自定义菜单项

你需要通过开发自定义Azure DevOps扩展来实现该需求，具体步骤如下：

1. 环境准备 #

• 安装Node.js 16+版本
• 全局安装扩展打包工具：运行npm install -g tfx-cli
• 拥有目标Azure DevOps组织的项目集合管理员权限，用于测试和发布扩展

2. 配置扩展清单文件 #

在扩展项目根目录创建vss-extension.json，核心配置如下：

{
  "manifestVersion": 1,
  "id": "test-case-latest-result-menu",
  "name": "Test Case Latest Result Viewer",
  "version": "1.0.0",
  "publisher": "你的发布者ID",
  "targets": [
    {
      "id": "Microsoft.VisualStudio.Services.Cloud"
    }
  ],
  "scopes": ["vso.work", "vso.test"],
  "contributions": [
    {
      "id": "test-case-context-menu",
      "type": "ms.vss-web.action",
      "targets": ["ms.vss-work-web.work-item-context-menu"],
      "properties": {
        "text": "view Latest Test Result",
        "icon": "你的图标路径（可选）",
        "uri": "action.html",
        "constraints": [
          {
            "name": "WorkItemType",
            "values": ["Test Case"]
          }
        ]
      }
    }
  ],
  "files": [
    {
      "path": "action.html",
      "addressable": true
    },
    {
      "path": "node_modules/vss-web-extension-sdk/lib",
      "addressable": true,
      "packagePath": "lib"
    }
  ]
}

注：约束配置WorkItemType保证菜单仅在测试用例工作项的上下文菜单中显示，不会出现在其他工作项类型中

3. 实现菜单点击逻辑 #

创建action.html文件，引入VSS SDK，实现获取测试用例ID、查询最新测试结果、跳转详情页的逻辑：

<!DOCTYPE html>
<html>
<head>
  <script src="lib/VSS.SDK.min.js"></script>
  <script>
    VSS.init({ usePlatformScripts: true });
    VSS.ready(function () {
      // 获取当前选中的测试用例ID
      const workItemId = VSS.getConfiguration().workItemId;
      const orgUrl = VSS.getWebContext().collection.uri;
      const projectName = VSS.getWebContext().project.name;

      // 调用测试接口查询最新的测试结果
      fetch(`${orgUrl}/${projectName}/_apis/test/Results?testCaseId=${workItemId}&$top=1&$orderby=completedDate desc&api-version=7.1-preview.6`, {
        headers: { "Authorization": "Bearer " + VSS.getAccessToken() }
      }).then(res => res.json()).then(data => {
        if (data.value && data.value.length > 0) {
          const testRunId = data.value[0].testRun.id;
          // 拼接测试运行详情页URL跳转
          window.open(`${orgUrl}/${projectName}/_testManagement/runs?_a=runCharts&runId=${testRunId}`);
        } else {
          alert("该测试用例暂无测试结果");
        }
        VSS.notifyLoadSucceeded();
      });
    });
  </script>
</head>
<body>
</body>
</html>

4. 打包测试发布 #

• 项目根目录运行npm install vss-web-extension-sdk安装SDK依赖
• 运行tfx extension create --manifest-globs vss-extension.json打包扩展，生成vsix文件
• 打开Azure DevOps组织设置→扩展→管理扩展→上传扩展，上传生成的vsix文件，安装到目标项目即可使用

内容的提问来源于stack exchange，提问作者Muhammad Habib