Skip to main content

Browser Support Matrix

OGrid ships two React UI packages (Radix and Fluent), and not every browser check needs to run on every push. The browser contract is split into two layers:

  • bun run test:e2e:smoke is the fast merge gate that runs on every push and pull request in the main CI workflow.
  • The Playwright Matrix GitHub workflow runs the broader browser suite across both React example apps only when you dispatch it manually.

Main CI smoke suite​

The merge gate is intentionally small. It covers the minimum set of user journeys that should fail the build immediately if they break:

bun run test:e2e:smoke

Projects in the smoke gate:

  • react-radix
  • react-fluent

Journeys covered by the smoke suite:

  • Grid renders with the shared demo columns and first page of rows
  • Sorting changes the visible row order
  • Text filtering narrows results and clearing the filter restores the page
  • Inline editing commits a new value

This suite is the merge gate because it covers the shared spreadsheet contract through four different rendering stacks without turning every push into a full browser matrix run.

Full Playwright matrix​

The manual browser workflow runs the main browser suite against every example app:

npm run test:e2e:matrix
PackagePlaywright projectExample portMain CI smokeFull matrix
@alaarab/ogrid-react-fluentreact-fluent3001YesYes
@alaarab/ogrid-react-radixreact-radix3003YesYes

Playwright serves each example as a production build (vite build then vite preview, via npm run serve:e2e:react-fluent / serve:e2e:react-radix). Under the Vite dev server the Fluent example loads every @fluentui/react-icons icon as one ~17 MB pre-bundled module per test, which made Fluent cases slow and flaky. A dev server you already have running on the port is reused instead, and the examples import the packages' built dist, so rebuild changed packages before a run.

Docs homepage coverage​

The docs homepage is verified separately because it runs against the built Docusaurus site under the /ogrid/ base path:

npm run test:e2e:docs

That check currently runs in the Deploy Docs workflow after bun run docs:build.

Interpreting failures​

  • A smoke suite failure is a release-blocking regression for the shared grid contract.
  • A full-matrix failure means one wrapper or example app diverged from the documented behavior and should be audited before the next release.
  • A docs homepage failure means the public site or deployment assumptions changed.