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

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

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

Cypress использует цепочки команд (.get(), .find(), .contains()) для поиска элементов и методы .should() или .expect() для их проверки.

1. Проверка, что элемент видим:

cy.get('#submit-button').should('be.visible');

Метод be.visible проверяет несколько условий одновременно:

  • элемент не имеет CSS-свойства display: none;
  • элемент не имеет visibility: hidden;
  • элемент не полностью скрыт за пределами окна;
  • элемент не имеет opacity: 0.

2. Проверка, что элемент невидим:

cy.get('#loading-spinner').should('not.be.visible');

not.be.visible гарантирует, что элемент существует в DOM, но не видим пользователю.

3. Проверка наличия элемента без учёта видимости:

cy.get('#modal').should('exist');

exist проверяет только наличие элемента в DOM, даже если он скрыт. Этот метод полезен, когда нужно убедиться, что элемент создан, но видимость определяется отдельной проверкой.

Условия и нюансы видимости

  • Элементы с нулевой шириной или высотой: Cypress считает такие элементы невидимыми, даже если они присутствуют в DOM.
  • Элементы, скрытые с помощью CSS-анимаций: при анимации появления/скрытия видимость может меняться динамически. Для надёжной проверки рекомендуется использовать .should('be.visible') с таймаутом или .wait() перед проверкой.
  • Элементы за пределами экрана: если элемент находится за пределами видимой области, Cypress также считает его скрытым. В таких случаях возможна прокрутка с помощью .scrollIntoView().
cy.get('#footer').scrollIntoView().should('be.visible');

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

Для проверки текста в видимом элементе используют команду .contains():

cy.contains('Добро пожаловать').should('be.visible');

Важно понимать, что .contains() автоматически ищет только видимые элементы. Если текст находится в скрытом элементе, проверка вернёт ошибку.

Комбинированные проверки

Можно совмещать проверку видимости с другими условиями, например, проверкой активности элемента или наличия атрибутов:

cy.get('#login-button')
  .should('be.visible')
  .and('be.enabled')
  .and('have.attr', 'type', 'submit');

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

Проверка элементов, появляющихся после действий

Многие элементы становятся видимыми после клика или другого взаимодействия. В Cypress важно использовать цепочку команд с ожиданием:

cy.get('#menu-button').click();
cy.get('#dropdown').should('be.visible');

Если элемент появляется с задержкой, можно увеличить таймаут:

cy.get('#notification', { timeout: 10000 }).should('be.visible');

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

Для динамически скрывающихся элементов часто используют сочетание should('not.exist') и should('not.be.visible'):

cy.get('#alert-message').should('not.exist');
cy.get('#alert-message').should('not.be.visible');

not.exist проверяет полное удаление из DOM, а not.be.visible — скрытие без удаления. Это различие критично при тестировании модальных окон и уведомлений.

Использование псевдоэлементов и CSS для проверки видимости

Cypress не может напрямую проверять псевдоэлементы (::before, ::after). Для таких случаев используют проверку стилей родительского элемента:

cy.get('#tooltip')
  .should('have.css', 'opacity', '1')
  .and('be.visible');

Практические рекомендации

  • Проверять видимость перед взаимодействием: элементы, которые не видимы, не могут быть кликнуты или заполнены.
  • Различать существование в DOM и видимость: это помогает избежать ложных срабатываний тестов.
  • Использовать методы прокрутки и таймауты для динамически появляющихся элементов.
  • Комбинировать проверки видимости с проверкой атрибутов и состояния активности для более точной валидации интерфейса.

Эффективная проверка видимости элементов обеспечивает стабильность тестов и точное соответствие поведения приложения ожиданиям пользователя.

Оглавление