Dynamic Properties

Elements that change after a few seconds. This is where Thread.sleep fails and explicit waits win.

Reload the page to restart all the timers.

Practice tasks

Wait for the first button to become enabled with an explicit wait, then click it.
Wait until the second button's colour changes and assert the new CSS colour value.
Wait for the third button to become visible and assert it is displayed.
Wait for the text to load and assert its content – without using a fixed sleep.

Sample automation code

WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));

WebElement enabled = wait.until(ExpectedConditions.elementToBeClickable(By.id("enable-after")));
enabled.click();

wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("visible-after")));
wait.until(ExpectedConditions.textToBePresentInElementLocated(
        By.id("load-text"), "loaded after"));

await expect(page.getByTestId('enable-after')).toBeEnabled({ timeout: 10000 });
await page.getByTestId('enable-after').click();

await expect(page.getByTestId('visible-after')).toBeVisible({ timeout: 10000 });
await expect(page.getByTestId('load-text')).toContainText('loaded after');