Resizable

Drag the corner handle to resize the box. One box can be any size, the other has minimum and maximum limits.

Free size

Drag the bottom-right corner

With limits (min 200×120, max 500×320)

This box cannot go below 200×120 or above 500×320

Practice tasks

Read the starting width and height of the first box.
Drag the handle 120 px right and 80 px down, then assert the new size.
Shrink the limited box as far as you can and assert it stops at 200×120.
Enlarge it as far as you can and assert it stops at 500×320.
Assert the size output updates during the drag.

Sample automation code

WebElement handle = driver.findElement(By.id("handle-free"));
new Actions(driver).dragAndDropBy(handle, 120, 80).perform();

WebElement box = driver.findElement(By.id("resizable-free"));
Assert.assertTrue(box.getSize().getWidth() > 380);

const handle = page.getByTestId('handle-free');
const h = await handle.boundingBox();
await page.mouse.move(h.x + h.width / 2, h.y + h.height / 2);
await page.mouse.down();
await page.mouse.move(h.x + 120, h.y + 80, { steps: 10 });
await page.mouse.up();
await expect(page.getByTestId('resize-output')).toContainText('resizable-free');