Работа с фокусом элемента

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

Определение и проверка фокуса

В WebdriverIO элемент считается в фокусе, если на него можно вводить данные или взаимодействовать с клавиатурой. Метод isFocused() позволяет проверить это состояние:

const input = await $('#username');
const focused = await input.isFocused();
console.log(focused); // true или false

Важно понимать, что isFocused() возвращает логическое значение, которое позволяет строить условные конструкции или ассерты для проверки правильного поведения интерфейса.

Установка фокуса на элемент

Для того чтобы передать фокус элементу, используется метод click() или focus():

const input = await $('#username');

// Использование click для установки фокуса
await input.click();

// Явная установка фокуса через focus
await browser.execute((el) => el.focus(), input);

Метод click() работает для большинства интерактивных элементов, однако в случаях, когда требуется только фокус без активации клика, предпочтительно использовать browser.execute() с вызовом element.focus() через JavaScript.

Управление фокусом через клавиатуру

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

// Перемещение фокуса на следующий элемент
await browser.keys('Tab');

// Перемещение фокуса на предыдущий элемент
await browser.keys(['Shift', 'Tab']);

Клавиши можно комбинировать и отправлять последовательности для эмуляции реального поведения пользователя.

Асинхронные особенности работы с фокусом

Фокус может устанавливаться не мгновенно из-за анимаций, задержек загрузки элементов или динамического рендера. Для надёжного тестирования рекомендуется использовать ожидания:

const input = await $('#username');
await input.waitForDisplayed({ timeout: 5000 });
await input.waitForEnabled({ timeout: 5000 });
await input.click();

await browser.waitUntil(async () => await input.isFocused(), {
    timeout: 3000,
    timeoutMsg: 'Элемент не получил фокус'
});

waitUntil позволяет задать кастомное условие, что гарантирует корректную проверку фокуса даже на динамических страницах.

Особенности работы с модальными окнами и iframe

Фокус может теряться при переключении контекста, например, при открытии модального окна или переходе в iframe. В WebdriverIO необходимо явно переключаться между контекстами:

// Переключение на iframe
const frame = await $('#myFrame');
await browser.switchToFrame(frame);

// Установка фокуса внутри iframe
const input = await $('#email');
await input.click();

// Возврат в основной контекст
await browser.switchToParentFrame();

Игнорирование этих шагов приведёт к тому, что проверка isFocused() всегда будет возвращать false для элементов, находящихся вне текущего контекста.

Проверка потери фокуса

Для тестирования сценариев, где важно отслеживать потерю фокуса, используется комбинация isFocused() и ожиданий:

const input = await $('#username');
await input.click();

// Нажатие вне элемента для снятия фокуса
await $('#someOtherElement').click();

const focused = await input.isFocused();
console.log(focused); // false

Такой подход необходим для проверки валидации полей, обработки событий blur и других UI-событий.

Важные моменты и рекомендации

  • Использовать явный фокус через browser.execute только если click() не подходит.
  • Асинхронные проверки обязательны для динамических страниц.
  • Контекст iframe нужно переключать обязательно, иначе isFocused() всегда будет возвращать false.
  • Навигация клавишами важна для тестирования доступности.
  • Комбинирование методов (click, keys, execute) обеспечивает полное покрытие сценариев управления фокусом.

Работа с фокусом — основа корректного тестирования интерактивных элементов. Правильное управление и проверка фокуса повышает стабильность тестов и позволяет эмулировать реальное взаимодействие пользователя с интерфейсом.

Оглавление