[Feature]: Improve grouping in HTML report #38870

🚀 Feature Request

The HTML report should visibly group its tests in the same way that (for example) the JSON report does: by file-based suite, then by test.describe-based suite, then by test, then by project.

Example

Tests would be written the same way they currently are; the HTML report would simply show the same structure that the test authors chose in their use of test.describe. This could be done with subheadings and/or descendant elements on the front page of the report, or it could be done by making the user click into each test.describe group to see more details.

Motivation

The HTML report groups all tests based on the file in which they occur, and nothing else. Tests in different test.describe groups and in different browser projects appear intermixed with each other, which makes it hard to quickly understand exactly which pieces failed:

I've seen it suggested to use test.step to keep similar subtests together; however, a failed step prevents the test from going on to other steps, and a request to add test.step.soft() was closed. I thought about adding a new request for test.step.soft(), but in fact the root problem is with the HTML reporter, since the JSON report groups everything nicely.