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

В автоматизированном тестировании веб-приложений часто возникает необходимость дождаться исчезновения элемента со страницы. Это важно, например, когда необходимо убедиться, что спиннер загрузки завершил работу, модальное окно закрыто или уведомление исчезло. WebdriverIO предоставляет для этого удобные методы, позволяющие синхронизировать тест с состоянием интерфейса без использования жестких sleep, что повышает стабильность и скорость тестов.

Методы для проверки исчезновения элемента

  1. waitForDisplayed с параметром reverse: true

Метод waitForDisplayed проверяет видимость элемента. Если указать опцию reverse: true, ожидание будет завершено, когда элемент станет невидимым или исчезнет из DOM.

Пример использования:

const loader = $('#loader');

// Дождаться, пока элемент исчезнет
loader.waitForDisplayed({ timeout: 5000, reverse: true });
  • timeout — максимальное время ожидания в миллисекундах.
  • reverse: true — инвертирует проверку, ожидаемое состояние — невидимый элемент.

Важно понимать: элемент может оставаться в DOM, но быть скрытым через CSS (display: none, visibility: hidden). waitForDisplayed с reverse: true учитывает оба случая.

  1. waitUntil для кастомной логики

Метод browser.waitUntil позволяет писать более сложные условия ожидания, например, проверку, что элемент удалился из DOM полностью:

const notification = $('#notification');

browser.waitUntil(
    () => !notification.isExisting(),
    {
        timeout: 5000,
        timeoutMsg: 'Уведомление не исчезло за 5 секунд'
    }
);
  • isExisting() возвращает true, если элемент присутствует в DOM.
  • Используется !notification.isExisting(), чтобы дождаться его полного исчезновения.

waitUntil полезен, когда нужно объединить несколько условий или добавить проверку нестандартного поведения элемента.

Отличие между невидимым и удалённым элементом

  • Невидимый элемент — присутствует в DOM, но не отображается (display: none, opacity: 0).
  • Удалённый элемент — полностью исчез из DOM, isExisting() возвращает false.

Выбор метода зависит от конкретной задачи. Если важно проверить визуальное исчезновение, достаточно waitForDisplayed({ reverse: true }). Если тест критичен к DOM-структуре, лучше использовать waitUntil с isExisting.

Настройка таймаутов

WebdriverIO позволяет задавать таймауты глобально или локально:

// Глобально в wdio.conf.js
waitforTimeout: 10000, // 10 секунд

// Локально в методе
loader.waitForDisplayed({ timeout: 8000, reverse: true });
  • Рекомендуется использовать локальные таймауты для отдельных проверок исчезновения, чтобы тесты оставались быстрыми и устойчивыми.
  • Глобальный таймаут применяется ко всем waitFor* методам, что удобно для базового уровня синхронизации.

Примеры реальных сценариев

  1. Спиннер загрузки:
const spinner = $('#spinner');
spinner.waitForDisplayed({ timeout: 7000, reverse: true });
  1. Закрытие модального окна:
const modal = $('.modal');
browser.waitUntil(() => !modal.isExisting(), { timeout: 5000 });
  1. Исчезновение уведомления после действия пользователя:
const toast = $('.toast-success');
toast.waitForDisplayed({ timeout: 4000, reverse: true });

Во всех случаях тест ждет, пока элемент не исчезнет, предотвращая фальшивые ошибки из-за асинхронных изменений интерфейса.

Рекомендации по устойчивости тестов

  • Избегать фиксированных пауз (browser.pause) для ожидания исчезновения — это снижает скорость тестов и повышает нестабильность.
  • Для динамических элементов, которые могут исчезнуть быстро или с задержкой, использовать адекватный таймаут и проверку через reverse или isExisting.
  • В сложных интерфейсах комбинировать waitForDisplayed и waitUntil для точного контроля состояния элементов.

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

Оглавление