Component Check

Added

• A shared baseline for CI. The new snapshotPath setting (env COMPONENT_CHECK_SNAPSHOT_PATH) and --snapshot-path option on snapshot, test and watch keep snapshots in a folder of your choice — commit it, and CI compares every pull request against it. See “A shared baseline” in the README for a GitHub Actions job.
• Snapshots record the browser and OS that took them. When test or watch compares in another environment, it says so, so that rendering differences are not taken for your change.

Changed

• snapshot --reset deletes only the files an earlier snapshot wrote, not the whole folder — it may be a folder in your repository.

Fixed

• watch with Component Map installed re-checks only the blocks a saved template affects again. Component Map got no file names (Yii read the path as the value of --json), so every save fell back to checking everything.
• When Component Map cannot answer, watch shows its error message instead of the whole command line.

Fixed

• test --changed, --since and watch no longer test everything because of files that never reach the browser. Docs, dotfiles (.ddev/, .github/, .env), composer.json/.lock, package.json and other lockfiles, and config/project/ are listed as ignored instead; CSS, JS, PHP and anything in web/ still test every component. A local setup with an uncommitted composer.lock used to make every --changed run a full one.

First release.

Added

• component-check/discover: every Matrix block on every live page, grouped by component, with the representative pages that would be tested and the block types that have no content anywhere.
• Sampling by variant (section, page type, site, filled-in fields, option values): as few pages as possible, every variant covered.
• component-check/test: Playwright runs on desktop (1440×900) and mobile (390×844). Page checks: HTTP status, uncaught JS errors, failed scripts and stylesheets, sideways scrolling. Component checks (with markers): rendered, has a size, fits the viewport, images load.
• Screenshots of the failing component and a Playwright trace for every failure.
• --json output and stable exit codes (0 passed, 1 regressions, 2 could not run) for CI and coding agents.
• component-check/doctor: checks mode, Node, Playwright, Chromium, output directory, site reachability and marker usage.
• Twig markers — craft.componentCheck.start(block) / end() and craft.componentCheck.attributes(block) — rendered only for signed test requests.
• component-check/snapshot and before/after comparison in test: per block and viewport, geometry and computed style are recorded and compared, and changes are reported in words (“h1: width 334→1200px, now cut off by 235px”), with before/after screenshots. Blocks whose content was edited after the snapshot are not compared. Snapshots are local (storage/component-check/snapshot).
• component-check/watch: snapshots the components once, keeps a browser open and re-checks them on every save, printing what changed and what got fixed since the previous save. Keys: r run, s new snapshot, q quit. Polls for changes (watchPaths, watchIgnore, watchInterval), so it works across the DDEV mount.
• With Component Map installed: test --changed (uncommitted changes) and test --since=<branch> test only the blocks rendered through the changed templates — everything when CSS, JS or PHP changed — and watch re-checks only the blocks a saved file affects.
• php craft component-check lists the commands and the current mode.
• Layout heuristics — sideways scrolling, overflow, text cut off by overflow: hidden — are warnings, not failures: they cannot know what the design intends. A change against a snapshot fails instead.
• Modes off / readonly / full, following allowAdminChanges unless set explicitly (COMPONENT_CHECK_MODE).