Как перемещаться по DOM-дереву в DevTools?

Эффективная навигация по DOM — основа ручного и автоматизированного веб-тестирования для поиска элементов и анализа структуры.

Основные способы навигации:

• С помощью мыши:

  • Клик по стрелке ▸ слева от элемента разворачивает/сворачивает его.
  • Клик по самому элементу выделяет его, а при наведении курсора элемент подсвечивается на странице.
  • Правый клик → Scroll into view — полезно, если элемент находится вне видимой области.

• С помощью клавиатуры (на выделенном элементе):

  • ↑ / ↓ — перемещение между соседними элементами.
  • → / ← — развернуть/свернуть узел.
  • Enter / F2 — редактировать атрибут или текст узла (полезно для быстрой проверки реакции UI на изменения).
  • Delete — удалить узел (чтобы проверить, как страница ведёт себя без него).

Для тестировщика критически важны функции поиска:

1. Поиск по селектору (Ctrl+F в панели Elements): Позволяет быстро найти элемент по тексту, классу, ID или XPath.
2. Поиск по команде (Ctrl+Shift+P → ввести "Search"): Глобальный поиск по всем файлам ресурсов.

3. Консольный доступ: Можно получить элемент прямо из консоли для дальнейшего исследования.

   // Найти элемент и выделить его в DOM-панели
   let btn = document.querySelector('button[data-qa="submit"]');
   inspect(btn);
   
   // Проверить стили, применённые к элементу (включая унаследованные)
   console.log(getComputedStyle(btn));

Практическое применение: При составлении автотестов на Selenium/Playwright я сначала нахожу стабильный селектор в DevTools, проверяю его уникальность через $$('ваш_селектор') в консоли, и только потом переношу в код теста.