page-as-data
What it gives you
| You want to know… | A screenshot | page-as-data |
|---|---|---|
| What is on the screen? | You read it off the picture | Headings, text, open dialogs, alerts, tables as rows, form fields with values and errors, buttons and whether they are disabled |
| Did something break? | Invisible | Uncaught exceptions, console.error, failed requests (4xx, 5xx), broken images |
| Where did my button go? | "It is not there" | button "New product" is cut off (0% visible) by div.app-plate, and nothing scrolls to it |
| Is this element visible? | Guess | Visible or not, and why: display: none on div.panel, cut off, zero size |
| Is the text readable? | Guess from compressed pixels | Exact colours and the WCAG contrast ratio, including oklch() colours and gradients |
| Does it work on a phone? | One picture per width | Page wider than the screen, cut-off controls, sticky headers that cannot stick, touch targets under 24×24px |
| Has the page finished loading? | A half-loaded picture looks like a bug | Waits for router requests, React streaming, skeletons and animations, and says why when it gives up |