Chrome DevTools для QA - вкладка Elements! 🔍Chrome DevTools - один з найкорисніших інструментів у нашому арсеналі. Почнемо з вкладки Elements у Chrome DevTools (і подібних інструментах в інших браузерах). Це наше вікно у HTML-структуру та CSS-стилі сторінки.Як QA може використовувати вкладку Elements?🕵️‍♀️ Пошук локаторів для автотестів:Найпростіше: Правою кнопкою на елемент -> Copy -> Copy selector / Copy XPath.Надійніше: Аналізуйте структуру, шукайте унікальні id, інформативні class, data-testid або інші атрибути для створення стабільних CSS-селекторів чи XPath.✅ Перевірка наявності та атрибутів елементів:Чи існує кнопка/поле/текстовий блок на сторінці?Чи правильні id, class, name, placeholder, value, href та інші атрибути?Чи містить елемент очікуваний текст?🐛 Відловлення UI багів:Елемент не видно? Шукайте стилі display: none;, visibility: hidden;, opacity: 0; або перевірте, чи не перекритий він іншим елементом (z-index).Елемент "поїхав"? Досліджуйте margin, padding, position, width, height у панелі "Styles".🎨 Аналіз CSS-стилів:Чи відповідають кольори, шрифти, розміри, відступи макету/вимогам? Панель "Styles" показує всі застосовані стилі та звідки вони успадковані (зручно для розуміння каскадності). Вкладка "Computed" показує фінальні, розраховані браузером стилі.✍️ Динамічна зміна контенту/стилів "на льоту":Хочете перевірити, як виглядатиме дуже довгий текст у полі? Двічі клікніть на текст в HTML і змініть його.Хочете швидко перевірити інший колір кнопки? Знайдіть відповідний стиль у панелі "Styles" і змініть значення.Це дозволяє швидко експериментувати та знаходити граничні випадки без залучення розробників.📱 Тестування адаптивності (Responsiveness):Натисніть іконку "Toggle device toolbar" (схожа на телефон/планшет).Вибирайте різні пристрої (iPhone, Pixel, iPad...), змінюйте орієнтацію та перевіряйте, як верстка адаптується.🖱️ Перегляд Event Listeners:Хочете знати, що відбувається при кліку на елемент? Вкладка "Event Listeners" (зазвичай підпанель у "Styles") покаже, які обробники подій (click, mouseover тощо) прив'язані до вибраного елемента.Як відкрити:Найпростіше – клавіша F12 або клік правою кнопкою миші на будь-якому елементі сторінки -> Inspect (Перевірити).Вкладка Elements – це не просто перегляд коду, це потужний інструмент для аналізу, налагодження та глибшого розуміння того, як працює фронтенд.