Я - разработчик интерфейсов, кодирующий CSS, HTML и Javascript (в этом порядке), и большая часть моей работы - это дизайн. Хотя качество проектов, которые я создаю с помощью CSS, является субъективным, большая часть кодирования является чисто функциональной/макетной, и меня интересует любой способ автоматизации тестирования моей страницы.
Мой вопрос можно разделить на две части
Есть ли у кого-нибудь существующие методы или предложения для автоматическое тестирование CSS или HTML, особенно с учетом совместимость с несколькими браузерами?
Поскольку CSS можно грубо разделить в свойствах, управляющих компоновкой и те, кто контролирует дизайн, автоматическое тестирование макет (невозможно автоматически и цвет правильный, например)? Если да, то могут быть подобраны значения CSS для логических приемочных испытаний?
Вот мои первоначальные примеры булевых значений макета, которые можно было протестировать - должны быть другие?
Спасибо за вашу помощь. Третья часть вопроса, конечно, "Я трачу свое время на этот маршрут?".
***** изменить *****
Я нашел эту статью, которая задает те же самые вопросы, которые я задал, но более подробно и, возможно, немного более красноречиво.
http://www.morethanseven.net/2008/10/13/unit-testing-css-looking-solution/
Перемещение вперед Я пытаюсь изолировать некоторые примеры из моей работы, когда только CSS вызвал функциональные ошибки, однако те, которые я нашел до сих пор, являются ошибками с JS и CSS вместе взятыми. Я все равно хотел бы автоматически протестировать эти ошибки, но понимаю, что с использованием javascript это выходит за рамки моего первоначального вопроса.
***** edit 2 *****
С тех пор я писал о том, как я решил решить эту проблему, доступную здесь:
Посмотрите Selenium - это автоматический инструмент для тестирования на основе браузера. Я думаю, это то, что вы ищете.
Он работает со всеми браузерами (у него есть IDE в Firefox для создания тестовых скриптов, но сами скрипты можно запускать в любом браузере)
Он позволяет вам проверять содержимое DOM и т.д. на ожидаемый вывод в любой момент во время script.
Если вы ищете инструмент, созданный для тестирования регрессии, выполните следующие действия:
https://github.com/bfirsh/needle
В основном это скриншоты выбранных вами частей (проверьте их пример) и сравнивает их. Если они слишком отличаются друг от друга, тест не удастся. Он использует Selenium, поэтому вы можете также проверить другие утверждения, такие как z-indizes, font-size и т.д.
w3 validation и Лаборатории Adobe Browser - лучшее решение, которое я могу предоставить для этой проблемы. Назад, когда я делал макет и дизайн пользовательского интерфейса (read = cutup monkey), были моими двумя лучшими друзьями.
На самом деле нет способа автоматизировать тестирование, как что-то выглядит. Итак, вы вернулись к визуальному осмотру всего, что вам нужно, или краудсорсинг (или инсорсинг) тестера, чтобы сделать то же самое для вас. Это не забавно, но это держит нас в обратном направлении в бизнесе.
Хорошей новостью является то, что многие браузеры совместно используют механизмы рендеринга. Итак, если вы правильно протестируете Chrome, вы можете поспорить, что в Safari все будет хорошо. Проверьте в Firefox и IE, и у вас есть 90% ваших проблем. Затем определите, насколько вы извращаете вас (или ваш босс) и будете соответствующим образом тестировать.
Вы также можете проверить Nighwatch.js
Nightwatch.js - это простое в использовании решение для тестирования Node.js на основе сквозного решения (E2E) для браузеров и веб-сайтов. Он использует мощный W3C WebDriver API для выполнения команд и утверждений на элементах DOM.
Эти инструменты, возможно, не существовали при публикации OP, но они заслуживают упоминания:
CasperJS, который использует PhantomJS https://ghostinspector.com/ (для автоматизации поездок) https://github.com/BBC-News/wraith (для скриншотов)