📝 Ультимативна Шпаргалка: Стан елемента в 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?!