[Feature]: Add skipped tests to run report in UI

[andreaslarssen]

🚀 Feature Request

When running tests in the UI, you'll get a report on top telling you how many tests are passing:

In this case, it seems like 20% of my tests are failing when they're actually skipped.
Would be nice if that was communicated.

Example

One of the following would be nice:

Skipped tests not counted:

8/8 passed (100%)
2 skipped

Skipped tests statistics:

8/10 passed (80%)
2/10 skipped (20%)

If the last option, then maybe include failed tests?

1/10 failed (10%)
7/10 passed (70%)
2/10 skipped (20%)

Motivation

Better understanding of the test run

[pengooseDev]

@agg23
Hello, team :)
I'd like to get some direction regarding the implementation for this feature.

Option 1 - Minimal change (Only add skipped)

Following the request, the simplest implementation would be to add a light, small-font (12px) display of skipped tests next to the passed result.

Example

8/8 passed (100%) 2 skipped

Options 2 - Introduce Status Donut

Before writing this comment, I spent a few days considering how to provide the best possible UX within a limited space.

I came to the conclusion that visualizing test results—similar to Gihub Actions—could communicate information much more effectively.

However, there are a few challenges with this approach

Issue 1. Low Contrast in status colors

If we follow the current status icon color convention, the brightness and similarity of the colors make it difficult to clearly distinguish between segments.

Prev	Changed (Unclear)

Issue 2. Scalability in Larger Test Suites

This visualization works well in smaller projects where skipped or failed tests are more prominent. However, in larger projects where the majority of tests pass, the visualization makes it harder to notice skipped or failed cases.

Unclear 2

Looking forward to hearing the team's thoughts. Thank you.

[andreaslarssen]

I think that the donut is unnecessary, but the stats w/ colored icons is a nice visual. I do think you should somehow add the total of tests as well so you don't have to do the match yourself.

[agg23]

We discussed internally and we like the Cypress style icons and numbers, but not the donuts.

We would like to display something like VSCode does:

With a loading spinner and current count/total count, followed by your icons and numbers like in your screenshots.

[pengooseDev]

Thx for feedback. I'll create PR Soon

[pengooseDev]

Hi @andreaslarssen,

Thanks again for the great suggestion. I’ve already implemented most of the feature and found the difficulty to be quite manageable.
That said, in the spirit of sustainable open source, I’d love to propose an alternative approach.
If you're open to it, how about giving the implementation a try yourself?

If you could submit an initial version as a draft PR, I’d be happy to support you before the maintainers get involved. I can help with:

• identifying where to make changes in the codebase
• how to test the updated UI
• conventions to follow (e.g., reusing existing icons and colors)

I believe that shared contributions and positive experiences are what build long-term engagement and a healthy open source ecosystem. :)

What do you think? I’d be more than happy to support you either way. Feel free to reach out anytime!

[andreaslarssen]

@pengooseDev I could give it a go, but I would need some pointers. Can I reach you somewhere outside GitHub for some support?

[agg23]

As per #35859, we will not be making changes in this area at this time. Thank you pengooseDev for your great work.