.click(), Playwright ensures the element passes every check:
1. Attached: Element is present in the DOM.
2. Visible: Element has non-empty bounding box and no display: none / visibility: hidden.
3. Stable: CSS animations/transitions have finished moving.
4. Receives Events: Not obscured by modal backdrops or loading spinners.
5. Enabled: disabled attribute is false.---
page.waitForTimeout() (Hard Sleeps)// ❌ ANTI-PATTERN: Arbitrary sleep freezes execution and causes flakiness
await page.waitForTimeout(5000);// ✅ BEST PRACTICE: Wait for the exact network response or UI condition
const responsePromise = page.waitForResponse("**/api/checkout");
await page.getByRole("button", { name: "Place Order" }).click();
const response = await responsePromise;
expect(response.status()).toBe(200);
---
// Wait until DOM is loaded:
await page.waitForLoadState("domcontentloaded");// Wait until all initial network requests are quiet:
await page.waitForLoadState("networkidle");