feat(qa): 4-layer automated component testing framework

[TimofeyZhivenok]

What this adds

A complete automated QA framework for @miozu/jera components, living in qa/.

How it works

The runner uses Playwright to open each component in Storybook and runs 4 test layers:

• Layer 1 — Accessibility: axe-core + canvas pixel sampling for oklch contrast (catches what axe marks as "incomplete")
• Layer 2 — Keyboard interaction + 5 dynamic ARIA checks (aria-expanded, aria-live, focus-trap, aria-describedby, tab-order)
• Layer 3 — Props edge cases: empty string, long text, special chars, numeric zero, whitespace
• Layer 4 — Responsive: 375px, 768px, 1440px viewports

Every component is tested across all variants in both light and dark mode.

Testing architecture

The runner uses Storybook as its test environment — the same approach used by Chromatic, Percy, and standard Playwright component testing. In CI, Storybook spins up at localhost:6006 before the runner starts. Locally, it uses the live Storybook URL. The runner never imports Svelte components directly — Playwright opens Storybook pages in Chromium. Storybook startup time in CI is approximately 30–60 seconds for 67 components.

Results from initial sweep (65 components)

Metric	Value
Components tested	65
Clean	39
Failed	26
S1 violations	9
S2 violations	71
S3 violations	16
Specs generated	81

Top failing components

Component	S1	S2	S3
Dropzone	5	—	—
Input	—	7	—
Badge	—	6	—
Dropdown	1	6	—
Modal	—	5	—
Button	—	5	—
CodeBlock	—	3	4

Root cause: 4 design tokens account for ~76% of contrast violations.

Workflow

Running locally:

# Default (uses admin.selify.ai custom docs)
node qa/component-suite-runner.js

# Standard Storybook mode
STORYBOOK_MODE=storybook STORYBOOK_URL=http://localhost:6006 node qa/component-suite-runner.js --ci

In CI: Suite runs automatically, findings committed to qa-reports branch.

Roles

The framework handles detection automatically — finding violations, generating JSON findings, and producing Playwright regression specs. Bug analysis, classification (S1–S4), and structured bug reports are handled by Tim (QA) based on the JSON output. This separation keeps the framework focused and the QA process collaborative.

Environments

Default (Selify):
Uses admin.selify.ai custom component docs with .preview-area and .controls-panel selectors.

Standard Storybook:
Set STORYBOOK_MODE=storybook — selectors based on Storybook v7/v8 docs view. Please run against your local instance and open an issue if any selectors need adjusting.

Output

• qa/reports/ — JSON findings (gitignored locally, committed to qa-reports branch in CI)
• qa/specs/ — auto-generated Playwright regression specs (gitignored)
• qa/screenshots/ — failure screenshots (gitignored)

Stage filtering

Only stable and beta components are tested. draft and deprecated are skipped. Stage metadata lives in qa/components.json.