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

Question

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

Интересно, кто-нибудь здесь успешно прошел модульное тестирование CSS? Если вы попробовали и потерпели неудачу, или у вас есть свои собственные теории, скажите, пожалуйста, почему это (по-видимому) еще не сделано?

Answer 1

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

Селен

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

Answer 2

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

Answer 3

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

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

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

Answer 4

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

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

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

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

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

Answer 5

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

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

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

Answer 6

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

Answer 7

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

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

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

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

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

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

Answer 8

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

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

Et voilà:)

Answer 9

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