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

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

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

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

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

представьте, что я делаю изменения в базу.css для требования, применяемого только к сайту #1 => я могу нарушить стиль сайта #2 без него.

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

Я думаю, что это было бы возможно в браузере (на стороне клиента), чтобы "модульный тест" 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 эти конечные атрибуты.

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

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

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

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

мы настроили модульные тесты на большой, UI-тяжелый проект, и он прекрасно работал! Это было также намного проще, чем кажется.

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

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

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

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

вуаля :)

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

вопросы :

тестирование для данного класса в вашем CSS например, утверждать.IsNotNull

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

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

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

в настоящее время понимание того, работает ли CSS правильно или нет, визуально определяется. До сих пор лучший способ проверить это установить несколько браузеров на вашем компьютере dev. Начните использовать такие инструменты, как Firebug и веб-разработчик в Firefox, и забудьте о модульном тестировании CSS, пока он не станет Turing complete. : -)