Модульное тестирование CSS
Несколько быстрых поисков обнаружили, что я, очевидно, не первый человек, который подумал: "Могу ли я выполнить модульный тест моего CSS?",
Интересно, кто-нибудь здесь успешно прошел модульное тестирование CSS? Если вы попробовали и потерпели неудачу, или у вас есть свои собственные теории, скажите, пожалуйста, почему это (по-видимому) еще не было сделано?
9 ответов
Вы можете использовать Selenium, который является фреймворком для веб-тестирования. Таким образом, вы можете утверждать, какие стили должны применяться к элементам в DOM и т. Д.
В противном случае, не уверен, какова ваша цель. Модульное тестирование, как следует из названия, тестирует "Units", и для меня это имеет смысл только с кодом, а не css.
Существует новая библиотека модульного тестирования css под названием Quixote. Вместо того, чтобы сравнивать изображения визуально, он смотрит на код. В отличие от Selenium, вам не нужно утверждать определенные стили, вместо этого вы можете сказать что-то вроде "он должен быть центрирован" или "левая сторона должна быть на 10 пикселей дальше справа от этого другого элемента".
Я не понимаю, почему мы не могли или не должны модульно тестировать CSS. Вот сценарий, который я имею в виду:
У меня есть CSS-фреймворк, состоящий из нескольких модульных CSS-файлов и использующий 5 моих сайтов.
Ex : base.css / form.css / article.css etc.
Представьте, что я вносил изменения в base.css для требования, относящегося только к сайту № 1 => Я могу нарушить стиль сайта № 2 без него.
Модульный тест CSS был бы еще более уместным, если бы мой CSS-фреймворк был построен поверх LESS или же SASS: изменение в макросе может сломать все стили.,
Я думаю, что было бы возможно в браузере (на стороне клиента) "модульное тестирование" CSS. Это больше похоже на автоматическую проверку, чем на модульное тестирование:
- Оцените окончательные условия атрибута CSS, которые мы хотели бы сохранить для определенного класса CSS или идентификатора (результат).
- Нам требуется тестовый документ HTML для визуализации статического содержимого и CSS. Все элементы должны быть включены в контент в отдельных контейнерах.
- После рендеринга проверьте с помощью 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")
Вы можете использовать PhantomCSS для автоматического визуального сравнения. И затем вы можете создать страницу модульного тестирования модуля CSS, которая загружает только базовые стили CSS и отображает компонент во всех его состояниях, но не загружает CSS из других компонентов. И тогда вы можете сравнить его с полным CSS-файлом со всеми загруженными модулями.
Мы создали модульные тесты для большого проекта с большим пользовательским интерфейсом, и он работал великолепно! Это было намного проще, чем кажется.
Возьмите простые инструменты, такие как getBoundingClientRectили жеgetComputedStyle, соедините его с гиперскриптом, чтобы создать быстрые временные DOM-деревья, и все готово. Мы написали tape-css, чтобы уменьшить шаблон при тестировании с помощью ленты, но стек будет аналогичным при любой тестовой настройке.
Вчера я опубликовал подробный пост в блоге с простым руководством и примерами из жизни о нашем новом рабочем процессе и о том, как он повысил нашу производительность: как модульные тесты CSS помогли нам быстро двигаться.
Есть интересный подход, который я никогда не пробовал, но может сработать:
- Вы создаете образцы страниц (например, https://getboostrap.com/), содержащие все компоненты и т. Д.
- Вы тестируете с Хаксли
И вуаля:)
Модульное тестирование CSS, зависит от вашей среды и вашего подхода к CSS.
Вопросы задавать:
Тестирование для данного класса в вашем CSS, например, Assert.IsNotNull
Получить свойство CSS и проверить его атрибуты.
Во-первых, я бы удостоверился, что если файл CSS существует, то ищите определенный класс, а затем ищите атрибуты внутри указанного класса.
Я испытал пропущенный класс во время моего регрессионного теста и сумел исправить это немедленно из предыдущих результатов.
В настоящее время понимание того, работает ли CSS правильно или нет, определяется визуально. Пока что лучший способ проверить это - установить несколько браузеров на свой компьютер разработчика. Начните использовать такие инструменты, как Firebug и Web Developer в Firefox, и забудьте о модульном тестировании CSS, пока он не станет завершенным по Тьюрингу.:-)