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

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

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

Cypress использует цепочку команд, где каждая команда автоматически ожидает завершения предыдущей. Для проверки видимости и существования применяются команды:

  • cy.get(selector) — выбирает элемент по CSS-селектору.
  • should('exist') — проверяет, что элемент присутствует в DOM.
  • should('not.exist') — проверяет отсутствие элемента.
  • should('be.visible') — проверяет, что элемент видим пользователю.
  • should('not.be.visible') — проверяет, что элемент скрыт.

Пример:

cy.get('.login-button').should('exist').and('be.visible');
cy.get('#popup').should('not.exist');

Важно: Cypress автоматически ждет появления элемента до истечения таймаута, поэтому нет необходимости писать явные задержки (wait) для большинства случаев.

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

Для интерактивных элементов важна проверка их состояния: активны ли они для клика, доступны ли для ввода и т. д.

  • should('be.enabled') — проверяет, что элемент доступен для взаимодействия.
  • should('be.disabled') — проверяет, что элемент заблокирован.
  • should('be.checked') — для чекбоксов и радио-кнопок, проверяет, что они выбраны.
  • should('not.be.checked') — проверка, что элемент не выбран.

Пример:

cy.get('#submit-button').should('be.enabled');
cy.get('#terms-checkbox').should('not.be.checked');

Для сложных случаев можно комбинировать проверки:

cy.get('#email-input')
  .should('be.visible')
  .and('be.enabled')
  .type('test@example.com')
  .should('have.value', 'test@example.com');

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

Cypress позволяет проверять текст напрямую через should('have.text', ...) или should('contain', ...). Отличие:

  • have.text — строгая проверка текста, полностью совпадающего с содержимым элемента.
  • contain — проверка наличия подстроки в тексте элемента.

Примеры:

cy.get('h1').should('have.text', 'Добро пожаловать');
cy.get('.notification').should('contain', 'успешно сохранено');

Проверка атрибутов и свойств элементов

Атрибуты элементов можно проверять через should('have.attr', 'attribute', 'value') или should('have.class', 'className'). Это полезно для валидации состояния элементов, влияющих на UI.

Примеры:

cy.get('#profile-link')
  .should('have.attr', 'href', '/profile')
  .and('have.class', 'active');

Для динамических атрибутов можно использовать частичное совпадение:

cy.get('img.logo').should('have.attr', 'src').and('include', 'logo.png');

Проверка CSS-свойств и стилей

Иногда требуется убедиться, что элемент отображается с правильными стилями:

cy.get('.error-message')
  .should('be.visible')
  .and('have.css', 'color', 'rgb(255, 0, 0)');

Важно помнить, что Cypress возвращает цвета в формате rgb() и размеры в пикселях (px).

Проверка состояний после взаимодействий

Cypress позволяет проверять состояние элементов до и после действий пользователя. Например, после клика или ввода текста:

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

cy.get('#username').type('admin');
cy.get('#username').should('have.value', 'admin');

Такой подход гарантирует, что изменения в DOM происходят корректно.

Асинхронные изменения и ожидания состояния

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

cy.get('#load-more').click();
cy.get('.item').should('have.length.greaterThan', 10);

Использование should с условием have.length.greaterThan позволяет дождаться обновления DOM без явных пауз.

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

Для форм проверка состояния элементов особенно важна:

  • Поля ввода (input, textarea) — проверка значения через should('have.value', ...).
  • Чекбоксы и радио-кнопки — should('be.checked') или should('not.be.checked').
  • Кнопки отправки — should('be.enabled') или should('be.disabled') в зависимости от валидации формы.

Пример комплексной проверки формы:

cy.get('#login-form').within(() => {
  cy.get('#email').type('user@example.com').should('have.value', 'user@example.com');
  cy.get('#password').type('password123');
  cy.get('#remember-me').check().should('be.checked');
  cy.get('#submit').should('be.enabled').click();
});

Использование кастомных команд для проверки состояний

Для уменьшения дублирования и повышения читаемости тестов можно создавать кастомные команды:

Cypress.Commands.add('verifyVisibleAndEnabled', (selector) => {
  cy.get(selector).should('be.visible').and('be.enabled');
});

// Использование
cy.verifyVisibleAndEnabled('#submit-button');

Это особенно полезно для проектов с большим количеством повторяющихся проверок.

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

Оглавление