Tabs
Four tabs, one of them disabled. Only the selected panel is in the DOM as visible content.
Testing is checking that software behaves the way the business expects, and finding where it does not.
Software testing grew into a separate discipline as systems became too large for developers to verify alone.
Use testing to reduce risk before release, and automation to repeat the checks cheaply.
Practice tasks
- Assert the first tab is selected on load and its panel is visible.
- Click the second tab and assert its panel is visible while the first is hidden.
- Assert the
aria-selectedattribute moves with the selection. - Assert the fourth tab is disabled and clicking it changes nothing.
- Count how many panels exist versus how many are visible.
Sample automation code
Assert.assertTrue(driver.findElement(By.id("panel-what")).isDisplayed());
driver.findElement(By.id("tab-origin")).click();
Assert.assertTrue(driver.findElement(By.id("panel-origin")).isDisplayed());
Assert.assertFalse(driver.findElement(By.id("panel-what")).isDisplayed());
Assert.assertFalse(driver.findElement(By.id("tab-more")).isEnabled());
await page.getByTestId('tab-origin').click();
await expect(page.getByTestId('panel-origin')).toBeVisible();
await expect(page.getByTestId('panel-what')).toBeHidden();
await expect(page.getByTestId('tab-more')).toBeDisabled();