CAPTCHA: Slide to Verify

Drag the handle onto a server-graded target with manual mouse offset math

What you will learn

Use manual mouse.down/move/up with a computed pixel offset where dragTo() falls short
Verify the final handle position with boundingBox() against the target tolerance
Let the server grade the landing position — the target lives in a signed token

Slide to Verify

A self-hosted slide-to-verify captcha — drag the handle onto the target marker; the server grades the landing position within a tolerance

On mount the page fetches a fresh challenge from GET /api/captcha/challenge?type=slider&mode=practice. The response carries a signed token plus a display of { target, tolerance } (target is a percentage 35–85).

Your goal: drag #captcha-slider-handle until it sits over the target notch, then submit. The server recomputes the answer from the token and returns verdict: human when you land within tolerance.

Drag the Handle

Align the handle with the target marker, then verify

mode: practicehandle: 0%

Loading challenge…

Testing Tips

Automation hints

✓ The target % is not hidden — read it from the challenge response display.target or from the #captcha-slider-targetmarker's inline left style
✓ locator.dragTo() is awkward here (no drop target) — drive the mouse manually: take boundingBox() of #captcha-slider-handle and #captcha-slider-track, compute targetX = trackBox.x + trackBox.width * target/100
✓ Then mouse.move(handleCenterX, y) → mouse.down() → mouse.move(targetX, y, { steps: 10 }) → mouse.up(); stepped moves fire realistic pointermove events
✓ Submit posts answer: String(Math.round(handlePercent)) and the server grades within ±5 — land near the target, an exact pixel is not required
✓ Verify position via #captcha-slider-handle's aria-valuenow, then assert #captcha-result[data-verdict=human] — not just any success text

Related Challenges

Slide to Verify

A self-hosted slide-to-verify captcha — drag the handle onto the target marker; the server grades the landing position within a tolerance

Testing Tips

Automation hints

✓ The target % is not hidden — read it from the challenge response display.target or from the #captcha-slider-targetmarker's inline left style
✓ locator.dragTo() is awkward here (no drop target) — drive the mouse manually: take boundingBox() of #captcha-slider-handle and #captcha-slider-track, compute targetX = trackBox.x + trackBox.width * target/100
✓ Then mouse.move(handleCenterX, y) → mouse.down() → mouse.move(targetX, y, { steps: 10 }) → mouse.up(); stepped moves fire realistic pointermove events
✓ Submit posts answer: String(Math.round(handlePercent)) and the server grades within ±5 — land near the target, an exact pixel is not required
✓ Verify position via #captcha-slider-handle's aria-valuenow, then assert #captcha-result[data-verdict=human] — not just any success text

CAPTCHA: Slide to Verify

What you will learn

Slide to Verify

Drag the Handle

Testing Tips

Timer

Need Help?

Related Challenges

iFrames

Shadow DOM

Drag & Drop

CAPTCHA: Slide to Verify

What you will learn

Slide to Verify

Drag the Handle

Testing Tips

Timer

Need Help?

Related Challenges

iFrames

Shadow DOM

Drag & Drop