The problem
A visual test photographs the page and compares pixels. It is great at a shifted button or a wrong color, and blind to everything behind the render. The product page looks perfect while the pricing API quietly returns a 500 and the UI falls back to a stale price, the console fills with a third party script throwing, and the add to cart event the growth team depends on never reaches the network. The screenshot is green. The page is broken. You hear it from a customer.
The idea
A screenshot is a photo of a house. It tells you the paint looks good and nothing about the wiring, the plumbing or the gas. This is the inspector who opens the walls.
What you will catch
- A 5xx hiding behind a spinner or a cached fallback
- A JavaScript error that never breaks the visible UI
- A key request, like an analytics event, that silently never fired
How it works
Same background capture, different question. Instead of do the pixels match, you ask did the right requests succeed, did the console stay quiet, did the event I care about actually go out on the wire.
Run it now
kane-cli --tui
# then paste this objective:
Go to https://www.scrapingcourse.com/ecommerce/, open a product and add it to the cart.
Assert: no network request returned a 5xx status.
Assert: there are no console errors.
Assert: a request was made to add the item to the cart.Or one line, for CI or sharing
kane-cli run "Go to https://www.scrapingcourse.com/ecommerce/, open a product and add it to the cart.
Assert: no network request returned a 5xx status.
Assert: there are no console errors.
Assert: a request was made to add the item to the cart." --agentWhat prints
Example run. Your numbers will vary by site, build and run. The PASS / FAIL and the zeros are the stable result, the raw timings and counts are illustrative.
▶ open product + add to cart ok ▶ assert no 5xx 0 of 217 requests ✓ PASS ▶ assert no console errors 0 errors ✓ PASS ▶ assert cart request made 1 request ✓ PASS RESULT PASS exit 0 ~2m ~20 to 40 credits
Adapt it to your app
Go to <your page> and complete <the action>.
Assert: no network request returned a 5xx status.
Assert: there are no console errors.
Assert: a request was made to "<the endpoint you depend on>".Why it works
The assertions run against the captured network and console, not the render, so they see the silent failures a visual diff structurally cannot. Console capture is top frame only, so it focuses on your app rather than third party iframes.
What it unlocks
Run it beside your existing visual test. The visual test guards the pixels, this guards the plumbing. Together they catch the bugs either one alone would miss.
