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

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

Метод getCssValue

Основной метод для получения CSS-свойств элемента — getCssValue. Он вызывается на объекте ElementFinder и возвращает значение конкретного CSS-свойства в виде строки.

let element = element(by.css('.button-primary'));
let backgroundColor = await element.getCssValue('background-color');
console.log(backgroundColor); // Например: 'rgba(0, 123, 255, 1)'

Ключевые моменты работы с getCssValue:

  • Метод возвращает только одно свойство за вызов. Для получения нескольких свойств необходимо вызвать его несколько раз.
  • Значения возвращаются в формате, который браузер использует по умолчанию, чаще всего это px для размеров и rgba для цветов.
  • Метод поддерживает все стандартные CSS-свойства, включая font-size, color, margin, padding, border и т.д.

Получение числовых значений

CSS-свойства часто возвращаются как строки с единицами ('16px', '1.5em'). Для тестов, где важны числовые значения, необходимо преобразовывать строки в числа:

let fontSize = await element.getCssValue('font-size'); // '16px'
let numericFontSize = parseFloat(fontSize); // 16

Это важно для сравнений размеров или вычислений в тестах.

Цвета и их форматирование

Цвета могут возвращаться в различных форматах: rgb, rgba, hex. Для точного сравнения удобно приводить их к единому формату. Например, библиотека tinycolor2 позволяет конвертировать любые CSS-цвета в один формат:

const tinycolor = require('tinycolor2');

let color = await element.getCssValue('color'); // 'rgba(0, 0, 0, 1)'
let hexColor = tinycolor(color).toHexString(); // '#000000'

Асинхронность и ожидания

Все операции с getCssValue являются асинхронными, так как выполняются через WebDriver. Для корректной работы рекомендуется использовать async/await.

it('должен проверить цвет кнопки', async () => {
    let button = element(by.css('.submit-btn'));
    let color = await button.getCssValue('color');
    expect(color).toBe('rgba(255, 255, 255, 1)');
});

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

let EC = protractor.ExpectedConditions;
let button = element(by.css('.submit-btn'));

await browser.wait(EC.visibilityOf(button), 5000);
let background = await button.getCssValue('background-color');

Практическое использование

  1. Проверка состояний элементов: изменение цвета кнопки при наведении или клике.
  2. Сравнение с дизайнерскими макетами: проверка размеров, отступов, шрифтов и цвета текста.
  3. Тестирование динамических стилей: изменения классов через Angular и CSS-анимации.

Ограничения

  • getCssValue возвращает вычисленное значение свойства, а не то, что указано в CSS-файле.
  • Не все свойства могут быть получены одинаково во всех браузерах; цвета и шрифты чаще всего требуют нормализации.
  • Некоторые сложные свойства, например transform или animation, возвращаются в виде строки, которую нужно дополнительно парсить.

Советы по использованию

  • Для повторного использования удобно создавать обертки или функции, которые сразу возвращают нужный формат значения:
async function getFontSizeInPx(elem) {
    let size = await elem.getCssValue('font-size');
    return parseFloat(size);
}
  • Использование ExpectedConditions для ожидания изменений стилей делает тесты более стабильными.
  • Для визуальных тестов лучше комбинировать getCssValue с проверкой наличия классов, так как классы часто отвечают за изменения стилей.

Получение CSS-свойств с помощью Protractor позволяет проверять внешний вид элементов на точном уровне, обеспечивая надежность тестирования визуальной части приложения.

Оглавление