Автоматическое тестирование кодирования CSS и HTML

Я - разработчик интерфейсов, кодирующий CSS, HTML и Javascript (в этом порядке), и большая часть моей работы - это дизайн. Хотя качество проектов, которые я создаю с помощью CSS, является субъективным, большая часть кодирования является чисто функциональной/макетной, и меня интересует любой способ автоматизации тестирования моей страницы.

Мой вопрос можно разделить на две части

Есть ли у кого-нибудь существующие методы или предложения для автоматическое тестирование CSS или HTML, особенно с учетом совместимость с несколькими браузерами?
Поскольку CSS можно грубо разделить в свойствах, управляющих компоновкой и те, кто контролирует дизайн, автоматическое тестирование макет (невозможно автоматически и цвет правильный, например)? Если да, то могут быть подобраны значения CSS для логических приемочных испытаний?

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

Появляется ли всплывающее окно над другим контентом (z-index)
Дает ли нижний колонтитул весь другой контент (float)

Спасибо за вашу помощь. Третья часть вопроса, конечно, "Я трачу свое время на этот маршрут?".

***** изменить *****

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

http://www.morethanseven.net/2008/10/13/unit-testing-css-looking-solution/

Перемещение вперед Я пытаюсь изолировать некоторые примеры из моей работы, когда только CSS вызвал функциональные ошибки, однако те, которые я нашел до сих пор, являются ошибками с JS и CSS вместе взятыми. Я все равно хотел бы автоматически протестировать эти ошибки, но понимаю, что с использованием javascript это выходит за рамки моего первоначального вопроса.

***** edit 2 *****

С тех пор я писал о том, как я решил решить эту проблему, доступную здесь:

http://blog.ajcw.com/2010/12/automated-css-testing-or-how-one-css-coder-is-now-responsible-for-breaking-%E2%80%93-and-fixing-%E2%80%93-the-build/

Ответ 1

Посмотрите Selenium - это автоматический инструмент для тестирования на основе браузера. Я думаю, это то, что вы ищете.

Он работает со всеми браузерами (у него есть IDE в Firefox для создания тестовых скриптов, но сами скрипты можно запускать в любом браузере)

Он позволяет вам проверять содержимое DOM и т.д. на ожидаемый вывод в любой момент во время script.

Ответ 2

Если вы ищете инструмент, созданный для тестирования регрессии, выполните следующие действия:

https://github.com/bfirsh/needle

В основном это скриншоты выбранных вами частей (проверьте их пример) и сравнивает их. Если они слишком отличаются друг от друга, тест не удастся. Он использует Selenium, поэтому вы можете также проверить другие утверждения, такие как z-indizes, font-size и т.д.

Ответ 3

w3 validation и Лаборатории Adobe Browser - лучшее решение, которое я могу предоставить для этой проблемы. Назад, когда я делал макет и дизайн пользовательского интерфейса (read = cutup monkey), были моими двумя лучшими друзьями.

На самом деле нет способа автоматизировать тестирование, как что-то выглядит. Итак, вы вернулись к визуальному осмотру всего, что вам нужно, или краудсорсинг (или инсорсинг) тестера, чтобы сделать то же самое для вас. Это не забавно, но это держит нас в обратном направлении в бизнесе.

Хорошей новостью является то, что многие браузеры совместно используют механизмы рендеринга. Итак, если вы правильно протестируете Chrome, вы можете поспорить, что в Safari все будет хорошо. Проверьте в Firefox и IE, и у вас есть 90% ваших проблем. Затем определите, насколько вы извращаете вас (или ваш босс) и будете соответствующим образом тестировать.

Ответ 4

Вы также можете проверить Nighwatch.js

Nightwatch.js - это простое в использовании решение для тестирования Node.js на основе сквозного решения (E2E) для браузеров и веб-сайтов. Он использует мощный W3C WebDriver API для выполнения команд и утверждений на элементах DOM.

Ответ 5

Эти инструменты, возможно, не существовали при публикации OP, но они заслуживают упоминания:

CasperJS, который использует PhantomJS https://ghostinspector.com/ (для автоматизации поездок) https://github.com/BBC-News/wraith (для скриншотов)