Trace View Ecosystem Candidates

Date: 2026-04-12

Goal: find real ecosystem projects, preferably component libraries, that already use Vitest Browser Mode and can exercise the new browser.traceView workflow.

Search Method

Initial GitHub code search signals:

• @vitest/browser-playwright
• @vitest/browser-preview
• @vitest/browser-webdriverio
• vitest-browser-react
• vitest-browser-vue
• vitest/browser
• expect.element
• *.spec.browser.*

Dependency-only hits are noisy, especially lockfiles and package inventories. The useful follow-up was shallow-cloning promising repos into /tmp and grepping locally:

rg -n "vitest/browser|expect\\.element|@vitest/browser|vitest-browser|browser:\\s*\\{" .

Best Candidates

1. TinyMCE Oxide Components

Repo: https://github.com/tinymce/tinymce

Package: modules/oxide-components

Why it is strong:

• React component library for TinyMCE UI.
• Uses @vitest/browser, @vitest/browser-playwright, and vitest-browser-react.
• Has a dedicated browser Vitest project.
• Many interaction-heavy tests use vitest/browser, userEvent, custom browser commands, and expect.element.
• Good stress cases for trace steps: menus, context toolbars, keyboard navigation, dropdowns, drag/drop, textareas.

Local evidence from shallow clone:

• /tmp/vitest-trace-candidates/tinymce/modules/oxide-components/vitest.config.ts
• /tmp/vitest-trace-candidates/tinymce/modules/oxide-components/package.json
• Browser tests under:
  • modules/oxide-components/src/test/ts/browser/components/ContextToolbar.spec.tsx
  • modules/oxide-components/src/test/ts/browser/components/Dropdown.spec.tsx
  • modules/oxide-components/src/test/ts/browser/components/draggable/Draggable.spec.tsx
  • modules/oxide-components/src/test/ts/browser/components/AutoResizingTextarea.spec.tsx

Suggested first trial:

cd modules/oxide-components
vitest --browser.traceView src/test/ts/browser/components/ContextToolbar.spec.tsx

2. Vuetify

Repo: https://github.com/vuetifyjs/vuetify

Package: packages/vuetify

Why it is strong:

• Large Vue component library.
• Uses @vitest/browser-playwright.
• Has many .spec.browser.tsx tests with expect.element.
• Tests cover visual/layout-sensitive components: select, autocomplete, navigation drawer, app bar, dialog, slider, treeview, number input.
• Existing browser config has a separate browser project, browser.ui: false, and headless-by-default behavior, which is useful for testing pure UI/report workflows.

Local evidence from shallow clone:

• /tmp/vitest-trace-candidates-vuetify/packages/vuetify/vitest.config.ts
• /tmp/vitest-trace-candidates-vuetify/packages/vuetify/package.json
• Browser tests under:
  • packages/vuetify/src/components/VSelect/__tests__/VSelect.spec.browser.tsx
  • packages/vuetify/src/components/VNavigationDrawer/__tests__/VNavigationDrawer.spec.browser.tsx
  • packages/vuetify/src/components/VNumberInput/__tests__/VNumberInput.spec.browser.tsx
  • packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete.spec.browser.tsx

Suggested first trial:

cd packages/vuetify
pnpm test:browser --browser.traceView src/components/VSelect/__tests__/VSelect.spec.browser.tsx

Adjust command based on their project filter behavior if needed.

3. Portable Text Editor

Repo: https://github.com/portabletext/editor

Why it is strong:

• Rich text editor ecosystem, not just simple components.
• Uses @vitest/browser, @vitest/browser-playwright, and vitest-browser-react.
• Many Browser Mode tests around real text editing behavior: input, paste, selection, keyboard events, typeahead, emoji picker, markdown shortcuts, input rules.
• Strong candidate for validating whether trace view is actually useful for debugging complex interaction state.

Local evidence from shallow clone:

• /tmp/vitest-trace-candidates-portabletext/packages/editor/vitest.config.ts
• /tmp/vitest-trace-candidates-portabletext/packages/plugin-typeahead-picker/vitest.config.ts
• Tests under:
  • packages/editor/tests/event.input.test.tsx
  • packages/editor/tests/event.paste.test.tsx
  • packages/editor/tests/focus.test.tsx
  • packages/plugin-typeahead-picker/src/typeahead-picker.test.tsx
  • packages/plugin-input-rule/src/emoji-picker-rules.test.tsx

Suggested first trial:

pnpm --filter @portabletext/editor test:browser:chromium -- --browser.traceView

Their scripts route through Turbo, so verify exact package-level command before relying on this.

4. VueUse

Repo: https://github.com/vueuse/vueuse

Why it is useful:

• Uses @vitest/browser-playwright and vitest-browser-vue.
• Smaller, easier browser tests around DOM/composable behavior.
• Less visually rich than component libraries, but likely easier for smoke testing trace collection and HTML report generation.

Local evidence from shallow clone:

• /tmp/vitest-trace-candidates-vueuse/vitest.config.ts
• Browser tests under:
  • packages/core/onClickOutside/index.browser.test.ts
  • packages/core/useScroll/index.browser.test.ts
  • packages/core/useElementBounding/index.browser.test.ts
  • packages/core/useCssSupports/index.browser.test.ts

Suggested first trial:

pnpm test:browser --browser.traceView packages/core/onClickOutside/index.browser.test.ts

Secondary Candidates

React Spectrum

Repo: https://github.com/adobe/react-spectrum

Why it is possible:

• Major React component ecosystem.
• Has Browser Mode dependencies and vitest.browser.config.ts.
• Uses vitest-browser-react.

Why lower priority:

• Local grep found fewer direct Browser Mode tests than Vuetify/TinyMCE/Portable Text.
• More likely to require repo-specific setup.

Evidence:

• /tmp/vitest-trace-candidates-spectrum/vitest.browser.config.ts
• /tmp/vitest-trace-candidates-spectrum/packages/@react-spectrum/s2/test/DropZone.browser.test.tsx

Element Shared Components

Repo: https://github.com/element-hq/element-web

Package: packages/shared-components

Why it is possible:

• Real product component package.
• Has @vitest/browser-playwright and browser config.

Why lower priority:

• Local grep found thinner direct vitest/browser usage than the top candidates.

Evidence:

• /tmp/vitest-trace-candidates-element/packages/shared-components/vitest.config.ts
• /tmp/vitest-trace-candidates-element/packages/shared-components/src/resize/separator/SeparatorView.test.tsx

Probably Not A Fit

Carbon Components Svelte

Repo: https://github.com/carbon-design-system/carbon-components-svelte

Reason:

• Great component library, but current evidence points to regular Vitest plus Playwright E2E rather than Vitest Browser Mode tests.
• No strong vitest/browser usage found in quick inspection.

Recommended Trial Order

1. TinyMCE Oxide Components
2. Vuetify
3. Portable Text Editor
4. VueUse

Use TinyMCE first because it has a compact package boundary and interaction-heavy component tests. Use Vuetify to test scale and many component cases. Use Portable Text to test richer editor workflows where trace view should be most valuable. Use VueUse as a smaller smoke suite.

Trace View Trial Matrix

For each candidate, try to verify these workflows:

# local browser UI + trace viewer
<test command> --browser.traceView

# Vitest UI + headless browser driver
<test command> --browser.traceView --browser.headless --ui

# Vitest UI + separate headed browser driver
<test command> --browser.traceView --browser.headless=false --browser.ui=false --ui

# static HTML report
<test command> --browser.traceView --browser.headless --reporter=html

For usefulness, intentionally break one interaction or assertion and check whether the trace clearly explains the failure.