Проверка наличия элемента в DOM

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

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

WebdriverIO предоставляет несколько методов для поиска элементов:

  • $(selector) — возвращает первый элемент, соответствующий селектору. Если элемент не найден, возвращается объект-обертка, который при попытке взаимодействия с ним вызовет ошибку.
  • $$(selector) — возвращает массив элементов, соответствующих селектору. Если элементов нет, возвращается пустой массив.

Пример:

const button = $('#submit-button');
const links = $$('a.nav-link');

Проверка существования элемента

Для проверки наличия элемента в DOM используется метод isExisting(). Он возвращает булево значение: true, если элемент присутствует в DOM, и false, если его нет.

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

const loginForm = $('#login-form');

if (loginForm.isExisting()) {
    console.log('Форма логина присутствует на странице');
} else {
    console.log('Форма логина отсутствует');
}

Метод isExisting() проверяет именно наличие элемента в DOM, а не его видимость. Элемент может существовать, но быть скрытым с помощью CSS (display: none или visibility: hidden).

Проверка видимости элемента

Если требуется убедиться, что элемент не только существует, но и видим пользователю, используется метод isDisplayed():

const submitButton = $('#submit-button');

if (submitButton.isDisplayed()) {
    console.log('Кнопка доступна для взаимодействия');
}

Разница между isExisting() и isDisplayed() критична для тестов, которые должны имитировать действия пользователя: пользователь не может взаимодействовать с невидимым элементом.

Асинхронные проверки с ожиданиями

WebdriverIO поддерживает ожидания через метод waitForExist(), который позволяет подождать появления элемента в DOM заданное время. Это полезно для динамических страниц с задержкой загрузки элементов.

Пример:

const notification = $('#notification');

notification.waitForExist({ timeout: 5000 });
console.log('Уведомление появилось в DOM');

Параметры метода waitForExist():

  • timeout — максимальное время ожидания в миллисекундах.
  • reverse — если true, ожидает исчезновения элемента.
  • timeoutMsg — сообщение об ошибке, если элемент не появился.

Пример с отрицательным условием:

const modal = $('#modal');

modal.waitForExist({ timeout: 3000, reverse: true });
console.log('Модальное окно исчезло из DOM');

Проверка множества элементов

Для проверки наличия нескольких элементов используется массив, возвращаемый $$(selector). Часто нужно убедиться, что хотя бы один элемент присутствует:

const items = $$('.product-item');

if (items.length > 0) {
    console.log(`Найдено ${items.length} элементов`);
} else {
    console.log('Элементы отсутствуют');
}

Также можно проверять наличие конкретного количества элементов:

expect($$('.product-item')).toBeElementsArrayOfSize(5);

Рекомендации по надёжной проверке

  1. Разделять существование и видимость. Если тест проверяет, что пользователь видит элемент, использовать isDisplayed(). Если важен только факт присутствия в DOM — isExisting().
  2. Использовать ожидания для динамических страниц. Методы waitForExist() и waitForDisplayed() предотвращают ошибки из-за задержек рендеринга.
  3. Стараться минимизировать жёсткие таймауты. Вместо фиксированной паузы лучше ждать конкретное состояние элемента.
  4. Проверять массив элементов при работе с повторяющимися элементами. Это помогает избежать ложноположительных результатов, если элементы динамически добавляются или удаляются.

Практические примеры

Проверка появления уведомления после действия пользователя:

$('#save-button').click();
const toast = $('#toast-message');

toast.waitForExist({ timeout: 4000 });
expect(toast.isDisplayed()).toBe(true);

Проверка исчезновения загрузочного индикатора:

const loader = $('#loader');

loader.waitForExist({ timeout: 5000, reverse: true });
console.log('Загрузка завершена');

Проверка наличия хотя бы одного элемента из списка:

const products = $$('.product-item');
expect(products.length).toBeGreaterThan(0);

Методы проверки наличия элементов в DOM в WebdriverIO обеспечивают гибкость и надёжность тестов, позволяя учитывать как статические, так и динамически изменяющиеся страницы. Правильное сочетание isExisting(), isDisplayed() и ожиданий waitForExist() позволяет создавать тесты, которые устойчиво работают в любых условиях.

Оглавление