Reading the map
tmp/ezu/index.html is one static page that reads ezu-data.js beside it. Open it from disk; it needs no server. The example map is this site's.
After reading this page, you will know what each part of the viewer means.
Pages
Every GET route the app has, minus excluded ones, grouped by area:
- Mapped: a flow landed on this route, so it has states and screenshots.
- Fragment: only ever fetched in the background, such as a Turbo Frame. The viewer lists the states it was loaded into.
- Not yet mapped: a route no flow has reached. It may still work; nobody has written a flow for it.
- Unreachable: declared with
unreachable … because:in the config, such as a page behind a feature flag that is off. A flow that reaches one fails the run.
States
Each mapped page shows its states as tiles:
- Main: the one state marked
main: true, which represents the page. - Variant: another state of the same page, such as an empty list or a form with errors.
- Overlay: a state with a dialog or popover open. Its screenshot is the viewport, not the full page.
Opening a state shows its screenshots. Switch screen size, theme and language from there.
Changes
Each state is compared with the approved screenshots, or with the previous run when nothing is approved yet:
- New: not in the baseline.
- Changed: a screenshot differs. The viewer shows before, after, and a diff with the moved pixels in pink.
- Same: every screenshot matches.
- Gone: in the baseline, but no flow reaches it any more.
Flows
Each flow is a strip of its steps in order, with the action (via) that led to each. A flow can scroll sideways or show every step on rows.
Issues
An uncaught JavaScript error on a step, a page whose screenshots never settled, or a message from walk.flag is noted on the step as an issue. Issues don't fail the run; a broken response or a missing element does.