Обработка фокуса и blur событий

В веб-тестировании взаимодействие с элементами страницы часто требует контроля над событиями фокуса (focus) и его потери (blur). Эти события критически важны для проверки поведения форм, валидации данных и динамического изменения интерфейса. Protractor, как надстройка над Selenium WebDriver для Angular-приложений, предоставляет инструменты для работы с этими событиями, хотя прямой поддержки focus и blur через стандартные методы нет, но их можно реализовать через комбинацию действий и выполнения скриптов в браузере.

Методы управления фокусом

1. element(by.css(...)).click() Наиболее простой способ установить фокус на элемент — клик по нему. Этот метод подходит для интерактивных элементов (input, textarea, button), которые реагируют на клик событием focus.

let inputField = element(by.css('#username'));
inputField.click();

После вызова click() элемент получает фокус, и браузер инициирует событие focus. Для проверки последствий этого события можно использовать ожидания (ExpectedConditions) или проверку атрибутов/классов элемента.

2. Использование browser.actions() Для более сложного управления фокусом, особенно если необходимо имитировать наведение клавиатурой или перемещение по элементам, применяется API actions().

let inputField = element(by.css('#password'));
browser.actions().mouseMove(inputField).click().perform();

Этот подход гарантирует, что событие focus будет сгенерировано, аналогично реальному поведению пользователя.

3. Вызов событий через JavaScript В случаях, когда клик или действия мышью невозможны или не подходят, можно вручную инициировать событие focus через executeScript().

let inputField = element(by.css('#email'));
browser.executeScript("arguments[0].focus();", inputField.getWebElement());

Аналогично, для события blur используется:

browser.executeScript("arguments[0].blur();", inputField.getWebElement());

Этот метод особенно полезен для проверки поведения форм с кастомной валидацией или сложной логикой, зависящей от потери фокуса.

Проверка состояния после focus и blur

После того как фокус установлен или потерян, часто требуется проверить реакцию интерфейса:

1. Проверка CSS-классов Элементы могут менять стиль при получении или потере фокуса.

let inputField = element(by.css('#username'));
inputField.click();
expect(inputField.getAttribute('class')).toContain('focused');
browser.executeScript("arguments[0].blur();", inputField.getWebElement());
expect(inputField.getAttribute('class')).not.toContain('focused');

2. Проверка текста и сообщений валидации Многие формы показывают сообщения только после события blur.

let inputField = element(by.css('#email'));
inputField.sendKeys('invalid-email');
browser.executeScript("arguments[0].blur();", inputField.getWebElement());
let errorMsg = element(by.css('.error-message'));
expect(errorMsg.isDisplayed()).toBe(true);

Сочетание focus/blur с ожиданиями

Использование ExpectedConditions позволяет корректно обрабатывать асинхронные реакции на события:

let inputField = element(by.css('#username'));
inputField.click();

let EC = protractor.ExpectedConditions;
let submitBtn = element(by.css('#submit'));

browser.wait(EC.elementToBeClickable(submitBtn), 5000);
submitBtn.click();

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

Обработка последовательностей событий

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

let inputField = element(by.css('#password'));
browser.actions()
  .mouseMove(inputField)
  .click()
  .sendKeys('Secret123')
  .perform()
  .then(() => browser.executeScript("arguments[0].blur();", inputField.getWebElement()));

Такой подход имитирует реальное поведение пользователя: фокус, ввод текста и выход из поля, что триггерит все связанные события.

Особенности работы с Angular

В Angular-приложениях часто применяются директивы ng-focus и ng-blur. Protractor автоматически синхронизируется с зоной Angular (Zone.js), поэтому события focus и blur, вызванные через click() или actions(), корректно учитываются в жизненном цикле приложения. Для кастомных компонентов, не использующих стандартные HTML-элементы, иногда требуется прямое выполнение скриптов для генерации этих событий.

Рекомендации по отладке

  • Использовать browser.pause() для интерактивного отслеживания событий.
  • Проверять наличие классов и текстовых изменений после каждого события.
  • Для элементов, скрытых за модальными окнами или всплывающими панелями, использовать скрипты вместо click() для надежного фокуса.
  • Комбинировать focus/blur с ожиданиями (ExpectedConditions) для устойчивых тестов.

Контроль над событиями focus и blur позволяет детально тестировать формы, сложные UI-компоненты и поведение Angular-приложений в ответ на пользовательские действия. Правильная комбинация действий, скриптов и ожиданий обеспечивает точное воспроизведение пользовательского взаимодействия и стабильность автотестов.

Оглавление