Check Box

A folder tree with parent and child checkboxes. Selecting a parent selects its children, and a partly selected parent shows the indeterminate state.

Practice tasks

Select Desktop and assert that both of its children become checked.
Select only Notes and assert that Desktop is in the indeterminate state (isSelected() is false but the property indeterminate is true).
Select Home and assert that the result text lists all six items.
Uncheck one child and assert that Home is no longer fully checked.
Click Clear all and assert the result box is empty.

Sample automation code

driver.findElement(By.id("chk-desktop")).click();
Assert.assertTrue(driver.findElement(By.id("chk-notes")).isSelected());

String result = driver.findElement(By.id("result")).getText();
Assert.assertTrue(result.contains("Notes"));

WebElement home = driver.findElement(By.id("chk-home"));
boolean partial = (Boolean) ((JavascriptExecutor) driver)
        .executeScript("return arguments[0].indeterminate;", home);
Assert.assertTrue(partial);

await page.getByTestId('chk-desktop').check();
await expect(page.getByTestId('chk-notes')).toBeChecked();
await expect(page.getByTestId('result')).toContainText('Notes');

const partial = await page.getByTestId('chk-home')
  .evaluate(el => (el as HTMLInputElement).indeterminate);
expect(partial).toBe(true);