Модульное тестирование CSS

Вы можете использовать Selenium, фреймворк для веб-тестирования. Таким образом вы можете утверждать, какие стили будут применяться к элементам в DOM и т. д.

Селен

В противном случае не уверен, какова ваша цель. Модульное тестирование - это, как следует из названия, тестирование «модулей», и для меня это имеет смысл только с кодом, а не css.

В настоящее время понимание того, правильно ли работает CSS, определяется визуально. Пока что лучший способ проверить это - установить несколько браузеров на вашем компьютере разработчика. Начните использовать такие инструменты, как Firebug и Web Developer в Firefox, и забудьте о модульном тестировании CSS, пока оно не станет завершенным по Тьюрингу. :-)

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

Я не понимаю, почему мы не можем или не должны проводить модульное тестирование CSS. Вот сценарий, который я имею в виду:

У меня есть CSS-фреймворк, который состоит из нескольких модульных CSS-файлов и управляет 5 моими сайтами.

Ex : base.css / form.css / article.css etc.

Представьте, что я вношу изменения в base.css для требования, относящегося только к Сайту №1 => Я могу нарушить стиль Сайта №2 без него.

Модульный тест CSS был бы еще более уместным, если бы мой фреймворк CSS был построен на основе LESS или SASS: изменение макроса может нарушить все стили. .

Думаю, можно было бы в браузере (на стороне клиента) провести «модульное тестирование» CSS. Это было бы больше похоже на автоматическую проверку, чем на модульное тестирование:

1. Оцените окончательные условия атрибута CSS, которые мы хотели бы сохранить для определенного класса или идентификатора CSS (результат).
2. Нам нужен тестовый документ HTML для рендеринга статического содержимого и CSS. Все элементы должны быть включены в контент в отдельных контейнерах.
3. После рендеринга проверьте с помощью javascript конечные или результирующие конечные атрибуты выбранных целей и выведите несовпадающие элементы.

Пример модульного тестирования:

Селекторы DOM:

.test1
.test2
#test3

Это всегда должны быть последние атрибуты:

CSSAttribute1, CSSFinalValue1
CSSAttribute2, CSSFinalValue2
CSSAttribute3, CSSFinalValue3

Функция для установки правил тестирования в JS может быть:

addCSSUnitTest(".test1, .test2, #test3", "margin-left: 4px; font-size: 8px");

Затем мы проверяем, имеют ли элементы DOM эти final атрибуты.

Все делается на javascript после рендеринга. Но в любом случае это непрактично, потому что вам придется создать множество модульных тестов, которые значительно увеличат ваш код.

Также у вас всегда должен быть reset.css для кроссбраузерной «совместимости».

альтернатива будет обозначать классы CSS, которые, как вы знаете, должны сохранять все свои атрибуты. Создайте список селекторов DOM. Используйте jQuery для получения атрибутов класса CSS (непосредственно из класса CSS) и проверьте, сохраняются ли они в целевых элементах DOM. Этот последний метод можно почти полностью автоматизировать, но он потребует более сложной проверки JavaScript. Последний не будет проверять CSS на наличие селекторов идентификаторов (например, "# test3"), только классы (например, ".test1").

Есть интересный подход, который я никогда не пробовал, но может сработать:

1. Вы создаете образцы страниц (а-ля https://getboostrap.com) со всеми компонентами и т. д.
2. Вы тестируете с Хаксли

И вуаля :)

Есть новая библиотека модульного тестирования css под названием Дон Кихот. Вместо того, чтобы сравнивать изображения визуально, он смотрит на код. В отличие от Selenium, вам не нужно утверждать определенные стили, вместо этого вы можете сказать что-то вроде «он должен быть по центру» или «левая сторона должна быть на 10 пикселей правее этого другого элемента».

Мы настроили модульные тесты для большого проекта с тяжелым пользовательским интерфейсом, и он отлично сработал! К тому же это было намного проще, чем кажется.

Возьмите простые инструменты, такие как getBoundingClientRect или getComputedStyle, соедините их с гипертекст, чтобы быстро создать временные деревья DOM, и все готово. Мы написали лента-css, чтобы уменьшить количество шаблонов при тестировании с Лента, но стек будет аналогичным в любой тестовой установке.

Вчера я опубликовал подробный пост в блоге с простым руководством и живыми примерами нашего нового рабочего процесса и того, как он повысил нашу продуктивность: Как модульные тесты CSS помогли нам быстро развиваться.

Модульное тестирование CSS зависит от вашего фреймворка и вашего подхода к CSS.

Вопросы, которые нужно задать:

Тестирование заданного класса в вашем CSS например, Assert.IsNotNull

Получите свойство CSS и проверьте его атрибуты.

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

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