Interactions
Drag and drop, sortable, selectable, resizable and droppable.
Draggable
Drag a box around. One box moves freely, one is locked to the horizontal axis and one stays inside its container. Built with mouse events, so Actions and page.mouse both work.
Droppable
Drag the source onto the target. One target accepts anything, one only accepts the box marked <em>acceptable</em>, and one sends the item back if you drop it in the wrong place.
Sortable
Reorder a list by dragging. Checking the order after the drag is the real exercise here.
Selectable
Click items to select them, Ctrl/Cmd click to select several. There is a list and a grid – the grid is the harder one to assert on.
Resizable
Drag the corner handle to resize the box. One box can be any size, the other has minimum and maximum limits.
Every control has an id and a test id that never change between builds.
Each page lists the assertions worth writing, including the cases people forget.
Compare your script with a working Selenium (Java) and Playwright (TypeScript) version.