Sortable Lists
Practice drag and drop the way real apps build it: native HTML5 drag events, a press-and-hold sortable list and a Kanban board.
1. HTML5 Drag and Drop
Challenge Tasks (1)
Tick a task when your script passes it. Tasks with a pass/fail box tick themselves.
- Step 3
- Step 1
- Step 5
- Step 2
- Step 4
2. Press-and-Hold Sortable
Challenge Tasks (1)
Tick a task when your script passes it. Tasks with a pass/fail box tick themselves.
- C
- A
- E
- B
- D
3. Kanban Board
Challenge Tasks (1)
Tick a task when your script passes it. Tasks with a pass/fail box tick themselves.
To Do
In Progress
Done
4. Solutions
Try the challenges yourself first. Reference solutions are hidden until you ask for them.
About this Sortable Lists page
A sortable list is a UI where items are reordered by dragging, and it is hard to automate because implementations differ. Native HTML5 lists fire dragstart and drop events, while many libraries use mouse or pointer events and long presses. This page has an HTML5 list, a press-and-hold list and a Kanban board so you can match the technique to each.
Frequently asked questions
Why does Selenium drag and drop not work on HTML5 lists?
Native HTML5 drag relies on dragstart, dragover and drop events with a DataTransfer object, which synthetic mouse actions often do not trigger in some drivers. Try Actions clickAndHold with several small moveByOffset steps, or dispatch the drag events with JavaScript.
How do you test drag and drop in Playwright?
Use source.dragTo(target) for most cases. If the page needs intermediate events, use page.mouse.move, page.mouse.down, a second page.mouse.move with steps set above 1, and page.mouse.up. Then assert the new order by reading the list item texts.
How do you test a press-and-hold sortable list?
Move the mouse to the item, press down, wait longer than the hold delay, then move in steps to the target and release. In Playwright that is mouse.down, waitForTimeout, mouse.move with steps, mouse.up. Replace fixed waits with an assertion once the item is lifted.
How do you assert the order after reordering items?
Collect the text of all list items and compare the array with the expected order. Playwright: expect(items).toHaveText([...]). Selenium: map findElements to getText and use assertEquals. Do not assert on pixel positions, which vary by viewport.
How do you automate a Kanban board drag?
Locate the card and the target column, drag the card into the column area, and assert the card is now a child of that column's container. Cards often move only when dropped over a specific zone, so aim at the column body, not its header.
Free developer tools on Randomly.online
QA Playground is part of Randomly.online. These tools help while you write and debug tests: