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

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

Основные методы проверки видимости

WebdriverIO предоставляет несколько ключевых методов для работы с видимостью элементов:

  1. isDisplayed() Возвращает булево значение: true, если элемент видим на странице, и false, если элемент скрыт или отсутствует. Пример использования:

    const button = await $('#submit-button');
const visible = await button.isDisplayed();
console.log(visible); // true или false

  2. isDisplayedInViewport() Проверяет, видим ли элемент в текущей области видимости окна браузера. Это важно для элементов, которые могут быть на странице, но не в зоне видимости без прокрутки.

    const banner = await $('#top-banner');
const inViewport = await banner.isDisplayedInViewport();

  3. waitForDisplayed() Позволяет ожидать появления элемента в DOM и его видимости в течение указанного времени. Метод полезен для асинхронных операций и динамически загружаемых элементов.

    const loginForm = await $('#login-form');
await loginForm.waitForDisplayed({ timeout: 5000 });

Работа с состоянием видимости

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

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

Пример проверки исчезновения элемента:

const loader = await $('#loading-spinner');
await loader.waitForDisplayed({ timeout: 10000, reverse: true, timeoutMsg: 'Spinner не исчез после 10 секунд' });

Комбинирование проверок с условиями

Часто необходимо проверять видимость элемента в сочетании с другими условиями, например, активностью кнопки или содержимым текста. Для этого применяются цепочки промисов и логические конструкции:

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

if (await submitButton.isDisplayed() && await submitButton.isEnabled()) {
    await submitButton.click();
} else {
    console.warn('Кнопка недоступна для нажатия');
}

Селекторы и стратегия выбора элементов

Корректная проверка видимости невозможна без точного выбора элемента. WebdriverIO поддерживает различные типы селекторов:

  • CSS селекторы: $('#id'), $('.class'), $('div > p:first-child')
  • XPath селекторы: $('//button[text()="Submit"]')
  • Составные локаторы: с использованием browser.$ или $$ для массивов элементов

Важно понимать, что методы проверки видимости работают только с существующими элементами DOM. Попытка вызвать isDisplayed() на несуществующем элементе вызовет исключение. Для безопасной работы можно предварительно использовать метод isExisting().

Асинхронные сценарии и динамическая загрузка

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

await browser.waitUntil(
    async () => await $('#dynamic-content').isDisplayed(),
    {
        timeout: 7000,
        timeoutMsg: 'Динамический контент не появился'
    }
);

Советы по стабильности тестов

  1. Использовать waitForDisplayed вместо простых isDisplayed при работе с динамическими элементами.
  2. Минимизировать использование фиксированных задержек (pause), так как они снижают производительность и могут вызывать нестабильность.
  3. Комбинировать проверки видимости с проверкой активности (isEnabled) или состояния атрибутов для точной имитации действий пользователя.
  4. Сохранять единый подход к селекторам: использование CSS или XPath в одном тестовом проекте помогает поддерживать код в чистоте.

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

  • Проверка видимости элемента перед кликом:
const menu = await $('#menu');
await menu.waitForDisplayed({ timeout: 5000 });
await menu.click();
  • Проверка скрытия уведомления:
const notification = await $('#notification');
await notification.waitForDisplayed({ reverse: true, timeout: 3000 });
  • Валидация текста только видимого элемента:
const message = await $('#success-message');
if (await message.isDisplayed()) {
    const text = await message.getText();
    console.log('Сообщение:', text);
}

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

Оглавление