Testing What Users Actually See with Vitest and Chromatic

Chromatic is launching an early-access Vitest plugin that adds visual testing to existing Vitest Browser Mode test suites with no required changes to test files. By registering the plugin in the Vitest config, each test's rendered output is captured and uploaded to Chromatic's cloud, where stable snapshots are taken, diffs computed, and results reported as PR checks. This approach catches UI regressions — layout, spacing, fonts, breakpoints — that traditional logic-based assertions miss. Compared to Vitest's built-in visual testing, Chromatic offers cloud-based stable rendering, branch-aware baselines, flake reduction via SteadySnap, parallel snapshotting, and inspectable DOM reproductions. The beta is private and targets teams already using or migrating to Vitest Browser Mode with Playwright.

Nguồn: https://tympanus.net/codrops/2026/06/24/testing-what-users-actually-see-with-vitest-and-chromatic. 8sync News chỉ tóm tắt và dẫn link; bản quyền nội dung thuộc tác giả và nguồn gốc.

Đề xuất cho bạn

ITNEXT013 phút13 giờ trước

Using a behaviour index to help AI coding agents explore your code

A 'behaviour index' is a Markdown file (BEHAVIOR.md) auto-generated from test names and file locations that helps AI coding agents and humans navigate a codebase. Instead of searching raw code lines (expensive in tokens) or file paths (low information density), agents search the behaviour index to quickly understand what a concept means in the app and where its implementation lives. The post compares token costs across three search strategies using the Codex CLI repo, shows how to generate the index via test reporters or regex scripts, and covers limitations like weak test suites, parameterised test names, and agents that ignore custom search instructions. Optimisation tips include embedding code symbols in test names and maintaining separate AI and human versions of the index.

#testing#ai-agents