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.

List

Manual Testing
Selenium
Playwright
API Testing

Grid

Practice tasks

Click one list item and assert it gets the selected class.
Ctrl/Cmd click a second item and assert both are selected.
Click a third item without Ctrl and assert only that one stays selected.
Select three grid cells and assert the output lists exactly those numbers.
Click a selected item again and assert it is deselected.

Sample automation code

WebElement item = driver.findElement(By.cssSelector("#selectable-list li:nth-child(2)"));
item.click();
Assert.assertTrue(item.getAttribute("class").contains("selected"));

new Actions(driver).keyDown(Keys.CONTROL)
    .click(driver.findElement(By.cssSelector("#selectable-list li:nth-child(3)")))
    .keyUp(Keys.CONTROL).perform();
Assert.assertEquals(driver.findElements(By.cssSelector("#selectable-list li.selected")).size(), 2);

await page.getByTestId('sel-selenium').click();
await expect(page.getByTestId('sel-selenium')).toHaveClass(/selected/);

await page.getByTestId('sel-playwright').click({ modifiers: ['ControlOrMeta'] });
await expect(page.locator('#selectable-list li.selected')).toHaveCount(2);