skills.rest
Luqman-Ud-Din
Luqman-Ud-DinCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

qa-test-dragdrop

Detect broken drag-and-drop reordering in interactive interfaces.

Updated May 22, 2026
Search Tags:#browser testing#drag and drop#console errors#ui validation#reordering#interactive testing
One-click install
npx skills add https://github.com/Luqman-Ud-Din/blackbox-qa-agent --skill qa-test-dragdrop
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: qa-test-dragdrop
Source: https://github.com/Luqman-Ud-Din/blackbox-qa-agent/tree/main/skills/qa-test-dragdrop
Command: npx skills add https://github.com/Luqman-Ud-Din/blackbox-qa-agent --skill qa-test-dragdrop

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill checks whether draggable lists and reorderable interfaces actually respond to user drag actions, helping catch broken interactions before they reach production.

Core Features & Use Cases

  • Interactive drag validation: Detects draggable items, tags them, performs a real pointer-based drag, and verifies that the order changed.
  • HTML5 fallback support: Falls back to synthetic DragEvent dispatch when native pointer drag alone does not trigger a reorder.
  • Runtime stability checks: Collects browser console errors during the interaction to surface JavaScript failures tied to drag behavior.
  • Use Case: Use this Skill when testing sortable lists, kanban cards, or any UI where users must reorder items by dragging.

Quick Start

Ask the agent to test the page’s drag-and-drop list and report whether dragging the first item to a later position successfully reorders it.

Frequently Asked Questions about qa-test-dragdrop

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I test drag and drop reordering on a web page?▼

Testing drag and drop reordering requires probing the browser, executing pointer-based drags on target items, and verifying the DOM order changes. This skill automates these steps to confirm sortable lists and kanban boards reorder correctly.

What is the best way to verify kanban board drag interactions?▼

Verifying kanban board drag interactions involves detecting draggable cards, performing real pointer drags, and checking if the visual order updates. This skill automates that process and also inspects the browser console for JavaScript errors during the interaction.

Why does my sortable list fail to reorder when dragged?▼

Sortable lists can fail to reorder due to broken JavaScript event listeners or unsupported pointer events. This skill identifies the issue by attempting native pointer drags and falling back to synthetic HTML5 DragEvent dispatch to isolate the interaction failure.

Does this approach support HTML5 DragEvent fallback for testing?▼

Yes, HTML5 DragEvent fallback is supported. When native pointer drag actions alone do not trigger a reorder in the UI, the skill automatically falls back to dispatching synthetic DragEvents to complete the drag-and-drop interaction test.

Can I check for browser console errors during drag and drop testing?▼

Checking for browser console errors during drag and drop testing is supported. The skill captures runtime console output during the drag execution to surface any JavaScript failures tied to the drag behavior.

Related Skills

Explore More Software Engineering Skills→
cfardevcfardev

dnd-kit

Implement drag-and-drop and sortable interfaces in React/Next.js with @dnd-kit.

Community
Intermediate
fieldspherefieldsphere
37

browser-automation-tests

Automate browser UI flows and capture screenshots, console logs, and network data as evidence.

Official
Intermediate
MiguelAngelLHMiguelAngelLH

agent-browser

Automate web UI interactions and capture visual screenshots.

Community
Advanced
MadAppGangMadAppGang
7

debug-ui

Capture screenshots and inspect DOM state to diagnose UI layout issues.

Official
Intermediate