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

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

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

Cypress напрямую поддерживает фокусировку через метод .focus(). Он позволяет программно установить фокус на элемент:

cy.get('input[name="username"]').focus();

После применения .focus() элемент становится активным, что позволяет выполнять проверки состояний или ожиданий, например, проверку наличия CSS-классов:

cy.get('input[name="username"]')
  .focus()
  .should('have.class', 'input-active');

Для обработки потери фокуса используется метод .blur():

cy.get('input[name="username"]').blur();

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

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

Cypress поддерживает проверку состояния фокуса через команду .should('be.focused'):

cy.get('input[name="password"]')
  .focus()
  .should('be.focused');

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

cy.get('input[name="password"]')
  .blur()
  .should('not.be.focused');

Эти проверки позволяют убедиться, что интерфейс правильно реагирует на пользовательские действия.

Цепочки действий с фокусом

Часто требуется проверять сценарии с последовательной фокусировкой нескольких элементов. Cypress позволяет создавать цепочки команд с .focus() и .blur() для пошагового тестирования:

cy.get('input[name="email"]').focus().should('be.focused');
cy.get('input[name="email"]').blur();
cy.get('input[name="password"]').focus().should('be.focused');

Такой подход гарантирует корректность перехода фокуса и соответствующую реакцию приложения на эти события.

Взаимодействие с клавиатурой

Фокусировка тесно связана с вводом с клавиатуры. Cypress предоставляет метод .type() для имитации ввода текста:

cy.get('input[name="username"]')
  .focus()
  .type('admin')
  .should('have.value', 'admin');

После завершения ввода обычно проверяется потеря фокуса через .blur() и последующую реакцию приложения, например, валидацию или подсказку:

cy.get('input[name="username"]')
  .blur()
  .get('.error-message')
  .should('contain', 'Имя пользователя обязательно');

Особенности работы с динамическими элементами

При работе с динамическими формами важно учитывать, что фокус может быть потерян автоматически при появлении или исчезновении элементов. Для таких случаев используется Cypress-команда .focus() в сочетании с ожиданием видимости элемента .should('be.visible'):

cy.get('input[name="search"]')
  .should('be.visible')
  .focus()
  .type('Cypress');

Эта последовательность предотвращает ошибки, связанные с попыткой фокусировки на элемент, который еще не появился в DOM.

Тестирование кастомных компонентов

Фокус и потеря фокуса для нестандартных элементов, таких как кастомные селекты или модальные окна, проверяются через вызов .focus() на контейнере или скрытом input внутри компонента:

cy.get('.custom-select input')
  .focus()
  .should('be.focused');
cy.get('.custom-select input').blur();
cy.get('.dropdown').should('not.be.visible');

В таких сценариях важно удостовериться, что события focus и blur корректно вызывают видимые изменения интерфейса.

Советы по надежным тестам фокуса

  • Всегда проверять видимость элемента перед фокусировкой.
  • Использовать .should('be.focused') и .should('not.be.focused') для точной проверки состояний.
  • Для динамических форм добавлять ожидание .should('exist') или .should('be.visible').
  • При тестировании кастомных компонентов фокус устанавливается на реальный интерактивный элемент внутри компонента.

Примеры комплексного сценария

Тестирование формы регистрации с проверкой фокуса и валидации:

cy.get('input[name="email"]').focus().type('test@example.com');
cy.get('input[name="email"]').blur();
cy.get('.email-error').should('not.exist');

cy.get('input[name="password"]').focus().type('123');
cy.get('input[name="password"]').blur();
cy.get('.password-error').should('contain', 'Минимум 6 символов');

cy.get('button[type="submit"]').focus().click();
cy.get('.success-message').should('contain', 'Регистрация успешна');

Этот пример демонстрирует полный цикл работы с фокусом: установка фокуса, ввод данных, потеря фокуса, проверка ошибок и финальное действие.

Фокусировка и потеря фокуса в Cypress позволяют создавать детализированные тесты пользовательских сценариев, включая валидацию, динамические интерфейсы и взаимодействие с клавиатурой. Правильное использование методов .focus(), .blur() и проверок состояния фокуса обеспечивает высокую надежность тестов.

Оглавление