Skip to content

HTML Report: Add category/tag filter pills to toolbar #5486

Description

@thomhurst

Summary

The HTML report toolbar currently only filters by test status (All / Passed / Failed / Skipped / Cancelled). Tests already carry categories and customProperties in the report data model (ReportTestResult.Categories and ReportTestResult.CustomProperties), but there's no way to filter by them without using the freetext search box.

Adding dedicated category/tag filter controls would let users slice test results by their own taxonomy — e.g. [Integration], [Smoke], [Database], [UI] — without needing to know exact search strings.

Proposed Behavior

  • On report load, the JS scans all tests and collects the distinct set of categories (and optionally custom property keys/values).
  • If any categories exist, render a secondary filter row (or a dropdown/popover) below the existing status pills, showing each category as a toggleable chip.
  • Clicking a category chip filters the visible tests to only those tagged with that category. Multiple categories can be selected (AND or OR — OR is probably more intuitive).
  • The active category filter(s) are persisted in the URL hash alongside the existing filter, sort, search, and group parameters (e.g. #category=Integration,Smoke).
  • The filter summary text (filterSummary) updates to reflect the active category filter.
  • If no tests have categories, no extra UI is shown — zero overhead for users who don't use them.

Why This Matters

In large test suites, users often want to answer questions like:

  • "Did all integration tests pass?"
  • "Show me just the smoke tests"
  • "Which database tests are slow?"

Today this requires typing into the search box and hoping the category name appears in the concatenated search string. Dedicated filter pills make this a one-click operation and make the category taxonomy discoverable.

Implementation Notes

  • The data is already available: ReportTestResult.Categories is a string[]? populated from test metadata.
  • The JS matchesFilter() function would need an additional check against the selected categories.
  • Styling can follow the existing .pill pattern with a distinct visual treatment (e.g. indigo/purple tint to differentiate from status pills).
  • Consider a collapsible section or popover if there are many categories (>8), to avoid toolbar overflow.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions