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

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

Получение CSS-свойства элемента

Для доступа к CSS-свойствам используется команда .should('have.css', property, value):

cy.get('.button-primary')
  .should('have.css', 'background-color', 'rgb(0, 123, 255)');
  • property — имя CSS-свойства в формате JavaScript (background-color, font-size, display и т.д.).
  • value — ожидаемое значение свойства. Для цветов чаще используется формат rgb() или rgba().

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

Проверка нескольких CSS-свойств одновременно

Для проверки нескольких свойств можно использовать цепочку .should():

cy.get('.card')
  .should('have.css', 'border-radius', '8px')
  .and('have.css', 'box-shadow', 'rgba(0, 0, 0, 0.15) 0px 4px 6px');

Также можно получить объект всех вычисленных стилей через .then():

cy.get('.header').then($el => {
  const color = $el.css('color');
  const fontWeight = $el.css('font-weight');
  expect(color).to.eq('rgb(33, 37, 41)');
  expect(fontWeight).to.eq('700');
});

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

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

Некоторые CSS-свойства влияют на видимость элемента: display, opacity, visibility. Cypress позволяет проверять эти свойства напрямую:

cy.get('.modal')
  .should('have.css', 'display', 'block')
  .and('have.css', 'opacity', '1');
  • display: none или opacity: 0 делает элемент невидимым, что может быть ключевым при тестировании модальных окон и выпадающих меню.
  • Также можно комбинировать с Cypress-командой .should('be.visible') для логической проверки видимости.

Сравнение размеров и позиционирования

CSS-свойства width, height, margin, padding, top, left играют важную роль в проверке макета:

cy.get('.banner').then($el => {
  const width = $el.width();
  const height = $el.height();
  expect(width).to.be.greaterThan(300);
  expect(height).to.eq(200);
});
  • Методы jQuery, такие как .width() и .height(), возвращают численные значения в пикселях.
  • Проверка отступов и позиционирования через .css() позволяет убедиться, что элементы выровнены корректно.

Работа с динамическими стилями

Для элементов с анимациями или интерактивными эффектами, такими как hover или focus, проверка CSS требует использования методов Cypress для эмуляции состояний:

cy.get('.nav-link')
  .trigger('mouseover')
  .should('have.css', 'color', 'rgb(255, 0, 0)');

cy.get('input')
  .focus()
  .should('have.css', 'border-color', 'rgb(0, 123, 255)');
  • trigger('event') позволяет активировать псевдоклассы CSS (:hover, :focus, :active).
  • После события можно проверить ожидаемые изменения в стиле элемента.

Тестирование адаптивного дизайна

Cypress поддерживает изменение размеров окна через команду .viewport():

cy.viewport(375, 667); // iPhone 6/7/8
cy.get('.menu').should('have.css', 'display', 'none');
  • Проверка CSS на разных разрешениях позволяет убедиться в корректной работе адаптивной верстки.
  • Сочетание .viewport() и проверки display или flex-direction эффективно для тестирования мобильной версии интерфейсов.

Проверка сложных свойств

Некоторые CSS-свойства, например transform, transition или box-shadow, имеют сложные значения. Для проверки их корректности применяется .then() с точным сравнением:

cy.get('.card')
  .then($el => {
    const transform = $el.css('transform');
    expect(transform).to.eq('matrix(1, 0, 0, 1, 0, 0)');
  });
  • Cypress возвращает свойства в формате, используемом браузером (matrix, rgba и т.д.).
  • Для анимаций можно проверять начальное и конечное состояние свойства с помощью таймаутов или ожиданий (cy.wait()).

Практические советы

  • Всегда учитывать наследуемость CSS-свойств.
  • Для цветов использовать единообразный формат (rgb() вместо hex), так как Cypress возвращает computed style.
  • Для сложных проверок лучше использовать .then() и jQuery-методы.
  • Проверка видимости и позиционирования должна сочетаться с проверкой функциональности элементов.
  • Для адаптивного тестирования менять viewport перед каждой проверкой и сбрасывать стили при необходимости.

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

Оглавление