📝 Ультимативна Шпаргалка: Стан елемента в DOM (Visible vs Attached)

Привіт, екіпаж! Скільки разів ви ловили помилку Element is not visible, хоча в DevTools його чітко видно в HTML-коді? Сьогодні розбираємо життєвий цикл елемента на сторінці. Це база, без якої ваші асерти (перевірки) завжди будуть нестабільними. ☕️

У сучасних інструментах (Playwright, Cypress) елемент перед кліком проходить 4 стадії зрілості. Знати їх — обов'язок QA.👻 Attached (Прикріплений)

Елемент фізично існує в DOM-дереві.Пастка: Він може бути повністю прозорим (opacity: 0), мати display: none або нульовий розмір (0x0). Ви бачите його код у DevTools, але юзер на екрані його не бачить.(В Angular це зазвичай відбувається при використанні [hidden]="true").

👁Visible (Видимий)

Елемент прикріплений (Attached), має реальні розміри (bounding box не нульовий) і не захований стилями.Пастка: Він видимий, але може бути перекритий іншим елементом зверху (наприклад, напівпрозорим лоадером або невидимим тултипом).

🟢Enabled (Активний)

Елемент видимий, не перекритий, і на ньому немає атрибута disabled. Тільки на цій стадії з ним можна взаємодіяти.

🛑 Stable (Стабільний)

Елемент повністю завершив свою CSS-анімацію. Він більше не летить через половину екрану. Якщо фреймворк спробує клікнути до цієї стадії — він просто клікне в порожнечу.
Золоте правило перевірок (Asserts):

Тестуючи зникнення елемента, завжди питайте розробників, ЯК він зникає. Якщо використовується умовний рендеринг (наприклад, новий синтаксис @if або старий *ngIf в Angular) — елемент ПОВНІСТЮ видаляється з DOM. Перевіряємо так:await expect(locator).toHaveCount(0) або toBeAttached({ attached: false }).
Якщо ж елемент просто ховається через CSS — він залишається Attached, але перестає бути Visible. Перевіряємо так:await expect(locator).toBeHidden(). А ви плутали Attached і Visible?

👇🔥 — Знаю цю базу, мої тести надійні як швейцарський годинник!

👀 — Постійно ліплю .toBeVisible() на все підряд і страждаю...

🤯 — Чекайте, тобто елемент може бути в DOM, але не бути Visible?!