TestKase
TestKase
|Docs
Accessibility TestingReports

Element Inspection

Highlight, zoom, and copy-select the failing element in the captured page snapshot.

Each scanned URL saves an HTML snapshot at scan time. Clicking an issue in the report opens the issue detail drawer, and the snapshot loads at the top of that drawer automatically with the failing element highlighted — there is no separate view and no button to press.

What you get

  • Red outline around the failing element. TestKase re-runs the issue's CSS selector inside the snapshot, outlines whatever it matches, and scrolls it to the centre of the viewport. If the selector no longer matches — for example a snapshot that missed dynamically-rendered content — no outline is drawn.
  • Zoom in / Zoom out — 15% steps, from 15% up to 100%.
  • Fit — resets the zoom so the full 1920px-wide snapshot fits the panel width. It does not re-centre on the element.
  • Copy CSS Selector — one-click copy of the CSS path to clipboard, below the snapshot.

There is no panning: the snapshot pane is a fixed-height window, so use the zoom controls to move around. If a page has no snapshot you will see "No page snapshot was captured for this page. Re-run the scan to generate one."

Element inspection is creator-only. Loading a snapshot checks that you created the scan and answers "Scan not found" to anyone else — including members of a team the scan is shared with. A shared viewer gets the whole report except the snapshot, so they see the issue detail with no image and no red outline, and the same "no page snapshot was captured" message a genuinely missing snapshot produces. There is no way to grant snapshot access short of the recipient running their own scan.

Why a snapshot, not a live page

The snapshot freezes the exact DOM the scanner evaluated. That matters because:

  • Production pages change over time — the snapshot is what the score was computed against.
  • Snapshots are viewable without re-fetching or re-authenticating.
  • Snapshots are stored with the scan, so the highlight still works after the live page has changed. They are not embedded in the PDF export — the PDF is a summary only. See Export formats.

Interaction flow

  1. Click an issue in the issue list. The detail drawer opens with the snapshot at the top.
  2. The viewport centers on the failing element with a red outline.
  3. Zoom in if the element is small; press Fit to get back to the whole page.
  4. Use Copy CSS Selector to paste the path into your local DevTools if you want to jump to the same element on a live page.

Limitations

  • The snapshot captures the DOM at scan time only. It doesn't re-run JS or re-fetch assets.
  • The outline depends on the selector still matching inside the snapshot; if it doesn't, you get the snapshot with no highlight.
  • For bugs that only appear after interaction, use the Workflow Analyzer in the Chrome Toolkit, which captures a snapshot per page as you navigate the flow yourself.
  • Snapshots are deleted with the scan when it passes the retention window, so an old report can outlive nothing — the whole scan goes. Export what you need first. See Scan limits.
  • Capturing a snapshot can fail for a single page without failing the scan; that page's issues are still reported, they just have no snapshot.