feat(html): order by duration #37864

Skn0tt · 2025-10-15T11:41:26Z

Adds an o:duration filter that allows seeing the slowest tests quickly:

Part of #37724.

Add ability to sort test results in the HTML reporter using query syntax: - `o:duration` sorts by duration ascending - `!o:duration` sorts by duration descending - Supports multiple sort criteria for priority sorting 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>

- Remove unnecessary Sets and spread operations - Push directly onto filter arrays - Move tokenize call into for loop header - Replace continue statements with if/else chain 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>

Change sortTests to return void and mutate the array in place instead of creating a copy. This is more efficient and clearer. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>

Update sorting test to include multiple files to verify that sorting works across all tests globally, not just within each file. This test currently fails, exposing the bug that sorting is only applied per-file rather than across all tests. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>

When sorting is active, group all tests into a single anonymous group to maintain the global sort order. File/describe grouping would break the sorting since tests would be displayed grouped by file. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>

Replace toHaveText assertions with toMatchAriaSnapshot for more comprehensive testing that verifies the entire UI structure. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>

Reduce snapshot verbosity by only checking buttons, regions, and test links - the parts we actually care about for sorting verification. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>

Replace page.locator('body') with page.getByRole('main') to more precisely target the test content area. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>

Skn0tt · 2025-10-15T11:41:41Z

packages/html-reporter/src/filter.ts


  static parse(expression: string): Filter {
-    const tokens = Filter.tokenize(expression);
-    const project = new Set<FilterToken>();


the sets got useless through #35390.

dgozman · 2025-10-15T11:51:09Z

packages/html-reporter/src/reportView.tsx

    result.tests.push(...tests);
  }
+
+  if (filter.sort.length) {


Let's do a separate createSortedNoFilesModel() method, because it completely disregards whatever the two existing methods do.

dgozman · 2025-10-15T11:51:58Z

packages/html-reporter/src/filter.ts

+    tests.sort((a, b) => {
+      for (const sortToken of this.sort) {
+        let comparison = 0;
+        if (sortToken.name === 'duration')


While we are here, let's support more sort properties right away?

dgozman · 2025-10-15T11:52:55Z

packages/html-reporter/src/filter.ts

+        if (comparison !== 0)
+          return sortToken.not ? -comparison : comparison;
+      }
+      return 0;


Let's fall back to some default sorting in this case, to make it deterministic.

Javascript's sorting is stable, doesn't that make it deterministic? https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#sort_stability

I mean it's synchronous, so it's most likely deterministic even if it wasn't stable. So deterministic isn't what you're asking for. Keeping the existing order sounds fine by me though.

Add support for sorting tests by duration in the HTML reporter using the query syntax: - `o:duration` - sort by duration, slowest tests first - `!o:duration` - sort by duration, fastest tests first When sorting is active, file grouping is disabled and all tests are displayed in a single list sorted according to the specified criteria. The implementation supports multiple sort criteria for priority sorting. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>

Extend sorting to support multiple fields beyond duration: - `o:title` - sort by test title alphabetically - `o:status` - sort by test status (expected/failed/flaky/skipped) - `o:file` - sort by file path - `o:line` - sort by line number - `o:project` - sort by project name All fields support the `!` prefix for reversed sorting. Multiple sort criteria can be combined for priority sorting (e.g., `o:file o:line`). Reuses `cacheSearchValues` for status, file, and project fields to improve performance. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>

- Rename test to "should support sorting" to reflect broader coverage - Add tests for o:title (alphabetical sorting) - Add tests for o:file (file path sorting) - Increase timeout values to multiples of 100ms to prevent flakiness 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>

pavelfeldman · 2025-10-15T23:00:37Z

How do you order files in that case? Ah, you seem to be merging everything. Curious how it looks for this link: https://mspwblobreport.z1.web.core.windows.net/run-18531305882-1-63d41d2ae75a0e8e26993dce9d827ed0608dcfee/index.html

Skn0tt · 2025-10-16T10:44:52Z

There you go: https://playwright-html-ordering.netlify.app/#?q=o:duration It loads quite a while, as it's sorting 47k rows.

dgozman · 2025-10-16T11:52:39Z

There you go: https://playwright-html-ordering.netlify.app/#?q=o:duration It loads quite a while, as it's sorting 47k rows.

This is unusable. We should think about some type of grouping, so that you never expand 47k tests to end up with 800k DOM nodes on the page.

Skn0tt · 2025-10-16T12:46:46Z

Some options that come to mind:

arbitrarily group every 1000 items. solves the performance problem, and when ordering you're unlikely to scroll blow result nr. 1000 anyways
full-blown virtualized list implementation, so we don't have to group

I know which one I prefer.

Skn0tt · 2025-10-16T14:23:38Z

I updated it to show chunks of a 100, how do you like it?

github-actions · 2025-10-16T14:59:16Z

Test results for "MCP"

2570 passed, 108 skipped

Merge workflow run.

github-actions · 2025-10-16T15:22:31Z

Test results for "tests 1"

3 flaky

⚠️ [firefox-library] › library/inspector/cli-codegen-1.spec.ts:1079 › cli codegen › should not throw csp directive violation errors `@firefox-ubuntu-22.04-node18`
⚠️ [firefox-page] › page/page-event-request.spec.ts:182 › should return response body when Cross-Origin-Opener-Policy is set `@firefox-ubuntu-22.04-node18`
⚠️ [playwright-test] › ui-mode-test-output.spec.ts:80 › should show console messages for test `@ubuntu-latest-node24-1`

47089 passed, 815 skipped

Merge workflow run.

pavelfeldman · 2025-10-20T19:55:27Z

Do we land it or do we shelve it?

Skn0tt · 2025-10-21T07:11:47Z

This particular one goes to the shelf, but there'll be other!

Skn0tt and others added 10 commits October 15, 2025 13:06

refactor(test): use getByRole('main') for narrower scope

d29bb82

Replace page.locator('body') with page.getByRole('main') to more precisely target the test content area. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>

flip ordering

709eaeb

annot, not tag

737a175

Skn0tt requested a review from dgozman October 15, 2025 11:41

Skn0tt self-assigned this Oct 15, 2025

Skn0tt commented Oct 15, 2025

View reviewed changes

move sort into clause

f7b68f2

dgozman reviewed Oct 15, 2025

View reviewed changes

This comment has been minimized.

Sign in to view

Skn0tt and others added 5 commits October 15, 2025 15:17

add default sorting

f487e6f

ensure text is only used as last resort

4f6b6e9

This comment has been minimized.

Sign in to view

Skn0tt requested a review from dgozman October 16, 2025 10:49

chunk by 100

0b5e259

Skn0tt closed this Oct 21, 2025

feat(html): order by duration #37864

feat(html): order by duration #37864

Uh oh!

Conversation

Skn0tt commented Oct 15, 2025

Uh oh!

Skn0tt Oct 15, 2025

Choose a reason for hiding this comment

Uh oh!

dgozman Oct 15, 2025

Choose a reason for hiding this comment

Uh oh!

dgozman Oct 15, 2025

Choose a reason for hiding this comment

Uh oh!

dgozman Oct 15, 2025

Choose a reason for hiding this comment

Uh oh!

Skn0tt Oct 15, 2025

Choose a reason for hiding this comment

Uh oh!

Skn0tt Oct 15, 2025

Choose a reason for hiding this comment

Uh oh!

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

pavelfeldman commented Oct 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Skn0tt commented Oct 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dgozman commented Oct 16, 2025

Uh oh!

Skn0tt commented Oct 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Skn0tt commented Oct 16, 2025

Uh oh!

github-actions bot commented Oct 16, 2025

Test results for "MCP"

Uh oh!

github-actions bot commented Oct 16, 2025

Test results for "tests 1"

Uh oh!

pavelfeldman commented Oct 20, 2025

Uh oh!

Skn0tt commented Oct 21, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

pavelfeldman commented Oct 15, 2025 •

edited

Loading

Skn0tt commented Oct 16, 2025 •

edited

Loading

Skn0tt commented Oct 16, 2025 •

edited

Loading