Sortable

Reorder a list by dragging. Checking the order after the drag is the real exercise here.

Drag the items to reorder them.

One
Two
Three
Four
Five

Practice tasks

Read the starting order of the list and store it.
Drag One below Three and assert the new order.
Assert the order shown in the output matches the DOM order.
Click Reset and assert the original order is back.
Drag the last item to the first position and assert it moved.

Sample automation code

Actions actions = new Actions(driver);
WebElement first = driver.findElement(By.cssSelector("#sortable-list li:nth-child(1)"));
WebElement third = driver.findElement(By.cssSelector("#sortable-list li:nth-child(3)"));
actions.clickAndHold(first).moveToElement(third).release().perform();

List<WebElement> items = driver.findElements(By.cssSelector("#sortable-list li"));
Assert.assertEquals(items.get(0).getText(), "Two");

const first = page.locator('#sortable-list li').first();
const third = page.locator('#sortable-list li').nth(2);
await first.dragTo(third);
await expect(page.locator('#sortable-list li').first()).toHaveText('Two');