Ожидание видимости элемента

В автоматизированном тестировании веб-приложений ожидание элементов играет ключевую роль. Некорректное обращение к элементу до его появления на странице приводит к нестабильности тестов и ошибкам типа element not interactable или stale element reference. WebdriverIO предоставляет гибкие инструменты для управления видимостью и доступностью элементов.

Методы ожидания

WebdriverIO делит ожидания на два типа: явные и неявные.

  1. Неявные ожидания (Implicit waits) Настраиваются один раз и применяются ко всем запросам к элементам. WebdriverIO будет автоматически ждать заданное время до появления элемента. Пример:
browser.setTimeout({ implicit: 5000 }); // ждем до 5 секунд
const button = $('#submit');
button.click(); // WebdriverIO подождет появления элемента до 5 секунд

Особенности:

  • Простая настройка.
  • Не подходит для проверки конкретных условий видимости или состояния элемента.
  • Может замедлять тесты при частом использовании.
  1. Явные ожидания (Explicit waits) Позволяют ожидать конкретного состояния элемента перед взаимодействием: видимость, кликабельность, наличие текста и т.д. Основные методы:
  • waitForDisplayed({ timeout, reverse, timeoutMsg }) – ожидает, что элемент станет видимым.
  • waitForEnabled({ timeout }) – ожидает, что элемент станет доступным для взаимодействия.
  • waitForExist({ timeout }) – ожидает появления элемента в DOM.

Пример ожидания видимости кнопки:

const button = $('#submit');
button.waitForDisplayed({ timeout: 7000, timeoutMsg: 'Кнопка не появилась на странице' });
button.click();

Параметры:

  • timeout – максимальное время ожидания (в миллисекундах).
  • reverse – если true, метод ждёт, пока элемент не будет видимым.
  • timeoutMsg – сообщение об ошибке, которое будет выброшено при превышении таймаута.

Проверка видимости через условные методы

WebdriverIO позволяет не только ждать видимость, но и проверять состояние элемента без остановки выполнения через условные методы:

if ($('#submit').isDisplayed()) {
    $('#submit').click();
}

Отличие от waitForDisplayed:

  • isDisplayed() возвращает true или false мгновенно.
  • Не блокирует выполнение теста, полезно для условных ветвлений.

Сценарии использования

  1. Динамические элементы Страницы с AJAX-загрузкой или модальными окнами требуют ожидания появления элементов:
const modal = $('#modal-window');
modal.waitForDisplayed({ timeout: 10000 });
modal.$('.close-button').click();
  1. Тестирование форм Для кнопок и полей формы важно, чтобы элементы были видимыми и активными перед взаимодействием:
const submitBtn = $('#submit');
submitBtn.waitForDisplayed({ timeout: 5000 });
submitBtn.waitForEnabled({ timeout: 5000 });
submitBtn.click();
  1. Обработка скрытых элементов Иногда элементы существуют в DOM, но скрыты с помощью CSS (display: none, visibility: hidden). Используется waitForDisplayed:
const tooltip = $('#tooltip');
tooltip.waitForDisplayed({ timeout: 3000 });
expect(tooltip.isDisplayed()).toBe(true);

Советы по надежности тестов

  • Использовать явные ожидания вместо неявных для критичных элементов.
  • Настраивать таймауты в зависимости от динамики приложения.
  • Объединять проверки видимости и доступности через цепочку методов:
const input = $('#username');
input.waitForDisplayed({ timeout: 5000 }).waitForEnabled({ timeout: 5000 });
input.setValue('testuser');
  • В сложных интерфейсах с динамическими списками лучше проверять наличие элементов через waitUntil с кастомной функцией:
browser.waitUntil(
    () => $('#item-list').$$('.item').length > 0,
    {
        timeout: 8000,
        timeoutMsg: 'Список элементов не загрузился'
    }
);

Отличие waitForDisplayed от waitForExist

  • waitForExist проверяет только наличие элемента в DOM, не учитывая его видимость.
  • waitForDisplayed гарантирует, что элемент видим пользователю, и с ним можно взаимодействовать.
$('#hidden-element').waitForExist({ timeout: 5000 }); // элемент в DOM, но может быть скрыт
$('#hidden-element').waitForDisplayed({ timeout: 5000 }); // элемент должен быть видимым

Использование waitForDisplayed повышает стабильность тестов, особенно при динамических интерфейсах.

Интеграция с ассерциями

WebdriverIO позволяет проверять видимость элементов в рамках тестовых утверждений:

const notification = $('#notification');
notification.waitForDisplayed({ timeout: 5000 });
expect(notification).toBeDisplayed();

Цепочка ожидания и проверки исключает состояние гонки, когда тест пытается проверить элемент до его появления.

Особенности при работе с асинхронными действиями

  • Для элементов, которые появляются после действия пользователя, всегда использовать явные ожидания.
  • Комбинирование waitForDisplayed с методами $ и $$ обеспечивает точное управление элементами в DOM.
  • Методы ожидания возвращают сам элемент, что позволяет строить цепочки вызовов без промежуточных переменных:
$('#menu').waitForDisplayed({ timeout: 4000 }).click();

Ожидание видимости элемента является фундаментальной практикой для стабильного и предсказуемого тестирования интерфейсов. Комбинация явных ожиданий, проверки состояний элементов и интеграции с ассерциями формирует надежную основу автоматизации с WebdriverIO.

Оглавление