[Feature]: Improvements to filtering in HTML Test Reporter

[cpAdm]

🚀 Feature Request

Improvements/bug fixes that would make it easier to work with the test report:

1. The 'State filter' should be a button

   • Add aria-pressed for better accessibility
   • Clicking it should toggle this filter (currently it does not remove the filter)
   • Add background-color if active
     

2. Make the search easier to read

   • Color the special tokens in search, e.g. how GitHub does it:
     

3. ✅ Add extra space after any special token (so if input contains 's:passed', I won't have to press space to add another search token)

4. Full filter should be included in the URL (i.e. including any text filter)

   • This needs URL encoding

5. Keep my custom text filter when clicking status-filter/tag-label

6. ✅ Keep my query (expect current project filter) when clicking project filter

7. ✅ Ctrl + click should also work with project labels (and not open new tab)

8. Clicking 'All' should also work when have just a text filter (e.g. 'my test')

9. Prepend label tags with a '@' to distinguish them from project labels:
   

10. If you only have a label-filter, the filter count is not shown

11. It should be clear if a labels is an active filter (maybe by only showing border if active?)

12. ✅ Add aria-label to filter input

13. Color contrast of --color-fg-subtle and background in dark mode does not meet WCAG standards

14. Typing in input does not update URL (and thus state)

    • E.g. when manually removing a tag in the input, and then clicking on a status filter, will reintroduce that removed tag

15. ✅ Add placeholder "Search tests" to filter input

Example

No response

Motivation

The current behaviour of the filtering is a bit arbitrary at times. This feature request tries to address some of them including some UI improvements.

I would be willing to implement (part of) these improvements.

[dgozman]

@cpAdm Thank you for the issue. Please let us know which parts you would like to contribute, and we can discuss the behavior before you jump into making a PR.

[cpAdm]

@dgozman I can give all points a try (and descope when necessary). Some of them seem trivial (1, 9, 10, 12, 13, 15), others I think will require more work by just looking at the source code real quick.

So, what points/behavior would you like to see a PR for?

[dgozman]

Let's start with something like 3, 6 and 7? Once we iterate on a PR, it would be easier to align on other items and go from there.

[cpAdm]

@dgozman Could you give an example on how I can open a HTML report with HMR enabled for development?

This does not seem to work (Windows):
$env:HMR=1; npm run watch -> Opens http://localhost:44224/, but says 'couldnt find report, something with HMR is broken'
$env:HMR=1; npx playwright show-report packages\html-reporter\playwright-report -> Does not enable HMR

[dgozman]

@cpAdm See the section "Experimental dev mode with Hot Module Replacement" in this doc. Most likely, change HMR into PW_HMR 😄