Автоматизированное тестирование интерфейсного кодирования CSS и HTML

Question

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

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

1. Есть ли у кого-нибудь существующие методики или предложения для автоматического тестирования CSS или HTML, особенно в отношении кросс-браузерной совместимости?

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

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

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

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

***** edit *****

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

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/

Answer 1

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

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

Это позволяет вам проверять содержимое DOM и т. Д. По отношению к ожидаемому выводу в любой точке сценария.

Answer 2

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

https://github.com/bfirsh/needle

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

Answer 3

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

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

Answer 4

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

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

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

Answer 5

Этих инструментов, возможно, не существовало на момент публикации ОП, но о них стоит упомянуть:

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