HTML Report Tabs for Pipelines

Azure DevOps extension that publishes HTML reports as build result tabs.

Features

• Living Doc tab: Displays the Reqnroll/SpecFlow living documentation report
• Coverage Dashboard tab: Displays the product coverage dashboard

Pipeline Usage

- task: PublishJazzReport@1
  displayName: 'Living Doc Tab'
  condition: always()
  inputs:
    htmlPath: '$(ReportFolderPath)\report.html'
    tabName: 'living-doc'

- task: PublishJazzReport@1
  displayName: 'Coverage Dashboard Tab'
  condition: always()
  inputs:
    htmlPath: '$(Build.ArtifactStagingDirectory)\HtmlReport\index.html'
    tabName: 'coverage-dashboard'

Build & Publish

Prerequisites

• Node.js 16+
• tfx-cli installed globally: npm install -g tfx-cli

Steps

1. Install dependencies:

   cd task && npm install && cd ..
   cd tab && npm install && cd ..
   

2. Copy VSS SDK:

   cp tab/node_modules/vss-web-extension-sdk/lib/VSS.SDK.min.js tab/lib/VSS.SDK.min.js
   

3. Generate a unique task ID: Replace the id in task/task.json with a new GUID:

   [guid]::NewGuid().ToString()
   

   Then update supportsTasks in vss-extension.json with the same GUID.

4. Package the extension:

   tfx extension create --manifest-globs vss-extension.json
   

5. Publish to your org:

   tfx extension publish --manifest-globs vss-extension.json --token <PAT>
   

   Or upload the .vsix file manually at https://marketplace.visualstudio.com/manage/publishers/swissre

6. Install in your ADO org via Organization Settings → Extensions

How It Works

1. The pipeline task uploads the HTML file as a build timeline attachment (task.addattachment)
2. The build results tab fetches the attachment via ADO REST API and renders it in a sandboxed iframe
3. Full HTML/CSS/JS is preserved — no sanitization like Wiki's :::html block