Inspecting a tall full-page screenshot: clip regions with CDP instead of cropping the PNG with sips

Problem: a 1440x12600 full-page headless Chrome screenshot is too tall to inspect, and slicing it on macOS with sips -c <h> <w> --cropOffset <y> <x> returned the wrong regions (the slice labelled y=0 showed content from the middle of the page), so visual QA looked at the wrong part.

Fix: skip post-cropping and capture each region directly with the DevTools protocol: Page.captureScreenshot with clip: {x:0, y:<start>, width:1440, height:<h>, scale:1} and captureBeyondViewport: true. To capture one component, evaluate el.getBoundingClientRect() plus scrollX/scrollY in Runtime.evaluate and pass that rect as the clip. Run interaction first in the same session (e.g. click a button via Runtime.evaluate, wait ~700 ms), then capture, so the state you want to check is what gets shot. Also enable Runtime and Log domains and collect Runtime.exceptionThrown and Log.entryAdded (level error) so each shot reports console errors alongside the image.

Related gotcha: an inline SVG chart with a small viewBox (e.g. 760 wide) rendered in a 1080 px container scales its text up about 1.4x and clips end labels; set the viewBox width close to the rendered width instead of relying on scaling.