feat(web-components): switch e2e test harness to @microsoft/fast-test-harness

[radium-v]

Previous Behavior

The web-components package maintained its own Playwright test harness inline, including a custom FASTFixture class, custom assertions, a dedicated Vite config, and manual Vite build/serve orchestration in the e2e script.

New Behavior

The test harness has been replaced by @microsoft/fast-test-harness, a shared package that provides the Playwright fixture, assertions, Vite config, and web server management out of the box. The in-repo harness code (test/harness/, test/playwright/assertions.ts, test/playwright/fast-fixture.ts) is removed and test/playwright/index.ts re-exports from the new package. Playwright and Vite configs now extend the shared defaults, and scripts/e2e.js is simplified to token generation + playwright test.

The generate-tokens script also now emits a public/fluent-tokens.css stylesheet so design token values are available as plain CSS custom properties at test time.

Next Steps

• Enable SSR testing using the harness's SSR support
• Add async component definitions needed for SSR hydration

[github-actions]

📊 Bundle size report

✅ No changes found

[github-actions]

Pull request demo site: URL

[Copilot]

Pull request overview

Migrates @fluentui/web-components from its custom Playwright harness to @microsoft/fast-test-harness, adds SSR/DSD-oriented entrypoints and generated assets, and updates the web-components test suite to run under the new infrastructure.

Changes:

• Replaced the package-local Playwright harness/config with FAST test-harness/Vite-based setup and SSR client/server entries.
• Added define-async.ts hydration entrypoints across many web components plus new tests for previously uncovered components.
• Updated many existing specs to the new fixture lifecycle and added generated-token CSS support for SSR fixtures.

Reviewed changes

Copilot reviewed 118 out of 120 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
yarn.lock	Locks new FAST SSR/test-harness dependencies
packages/web-components/test/vite.config.ts	Configures Vite test harness public assets
packages/web-components/test/ssr.html	Adds SSR HTML shell
packages/web-components/test/src/vite-env.d.ts	Adds Vite client typings
packages/web-components/test/src/main.ts	Switches CSR bootstrapping to glob-based registration
packages/web-components/test/src/entry-server.ts	Adds SSR renderer entry
packages/web-components/test/src/entry-client.ts	Adds hydration client entry
packages/web-components/test/playwright/index.ts	Removes old local Playwright harness
packages/web-components/test/playwright/fast-fixture.ts	Removes old custom fixture implementation
packages/web-components/test/playwright/assertions.ts	Removes old custom assertions
packages/web-components/test/index.html	Updates CSR harness HTML
packages/web-components/test/harness/vite.config.ts	Removes legacy harness config
packages/web-components/src/tree/tree.spec.ts	Migrates test import
packages/web-components/src/tree/define-async.ts	Adds async define entry
packages/web-components/src/tree-item/tree-item.template.ts	Removes slot binding from template root
packages/web-components/src/tree-item/tree-item.spec.ts	Migrates test import
packages/web-components/src/tree-item/tree-item.base.ts	Moves slot assignment to connectedCallback
packages/web-components/src/tree-item/define-async.ts	Adds async define entry
packages/web-components/src/tooltip/tooltip.spec.ts	Migrates tests and explicit setup
packages/web-components/src/tooltip/define-async.ts	Adds async define entry
packages/web-components/src/toggle-button/toggle-button.ts	Uses elementInternals guard
packages/web-components/src/toggle-button/toggle-button.spec.ts	Migrates tests and explicit setup
packages/web-components/src/toggle-button/define-async.ts	Adds async define entry
packages/web-components/src/theme/set-theme.spec.ts	Migrates test import
packages/web-components/src/textarea/textarea.spec.ts	Updates fixture usage and stability
packages/web-components/src/text/text.styles.ts	Removes duplicate style rule
packages/web-components/src/text/text.spec.ts	Migrates tests and default content
packages/web-components/src/text/define-async.ts	Adds async define entry
packages/web-components/src/text-input/text-input.spec.ts	Migrates tests and explicit setup
packages/web-components/src/text-input/define-async.ts	Adds async define entry
packages/web-components/src/tablist/tablist.spec.ts	Migrates tests and setup flow
packages/web-components/src/tablist/define-async.ts	Adds async define entry
packages/web-components/src/tab/tab.spec.ts	Migrates test import
packages/web-components/src/tab/define-async.ts	Adds async define entry
packages/web-components/src/switch/switch.spec.ts	Migrates tests and explicit setup
packages/web-components/src/switch/define-async.ts	Adds async define entry
packages/web-components/src/spinner/spinner.spec.ts	Switches repeated setup to updates
packages/web-components/src/spinner/define-async.ts	Adds async define entry
packages/web-components/src/slider/slider.spec.ts	Migrates tests and explicit setup
packages/web-components/src/slider/define-async.ts	Adds async define entry
packages/web-components/src/rating-display/rating-display.spec.ts	Migrates tests and explicit setup
packages/web-components/src/rating-display/define-async.ts	Adds async define entry
packages/web-components/src/radio/radio.spec.ts	Migrates test import
packages/web-components/src/radio/define-async.ts	Adds async define entry
packages/web-components/src/radio-group/radio-group.spec.ts	Migrates test import
packages/web-components/src/radio-group/define-async.ts	Adds async define entry
packages/web-components/src/progress-bar/progress-bar.spec.ts	Migrates tests and explicit setup
packages/web-components/src/progress-bar/define-async.ts	Adds async define entry
packages/web-components/src/option/option.spec.ts	Migrates test import
packages/web-components/src/option/define-async.ts	Adds async define entry
packages/web-components/src/message-bar/message-bar.spec.ts	Migrates tests and updateTemplate usage
packages/web-components/src/message-bar/define-async.ts	Adds async define entry
packages/web-components/src/menu/menu.spec.ts	Migrates tests and focus/contextmenu handling
packages/web-components/src/menu/define-async.ts	Adds async define entry
packages/web-components/src/menu-list/menu-list.template.ts	Removes slot binding from template root
packages/web-components/src/menu-list/menu-list.spec.ts	Migrates tests and explicit setup
packages/web-components/src/menu-list/menu-list.base.ts	Moves submenu slot assignment to connectedCallback
packages/web-components/src/menu-list/define-async.ts	Adds async define entry
packages/web-components/src/menu-item/menu-item.spec.ts	Adds new menu-item tests
packages/web-components/src/menu-item/define-async.ts	Adds async define entry
packages/web-components/src/menu-button/menu-button.styles.ts	Adds local style re-export
packages/web-components/src/menu-button/menu-button.spec.ts	Adds new menu-button test coverage
packages/web-components/src/menu-button/menu-button.definition.ts	Switches to local style module
packages/web-components/src/menu-button/index.ts	Reorders/extends exports
packages/web-components/src/menu-button/define-async.ts	Adds async define entry
packages/web-components/src/listbox/listbox.spec.ts	Migrates test import
packages/web-components/src/listbox/define-async.ts	Adds async define entry
packages/web-components/src/link/link.spec.ts	Migrates tests and updateTemplate usage
packages/web-components/src/link/define-async.ts	Adds async define entry
packages/web-components/src/label/label.spec.ts	Migrates tests and updateTemplate usage
packages/web-components/src/label/define-async.ts	Adds async define entry
packages/web-components/src/image/image.spec.ts	Migrates tests and fixture asset path
packages/web-components/src/image/define-async.ts	Adds async define entry
packages/web-components/src/field/field.spec.ts	Migrates test import
packages/web-components/src/field/define-async.ts	Adds async define entry with focus delegation
packages/web-components/src/dropdown/dropdown.spec.ts	Migrates tests and stabilizes form interactions
packages/web-components/src/dropdown/define-async.ts	Adds async define entry
packages/web-components/src/drawer/drawer.styles.ts	Removes redundant max-width
packages/web-components/src/drawer/drawer.spec.ts	Migrates tests and explicit nested body setup
packages/web-components/src/drawer/define-async.ts	Adds async define entry
packages/web-components/src/drawer-body/drawer-body.spec.ts	Adds new drawer-body tests
packages/web-components/src/drawer-body/define-async.ts	Adds async define entry
packages/web-components/src/divider/divider.spec.ts	Migrates tests and adds slot-content case
packages/web-components/src/divider/define-async.ts	Adds async define entry
packages/web-components/src/dialog/dialog.spec.ts	Migrates tests and explicit setup
packages/web-components/src/dialog/define-async.ts	Adds async define entry
packages/web-components/src/dialog-body/dialog-body.styles.ts	Fixes stylesheet block structure
packages/web-components/src/dialog-body/dialog-body.spec.ts	Adds new dialog-body tests
packages/web-components/src/dialog-body/define-async.ts	Adds async define entry
packages/web-components/src/counter-badge/define-async.ts	Adds async define entry
packages/web-components/src/counter-badge/counter-badge.spec.ts	Migrates tests and updateTemplate usage
packages/web-components/src/compound-button/define-async.ts	Adds async define entry
packages/web-components/src/compound-button/compound-button.template.ts	Aligns template root with button
packages/web-components/src/compound-button/compound-button.spec.ts	Adds broad compound-button coverage
packages/web-components/src/checkbox/define-async.ts	Adds async define entry
packages/web-components/src/checkbox/checkbox.spec.ts	Migrates tests and setup details
packages/web-components/src/checkbox/checkbox.base.ts	Uses elementInternals guard
packages/web-components/src/button/define-async.ts	Adds async define entry
packages/web-components/src/button/button.spec.ts	Migrates tests and SSR autofocus skip
packages/web-components/src/badge/define-async.ts	Adds async define entry
packages/web-components/src/badge/badge.spec.ts	Refactors repeated attribute tests
packages/web-components/src/avatar/define-async.ts	Adds async define entry
packages/web-components/src/avatar/avatar.spec.ts	Migrates tests and splits step-based cases
packages/web-components/src/anchor-button/define-async.ts	Adds async define entry
packages/web-components/src/anchor-button/anchor-button.spec.ts	Adjusts navigation assertions for harness
packages/web-components/src/accordion/define-async.ts	Adds async define entry
packages/web-components/src/accordion/accordion.spec.ts	Migrates tests and avoids dependent WC in one case
packages/web-components/src/accordion-item/define-async.ts	Adds async define entry
packages/web-components/src/accordion-item/accordion-item.spec.ts	Updates waitFor dependency
packages/web-components/scripts/generate-tokens.js	Generates TS tokens and CSS token stylesheet
packages/web-components/scripts/e2e.js	Removes legacy e2e wrapper
packages/web-components/rollup.config.js	Sets rollup context
packages/web-components/playwright.config.ts	Switches to FAST test-harness Playwright config
packages/web-components/package.json	Adds SSR build steps/exports and updates scripts
packages/web-components/.gitignore	Ignores generated token CSS
packages/charts/chart-web-components/package.json	Removes unused FAST dependency
package.json	Adds root FAST SSR/test-harness deps
change/@fluentui-web-components-9e4886ef-09cc-426e-a4bf-b570d204e14b.json	Adds web-components change file
change/@fluentui-chart-web-components-8ab5a04f-bd00-487d-a7d5-0cd8b395e1bb.json	Adds chart package housekeeping change file
apps/vr-tests-web-components/package.json	Removes unused FAST dependency

[Copilot]

Pull request overview

Copilot reviewed 118 out of 120 changed files in this pull request and generated 7 comments.

All feedback has been resolved and additional changes for the generate-tokens script will be addressed in a follow-up PR.