> ## Documentation Index
> Fetch the complete documentation index at: https://docs.wpos.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# Verify
> The post-deploy gate: the structural matrix, interaction tests, the health doctor, and carry-css.
Verification is the half of the workflow agents historically reinvented per
session with hand-written Playwright. `eu-studio` packages it as one-call gates.
Never hand-write browser scripts for these.
Requirements: Playwright (`npm i playwright`, or set `EXJSX_IT_PLAYWRIGHT` to an
existing install's entry file).
## check: the entire gate in one call
```text theme={null}
usage: eu-studio check --pages /,/about/ [--widths 1200,1920,390] [--form /contact/] [--accordion /pricing/] [--burger /] [--nav /=about]
The ENTIRE post-deploy gate in one call and one browser session: structural matrix + interaction tests.
```
Running verify and clicktest separately costs three browser launches and two
model round-trips in the tail of every build; `check` shares a single Chromium
session. Real output against a production build:
```text theme={null}
✓ / @1200: sw=1200 h1=1
✓ / @1920: sw=1920 h1=1
✓ / @390: sw=390 h1=1
{"pass":true,"structural":{"pass":true,"results":[{"page":"/","width":1200,"ok":true,
"scrollWidth":1200,"h1":1,"height":8292,"offenders":[],"consoleErrors":[]},...]},
"interactions":{"pass":true,"results":[]}}
```
After a fix that touches one page, re-check only it
(`eu-studio check --pages /pricing/`); do not re-run the full matrix for a
single-page change.
### The structural matrix
Every page at every width (default `1200,1920,390`), scroll-settled and with
animations finished. Per combination it asserts:
* `scrollWidth` equals the viewport width, with overflow **offenders named** by
selector when it does not,
* exactly one `h1`,
* zero console page errors,
* and it reports body height.
Two **forensic probes fail the gate**. Both were added after a ten-site audit
where every defective site passed the basic checks:
* `empty-flex-slot`: a `space-between`/`around`/`evenly` row balancing against
an invisible child (the zero-width burger-wrapper signature). The geometry is
legal, but the page looks broken to a human. Intentional spacers
(`flex-grow > 0`) and `aria-hidden` separators with real width are exempt.
* `css-coverage`: every `c-*` class the DOM uses must be defined by some served
rule. A page can serve 200 with N stylesheets while its own post CSS or
carrier went stale; this probe catches the "748px z-stack while the gate
reports green" incident class. Runs once per page (width-independent).
Two probes **warn without failing** (some designs run legitimately narrow or
rotated):
* `min-content-collapse`: a squeezed column rendering one word per line never
overflows; the layout gave way instead of the content.
* `text-escapes-rotated-card`: text bleeding out of a transformed card never
trips `scrollWidth`; measured via text ink rectangles.
### Interaction tests
```text theme={null}
usage: eu-studio clicktest [--form /contact/] [--accordion /pricing/] [--burger /] [--nav /=about]
One call runs the standard interaction tests (no hand-written playwright needed):
--form fill visible inputs, submit, assert success (ajax success:true | success text | form hidden)
--accordion first : opens, body visible, closes back
--burger @390px: menu toggle reveals ≥2 links
--nav = click nav link whose text OR href pathname matches , assert navigation
```
The `--nav` matcher accepts either the link's visible text or its href pathname,
so `--nav /=about` passes whether the link says "About us" or points at
`/about/`. All four can be passed to `check` directly.
## verify: anchor deltas against a design
For pixel-faithful rebuilds with a reference design, `verify` measures where
your sections actually land:
```text theme={null}
usage: eu-studio verify --page-url --anchors anchors.json [--no-mobile] [--tolerance 2]
anchors.json shape:
{ "viewport": 1200, "totalHeight": 4081,
"anchors": [ { "name": "hero-h1", "selector": "h1", "y": 255 },
{ "name": "signup", "selector": "text=Get instant access", "y": 3660 } ],
"bands": [ { "name": "ticker", "y0": 930, "y1": 975, "minInkPx": 500 } ] }
```
* `selector` is a CSS selector or `text=`; `y` targets are
design-absolute px, pass/fail at `--tolerance` (default 2px).
* `bands` assert that a horizontal strip actually **paints** ink: DOM probes
cannot see paint, so black-ink assets on black sections pass every geometric
check while rendering invisible.
* Mobile: asserts `scrollWidth == 390` and names the overflowing elements.
## doctor: health checks plus self-heal
```bash theme={null}
eu-studio doctor [--page ] [--no-heal] [--json]
```
Checks, in order: `site` (frontend answers 200), `auth` (app-password REST auth
works), `seam` (companion plugin capabilities endpoint), `store` (every global
class a page references exists in the class store), `css` (every stylesheet the
page enqueues actually serves **as CSS**; a followed 200 that comes back
`text/html` is a redirected miss, not a healthy sheet). Real output:
```text theme={null}
✓ site: GET / -> 200
✓ auth: authenticated as admin
✓ seam: Elementor 4.2.1 + Pro 4.1.0, atomic on
✓ store: class store intact (123 classes, 2 page(s) checked)
✓ css:page-15: 5 stylesheet(s) serving
```
On a css failure, doctor heals: cache regen plus prime-css with retries, then a
re-check. On a **store** failure it can only detect, not invent: classes a page
references are gone from the store, and the fix is redeploying the bundle
(`exjsx deploy`), which doctor tells you. When styles look broken, run doctor
instead of hand-grepping page HTML; it names the failing stylesheets.
## carry-css: independence from a flaky file store
```text theme={null}
usage: eu-studio carry-css --page [--page ...]
Bakes each page's generated CSS into the page as an inline carrier : styling survives the flaky
Playground css file store. Idempotent.
```
A [playground](/ultra/playground)-specific last resort: if the WASM file store
keeps flaking after doctor heals, run carry-css once at the end of a build.
## Which tool when
| Situation | Tool |
| ------------------------------------- | ----------------------------------------------------------- |
| After every deploy | `check --pages ...` (plus interaction flags where relevant) |
| Rebuilding against a design reference | `verify --anchors`, then [pixeldiff](/ultra/measure) |
| Styles look broken | `doctor` |
| Playground css store keeps flaking | `carry-css`, once, at the end |