Модуль 6 · Урок 21
HTML semantics, source і live DOM
HTML передає structure і meaning, а browser будує з нього DOM tree, яке JavaScript може змінювати після load. QA порівнює source, parsed DOM та live state, не роблячи висновок зі скриншота.
Три шари одного екрана
«View Source» не показує client-inserted cards, а Elements не доводить, що node був у початковій відповіді. Фіксуйте, який шар ви перевіряли.
Element, attribute і property
Element node має tag, attributes, text/child nodes і DOM properties. Attribute відображає markup state, property — поточний object state; для form controls `value` attribute може лишатися default, тоді як `input.value` змінюється під час typing. Test oracle має називати правильний шар.
| Перевірка | Приклад | Ризик плутанини |
|---|---|---|
| Attribute | getAttribute('disabled') | Presence/markup state. |
| Property | button.disabled | Current boolean state. |
| Text | textContent | Може включати visually hidden text. |
| Rendered visibility | Computed style + geometry | Node може бути в DOM, але не displayed. |
Semantics створюють testable contract
Використовуйте native `header`, `nav`, `main`, headings, lists, buttons, links і form controls за призначенням. `div` із click handler не автоматично отримує keyboard behavior, focusability чи button semantics. QA перевіряє role, accessible name, state та interaction — глибше це буде в модулі accessibility.
Вигляд не визначає element
Синій текст може бути button, link або non-interactive span. Очікування залежить від user task: link переходить, button виконує action.
Selectors і динамічне tree
querySelector повертає перший match, querySelectorAll — static NodeList на момент виклику. Надмірно крихкі selectors з позиціями або generated classes роблять tests нестабільними. Для automation потрібні стабільні semantics/labels або погоджені test IDs.
Практика
У `dom-inventory.csv` порівняйте source, parsed/live DOM і trigger; у `semantic-structure.csv` зафіксуйте landmarks, headings, real controls та names.
Офіційні джерела
Закріпіть матеріал уроку
Три сценарні питання. Для зарахування уроку потрібно дати щонайменше дві правильні відповіді.