HTML для тестувальників: DevTools, Accessibility, XPath

Аналітичний огляд курсу

Опис згенерований на основі програми курсу та відкритих даних.

Матеріал охоплює застосування HTML у тестуванні: робота з DevTools, перевірки Accessibility (a11y) та побудова стабільних XPath/CSS селекторів для надійної автоматизації і аналізу DOM.

Кому підійде / не підійде: HTML, DevTools, Accessibility, XPath для QA

Підійде

• QA інженерам (manual/automation), що працюють із DOM, селекторами та налагодженням у DevTools.
• Junior/Middle тестувальникам, яким потрібна база з семантики HTML та a11y-перевірок.
• Фахівцям, що створюють XPath/CSS селектори для стабільної автоматизації.
• Тим, хто досліджує помилки інтерфейсу через Chrome DevTools та Accessibility Tree.

Не підійде

• Тим, хто шукає вузько бекенд-тематику без роботи з HTML/DOM.
• Кому потрібна лише теорія без практики у DevTools та перевірок a11y.
• Тим, хто очікує фокус на маркетингових чи бізнесових аспектах замість технічних.

Проблема → результат: HTML, DevTools, Accessibility, XPath

• Нестабільні тести через крихкі селектори → застосування стратегії XPath/CSS з атрибутами, ролями та унікальними локаторами.
• Неможливо відтворити баг у верстці → використання DevTools (Device Emulation, Layout, Styles) для ізоляції станів.
• Неочевидна недоступність компонентів → аудит a11y (ARIA ролі, фокус, контраст) через Accessibility pane та Lighthouse.
• Плутанина з XPath осі та функціями → перевірені патерни побудови шляхів і перевірка у консольних інструментах.
• Зміни DOM під час взаємодії → спостереження за подіями і мутаціями через DevTools та логування.

Порівняння з альтернативами: CSS vs XPath, DevTools vs розширення

• CSS селектори для простих кейсів, XPath для складних структур і залежностей у DOM.
• Вбудовані DevTools замість сторонніх плагінів для точнішої діагностики і аналізу продуктивності.
• Accessibility Tree та ARIA-ролі проти лише візуальних перевірок.
• Ручний аналіз HTML/DOM замість повної залежності від recorder-інструментів.

Очікувані результати від проходження: HTML, a11y, DevTools, XPath

• Розуміння семантики HTML, структури DOM і ARIA-ролей для тестування доступності.
• Побудова стійких XPath/CSS селекторів з опорою на атрибути, ролі та стратегії локаторів.
• Застосування DevTools (Elements, Network, Console, Performance, Accessibility) у діагностиці.
• Перевірки a11y: фокус-менеджмент, клавіатурна навігація, контраст, альтернативні описи.
• Створення мінімальних HTML-прикладів для відтворення і локалізації дефектів.