Working with Workflow Summaries

1. Creating Job Summaries

Example: Basic Job Summary

const summary = &#x27;<h2>Build Summary</h2><p>Build completed successfully.</p>&#x27;;
core.setOutput(&#x27;job-summary&#x27;, summary);

Property	Description	Values
core.setOutput()	Sets an output value for the current job	`job-summary`

Note: Job summaries are only available in GitHub Actions and cannot be used in other CI systems.

Warning: Job summaries are not supported in all GitHub Actions runners. Check compatibility before using.

Key Points

Job summaries are HTML content that can be displayed in the GitHub UI
Use core.setOutput() to set the summary content
Summaries are only visible in GitHub's web UI, not in logs or CLI

2. Using Markdown in Summaries

Example: Basic Markdown in Workflow Summary

name: "Example Workflow"
on:
  push:
    branches: [ main ]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: "Checkout Code"
        uses: actions/checkout@v4
      - name: "Build Project"
        run: |
          echo "Building project..."
          npm run build
      - name: "Update Summary"
        run: |
          echo "## Build Status" >> $GITHUB_STEP_SUMMARY
          echo "✅ Build completed successfully" >> $GITHUB_STEP_SUMMARY
          echo "" >> $GITHUB_STEP_SUMMARY
          echo "### Build Details" >> $GITHUB_STEP_SUMMARY
          echo "- Commit: ${{ github.sha }}" >> $GITHUB_STEP_SUMMARY
          echo "- Branch: ${{ github.ref_name }}" >> $GITHUB_STEP_SUMMARY

Markdown Feature	Description	Usage in Summary
Headers	Use #, ##, ### for headers	`## Build Status ### Details`
Bold & Italic	Use bold and italic	`✅ Build completed successfully`
Lists	Use - for unordered lists	`- Commit: ${{ github.sha }} - Branch: ${{ github.ref_name }}`
Code Blocks	Use ``` for code blocks	```bash npm run build ```
Links	Use [text](url) syntax	`[View Logs](https://example.com/logs)`
Tables	Use \| for tables	`\| Name \| Value \| \|------\|-------\| \| Status \| Success \|`

Note: The $GITHUB_STEP_SUMMARY file is written to after each step and can contain any valid markdown.

Warning: Markdown formatting is rendered in the GitHub UI but not in logs or console output.

3. Adding Tables to Summaries

Property	Description	Example
table	Defines a table in the summary	`table { header: ['Name', 'Value'], rows: [['Item1', 'Value1']] }`

Example: Creating a Table in Workflow Summary

const table = {
  header: ['Step', 'Status'],
  rows: [
    ['Setup', 'Success'],
    ['Build', 'Success'],
    ['Test', 'Failed']
  ]
};

console.log(table);

4. Adding Images to Summaries

Example: Embedding Image in Workflow Summary

name: Workflow Summary with Image
on:
  push:
    branches: [ main ]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Code
        uses: actions/checkout@v4
      - name: Generate Image
        run: |
          echo "Generating image..."
          mkdir -p images
          echo '<svg width="100" height="100"><circle cx="50" cy="50" r="40" fill="red"/></svg>' > images/sample.svg
      - name: Upload Image
        uses: actions/upload-artifact@v4
        with:
          name: image-artifact
          path: images/
      - name: Post Summary
        run: |
          echo "## Workflow Summary" >> $GITHUB_STEP_SUMMARY
          echo "![](./images/sample.svg)" >> $GITHUB_STEP_SUMMARY

Property	Description	Usage
GITHUB_STEP_SUMMARY	File path to write workflow summary content	Write markdown content here to appear in the workflow summary
Image Markdown Syntax	Standard markdown image syntax	`![](path/to/image)`

Note: Images must be uploaded as artifacts or embedded in the repository to be displayed in workflow summaries.

5. Adding Code Blocks to Summaries

Example: Using `echo` to Add Code Blocks

echo "::group::Build Summary"
echo "Build started at: $(date)"
echo "Commit: ${{ github.sha }}"
echo "::endgroup::"

Command	Description	Usage
::group::	Starts a collapsible group in the workflow summary	Used to organize related steps or logs under a collapsible section
::endgroup::	Ends a collapsible group in the workflow summary	Marks the end of a grouped section

Note: The ::group:: and ::endgroup:: commands are only supported in GitHub Actions workflow summaries.

6. Adding Collapsible Sections

Example: Using HTML in Workflow Summary

name: Collapsible Sections Example
on:
  push:
    branches: [ main ]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
      - name: Add collapsible section
        run: |
          echo "## Collapsible Section" >> $GITHUB_STEP_SUMMARY
          echo "<details>" >> $GITHUB_STEP_SUMMARY
          echo "  <summary>Click to expand</summary>" >> $GITHUB_STEP_SUMMARY
          echo "  This is hidden content." >> $GITHUB_STEP_SUMMARY
          echo "</details>" >> $GITHUB_STEP_SUMMARY

Element	Description	Usage
<details>	Defines a collapsible section	Wrap content to make it collapsible
<summary>	Defines the visible header of the collapsible	Must be direct child of <details>

Note: The <details> and <summary> HTML elements are supported in GitHub Actions workflow summaries.

7. Adding Links to Summaries

Property	Value	Description
summary.link	`string`	URL to link the summary to
summary.text	`string`	Text to display for the link

Example: Adding a Link to Summary

name: Workflow Summary
on:
  push:
    branches:
      - main
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
      - name: Build project
        run: |
          echo "Building project..."
      - name: Summary with Link
        uses: actions/github-script@v7
        with:
          script: |
            const link = 'https://example.com/docs';
            const text = 'View documentation';
            core.summary.addLink({ text, link });
            core.summary.write();

8. Formatting with Emojis

Emoji	Description	Usage in Workflow
✅	Check mark symbol	`echo "Job completed successfully :white_check_mark:"`
❌	Cross mark symbol	`echo "Job failed :x:"`
⚠️	Warning symbol	`echo "Potential issue :warning:"`
🚀	Rocket ship symbol	`echo "Deployment started :rocket:"`
📝	Page with pencil symbol	`echo "Documentation updated :memo:"`
🔍	Mag glass symbol	`echo "Code review initiated :mag:"`
🧪	Test tube symbol	`echo "Running tests :test_tube:"`
📦	Package symbol	`echo "Dependencies installed :package:"`

Example: Using Emojis in Job Logs

name: "Build and Test"
on:
  push:
    branches: [ main ]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: "Checkout code"
        uses: actions/checkout@v4
      - name: "Install dependencies"
        run: |
          echo "Installing dependencies :package:"
          npm install
      - name: "Run tests"
        run: |
          echo "Running tests :test_tube:"
          npm test
      - name: "Build project"
        run: |
          echo "Building project :rocket:"
          npm run build

9. Appending Multiple Summaries

Example: Appending Multiple Summaries

name: Append Multiple Summaries
on:
  push:
    branches: [ main ]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
      - name: Install Dependencies
        run: npm install
      - name: Run Tests
        run: npm test
      - name: Append Summary
        uses: actions/github-script@v7
        with:
          script: |
            const summary1 = `## Test Results\n- Passed: 10\n- Failed: 2`;
            const summary2 = `## Performance Metrics\n- Avg. Response Time: 150ms\n- Max. Concurrent Requests: 500`;
            const combinedSummary = `${summary1}\n\n${summary2}`;
            await github.rest.actions.createWorkflowDispatch({
              owner: context.repo.owner,
              repo: context.repo.repo,
              workflow_id: 'workflow-summary.yml',
              inputs: {
                summary: combinedSummary
              }
            });

Property	Description	Values
summary	Content to append to the workflow summary	`string`

Note: The summary input can be a multi-line string, and it will be appended to any existing workflow summary.

10. Using Summary Actions

Action	Description	Parameters	Notes
summary	Writes content to the workflow summary	`text` (required), `file` (optional)	Supports markdown formatting
summary.add	Adds content to the workflow summary	`text` (required), `file` (optional)	Appends to existing summary content

Example: Writing a Summary

name: Write Summary
on:
  workflow_run:
    workflows: [Build]
jobs:
  write-summary:
    runs-on: ubuntu-latest
    steps:
      - name: Write Summary
        uses: actions/github-script@v6
        with:
          script: |
            const summary = `## Build Summary
- Status: Success
- Duration: 2m 30s`;
            github.rest.actions.createWorkflowSummary({
              owner: context.repo.owner,
              repo: context.repo.repo,
              workflow_id: context.workflow_run.id,
              summary: summary
            });

Note: The summary action is available in GitHub Actions runtime and supports markdown formatting.

Warning: Summary actions are not supported in all GitHub environments (e.g., self-hosted runners).

11. Generating Test Result Summaries

Example: Publishing Test Results

name: Test
on: [push]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Run tests
        run: |
          npm install
          npm test
      - name: Publish Test Results
        uses: EnricoMi/publish-unit-test-result-action@v2
        with:
          files: "test-results.xml"

Property	Description	Default
files	Path to test result files (e.g., JUnit XML, NUnit XML)	Required
fail_on_error	Fail the job if test results cannot be parsed	`false`
include_passed	Include passed tests in the summary	`false`

Note: Supported formats include JUnit, NUnit, XUnit, and CTest.

Warning: Ensure test result files are generated and available in the workspace before publishing.

Key Features

Publishes test results to GitHub UI
Supports multiple XML formats
Integrates with GitHub's UI for easy test result viewing

12. Creating Build Status Summaries

Example: Basic Build Status Summary

name: Build Status Summary
on:
  push:
    branches: [ main ]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Code
        uses: actions/checkout@v4
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
      - name: Install Dependencies
        run: npm ci
      - name: Run Tests
        run: npm test
      - name: Create Summary
        uses: actions/github-script@v7
        with:
          script: |
            const summary = `Build successful for commit ${process.env.GITHUB_SHA}`;
            await github.rest.actions.createWorkflowSummary({
              owner: context.repo.owner,
              repo: context.repo.repo,
              workflow_id: context.workflow_id,
              summary: summary
            });

Property	Description	Values
summary	Build summary text to display	`string`
workflow_id	ID of the workflow to associate summary with	`number`
owner	Repository owner (username or organization)	`string`
repo	Repository name	`string`

Note: The createWorkflowSummary API endpoint is available in GitHub Actions v7+.

Warning: Build summaries are only visible in the GitHub UI and do not affect job execution.