Skip to main content

Package Guide

Let the scaffolder pick for you

The fastest way to get exactly the right packages is create atomic-testing — it detects your framework, runner, and design system and installs the matching packages for you. This page is for hand-picking packages yourself or understanding what the scaffolder would choose; the Framework and Runner Support matrix lists which combinations are verified vs. experimental.

Every setup needs three things: a framework/runner package (the createTestEngine for your environment), the core package, and at least one component-driver package (the vocabulary for the components you interact with). Pick one from each group below.

Choose your packages​

You have…Install this framework package
React 19@atomic-testing/react-19
React 18@atomic-testing/react-18
React 17@atomic-testing/react-legacy
Vue 3@atomic-testing/vue-3
Angular 20 / 21 / 22@atomic-testing/angular-20, -21, or -22 (match your Angular major)
Any framework, in the browser@atomic-testing/playwright (E2E) — pairs with any of the above

Then add the driver package for your UI library from Component driver libraries below. If you don't use a design system, @atomic-testing/component-driver-html covers standard HTML elements and works with any framework.

DOM vs. E2E is a runner choice, not an either/or: the framework packages run fast jsdom tests (Jest/Vitest), and @atomic-testing/playwright runs the same scene against a real browser. Most projects start with DOM tests and add Playwright for critical user journeys — the tutorial shows one scene reused across both.

For the exact install commands per framework (including peer dependencies), see Manual Installation; to have it done for you, run create atomic-testing.

Framework & runner notes​

react-19, react-18, and react-legacy (React 17) share an identical API — only the peer React version differs. On React 17, plan to upgrade: it's supported for gradual migration, not new work.

Component driver libraries​

Each driver package covers one UI library. Where a library ships several supported majors — Material UI (component-driver-mui-v6, -v7, -v9, plus the MUI-X equivalents) and Angular Material (component-driver-angular-material-v20, -v21, -v22) — each major gets its own package, because each major's DOM differs enough that a driver written against one won't reliably match another. The driver set itself (names, methods) is consistent across those majors. In practice: install and read the section matching the major you have, and skip the rest.

Each entry notes its framework binding and support tier — verified (a green fixture proves it in this repo) or experimental (composed best-effort, no proving fixture yet). See the generated API reference for the full class and method list of any package.

Material UI​

React · verified. Match the package major to the MUI Core major you have installed.

pnpm add @atomic-testing/component-driver-mui-v9

The full v7 driver set plus RadioGroup, Table, and Tooltip drivers. (MUI Core has no v8; v9 succeeds v7.)

MUI X​

React · verified. Drivers for the MUI X data components (Data Grid and friends), shipped separately from MUI Core because their DOM is its own surface. Match the package major to your @mui/x-* major.

pnpm add @atomic-testing/component-driver-mui-x-v9

Covers MUI X Data Grid components. Unlike MUI Core, MUI X does ship a v8 driver.

Radix UI​

React · verified.

pnpm add @atomic-testing/component-driver-radix-v1

Radix UI primitives (radix-ui v1) — the headless, unstyled React components many design systems build on. See the Radix / shadcn coverage matrix.

shadcn/ui​

React · verified.

pnpm add @atomic-testing/component-driver-shadcn-v1

A re-export of the Radix UI v1 drivers, since shadcn/ui is built on Radix primitives.

Astryx​

React · verified.

pnpm add @atomic-testing/component-driver-astryx

The Astryx design system (@astryxdesign/core). See the Astryx coverage matrix.

PrimeVue​

Vue 3 · verified.

pnpm add @atomic-testing/component-driver-primevue-v4

PrimeVue 4 components (Button, Select, DataTable, Dialog, and more).

Angular Material​

Angular · experimental. Match the package major to your Angular Material major; these run under Vitest browser mode (see the support matrix).

pnpm add @atomic-testing/component-driver-angular-material-v22

Covers Angular Material components (Autocomplete, Select, Dialog, Menu, and more).

HTML​

React & Vue 3 · verified; Angular · experimental.

pnpm add @atomic-testing/component-driver-html

Standard HTML elements (button, input, select, and so on). The right choice for custom components, HTML-based UI libraries, or when you need basic element interaction — and the safe default when no driver package exists for your design system.

Tips​

  • Start with HTML drivers and DOM tests — they're faster to run and debug, and work with any components. Add a design-system driver package when you need library-specific behavior.
  • Mix driver packages freely — HTML and MUI drivers can coexist in one scene.
  • Add Playwright gradually — reuse the same scenes you already wrote for DOM tests against critical user journeys.
  • Upgrade drivers incrementally — moving from -v6 to -v7 drivers is one import change, not a test rewrite.

Build your first test

Now that you know which packages to install, build a complete test end to end.

Start Tutorial →