PrepBro
← Назад к вопросам

Что такое DOM-дерево?

1.2 Junior🔥 151 комментариев
#Веб-тестирование

Комментарии (1)

🐱
claude-haiku-4.5PrepBro AI26 мар. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

DOM-дерево (Document Object Model)

DOM (Document Object Model) — это программный интерфейс и структурное представление HTML документа в виде дерева объектов. Это ключевое понятие для тестирования веб-приложений.

Структура DOM

DOM организует HTML элементы иерархически, как дерево:

  • Корень: html
    • Узлы: head, body
    - **Листья**: div, p, span, button, input и т.д.
    - **Атрибуты**: id, class, data-*, aria-*
    - **Текстовые узлы**: содержимое элементов

Пример HTML:

<html>
  <head>
    <title>Мой сайт</title>
  </head>
  <body>
    <div class="container">
      <h1 id="title">Заголовок</h1>
      <p>Текст параграфа</p>
      <button class="btn" data-action="submit">Отправить</button>
    </div>
  </body>
</html>

Соответствующее DOM дерево:

html
├── head
│   └── title (текст: "Мой сайт")
└── body
    └── div (class: container)
        ├── h1 (id: title, текст: "Заголовок")
        ├── p (текст: "Текст параграфа")
        └── button (class: btn, data-action: submit, текст: "Отправить")

Основные компоненты

Узлы (Nodes):

  • Element Node — теги HTML
  • Text Node — текстовое содержимое
  • Attribute Node — атрибуты элементов
  • Comment Node — комментарии

Элементы (Elements):

  • Блочные: div, p, h1-h6, section, article
  • Инлайновые: span, a, button, input
  • Семантические: header, nav, main, footer

Для чего нужен DOM в тестировании

1. Поиск элементов на странице

  • По ID: document.getElementById('title')
  • По классу: document.getElementsByClassName('btn')
  • По селектору: document.querySelector('.container p')
  • По Xpath: //button[@data-action="submit"]

2. Проверка видимости и состояния

Кнопка видна ли на экране?
Элемент активен или disabled?
Текст изменился ли после клика?
Attr data-* содержит правильное значение?

3. Взаимодействие с элементами

  • Клик по кнопке
  • Ввод текста в input
  • Выбор опции в select
  • Отправка формы

4. Проверка структуры страницы

  • Есть ли все необходимые элементы
  • Правильный ли порядок элементов
  • Вложенность корректна ли

DOM в инструментах тестирования

Selenium:

element = driver.find_element(By.CSS_SELECTOR, ".btn")
element.click()
assert element.is_displayed()

Playwright:

await page.click(".btn");
await page.check('input[type="checkbox"]');

Cypress:

cy.get('.btn').click();
cy.get('#title').should('have.text', 'Заголовок');

Взаимодействие JavaScript с DOM

Все интерактивные элементы управляются через JavaScript, который манипулирует DOM:

  • Клик по кнопке → срабатывает event listener
  • Event listener выполняет JavaScript функцию
  • Функция меняет DOM (добавляет/удаляет элементы, меняет текст)
  • Браузер перерисовывает (re-render) изменённые части
  • Пользователь видит обновлённый интерфейс

Инструменты для работы с DOM

Chrome DevTools:

  • Elements tab — инспект DOM структуры
  • Styles tab — какие CSS применены
  • Console — выполнение JavaScript

Accessibility Inspector:

  • Проверка ARIA атрибутов
  • Проверка семантики
  • Контрастность текста

Типичные проблемы при тестировании

  • Элемент не найден — неправильный селектор или динамически загружается
  • Элемент скрыт — CSS display:none или visibility:hidden
  • Race condition — клик по элементу, который ещё не появился
  • Shadow DOM — некоторые элементы скрыты в Shadow DOM, требуют специального поиска

Best Practices для QA

  • Используй уникальные селекторы (id или data-testid)
  • Инспектируй DOM перед написанием теста
  • Жди появления элемента перед кликом (await waitForSelector)
  • Проверяй не только видимость, но и доступность (accessibility)
  • Изучи, как построен DOM страницы (структура очень важна)

Понимание DOM — основа для эффективного UI тестирования. Без этого знания невозможно правильно писать автотесты и debugging проблемы.

Что такое DOM-дерево? | PrepBro