Получение CSS свойств

WebdriverIO предоставляет мощные инструменты для взаимодействия с элементами веб-страницы и получения их свойств. Одной из ключевых возможностей является извлечение CSS свойств элементов, что особенно важно при проверке внешнего вида интерфейса, стилей и адаптивности страниц.

Основной метод: getCSSProperty

Метод getCSSProperty позволяет получить значение CSS свойства у выбранного элемента. Он возвращает объект с подробной информацией о свойстве, включая его значение, тип и дополнительные сведения.

Синтаксис:

const element = await $('селектор_элемента');
const cssValue = await element.getCSSProperty('название_свойства');
console.log(cssValue.value); // выводит текущее значение свойства

Пример:

const button = await $('#submit');
const backgroundColor = await button.getCSSProperty('background-color');
console.log(backgroundColor.value); // "rgba(0, 123, 255, 1)"

В данном примере извлекается цвет фона кнопки #submit. Возвращаемое значение всегда соответствует текущему рендерингу браузера, что позволяет тестировать реальные стили, а не только декларации в CSS-файлах.

Структура объекта CSS свойства

Объект, возвращаемый getCSSProperty, содержит следующие ключевые поля:

  • property: название CSS свойства (например, color, font-size).

  • value: строковое значение свойства, как его видит браузер.

  • parsed: объект с разобранным значением свойства:

    • type — тип значения (color, number, string, unit).
    • unit — единица измерения для числовых значений (px, %, em и т.д.).
    • value — числовое представление значения.
    • rgba — массив RGBA для цветовых свойств.

  • asset — информация об источнике свойства, если доступна.

Пример анализа цвета:

const header = await $('h1');
const color = await header.getCSSProperty('color');
console.log(color.parsed.hex); // "#ff0000"
console.log(color.parsed.rgba); // [255, 0, 0, 1]

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

Получение CSS свойств удобно при проверке:

  • Цветов элементов: color, background-color, border-color.
  • Шрифтов и размеров текста: font-size, font-weight, line-height.
  • Позиционирования и размеров: width, height, margin, padding.
  • Визуальных эффектов: box-shadow, opacity, transform.

Пример проверки стиля кнопки в тесте:

it('Кнопка должна быть синей с белым текстом', async () => {
    const button = await $('#submit');
    const bgColor = await button.getCSSProperty('background-color');
    const textColor = await button.getCSSProperty('color');

    expect(bgColor.parsed.hex).toBe('#007bff'); // проверка синего фона
    expect(textColor.parsed.hex).toBe('#ffffff'); // проверка белого текста
});

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

Иногда стили меняются при наведении курсора, фокусе или клике. Для проверки таких состояний можно использовать методы moveTo, click и другие действия перед вызовом getCSSProperty.

Пример проверки hover состояния:

const link = await $('a.nav-link');
await link.moveTo();
const hoverColor = await link.getCSSProperty('color');
console.log(hoverColor.parsed.hex);

Метод moveTo эмулирует наведение мыши на элемент, после чего извлекается актуальное CSS свойство в состоянии hover.

Отличия getCSSProperty от getAttribute('style')

getAttribute('style') возвращает только inline стили, определённые прямо в атрибуте style. getCSSProperty же получает вычисленное значение CSS, включая стили из внешних файлов, inline-атрибутов и наследуемые свойства. Поэтому для тестирования внешнего вида интерфейса всегда следует использовать getCSSProperty.

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

  1. Проверка единиц измерения: всегда учитывать, что браузеры могут возвращать px для всех размеров, даже если в CSS использовались em или %.
  2. Сравнение цветов: использовать parsed.hex или parsed.rgba для точного сравнения, избегая строкового сравнения.
  3. Динамические элементы: перед получением свойства убедиться, что элемент видим и готов к взаимодействию.
  4. Асинхронность: метод возвращает промис, поэтому необходимо использовать await внутри асинхронной функции.

Заключение по применению

Метод getCSSProperty в WebdriverIO является фундаментальным инструментом для визуального тестирования. Он позволяет получать точные вычисленные значения стилей, сравнивать их с ожидаемыми, проверять состояния hover, focus и других взаимодействий. Этот подход обеспечивает стабильность и точность автоматических тестов интерфейса, позволяя выявлять ошибки верстки и несоответствия дизайну на ранних этапах.

Оглавление