Есть ли способ тестирования CSS?

Ответ 1

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

Приведённые вами примеры не относятся к типам вещей, о которых обычно беспокоят, но в основном относятся к позиционированию и коробке. Если я скажу h1{color:red}, я уверен, что он будет красным в IE.

Получение вычисленных значений на самом деле не поможет выяснить, как они отображаются, это на самом деле похоже на большую работу, чем просто запуск IEtester. С небольшим опытом вы быстро узнаете, какие типы вещей вам нужны для проверки совместимости с браузером, а также с улучшением и улучшением браузеров становится все меньше и меньше проблем.

Один метод, который может помочь: Дизайн в IE. Да, это отстойно, но обычно вы обнаружите, что когда вы его работаете в IE7, а затем тестируете в FF, IE8 или IE6 - он довольно близок или различия являются легким решением по сравнению с тестированием в Chrome, а затем двойным проверка в IE7. Я знаю, что "кросс-браузер" инкапсулирует больше, чем просто IE, но не позволяйте себе себя; IE - это браузер проблем и наиболее широко используемый.

В заключение: если бы был инструмент для этого, он должен был быть ДЕЙСТВИТЕЛЬНО УДИВИТЕЛЬНЫМ, чтобы я не мог проверить подлинный браузер. Я думаю, что люди указывают на Selenium как решение этого.

Ответ 2

hmmm... Пусть аудитория диктует, что вы тестируете, и делайте эту часть своих отношений с клиентом.

Каковы ваши источники трафика? Просмотр журналов, аналитики и т.д. Мне, честно говоря, все равно, как это выглядит в Opera (например), если традиционно Opera эквивалентна 1% общего трафика - если только браузер не работает, но вы понимаете, пот немногие, что имеет значение, а не каждый доступный.

С одной стороны, я думаю, что идея довольно крутая, но я бы не стал ей доверять - она ​​была бы устаревшей через 2 месяца после каждого обновления (что немного саркастично, но все же)... Я бы закончил глядя собственными глазами. Вся идея вроде звучит как автоматический лак для обуви или что-то еще - довольно спорная для меня. Кроме того, "я тестировал его с помощью" Kick @cSS "!!" никогда не вытащит вас из горячей воды с клиентом.

Если вы следите за стандартами, тестирование и отладка, как правило, довольно быстро (пока вы тестируете, когда идете). Не заворачивайте свои элементы блока с помощью встроенных элементов и т.д., Чтобы обеспечить бесперебойную работу вещей, и все они довольны и соответствуют друг другу.

Ответ 3

Я отправил тот же ответ на соответствующий/подобный вопрос: Автоматическое тестирование кодирования CSS и HTML переднего плана

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

https://github.com/bfirsh/needle

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

Ответ 4

Преимущество этого в том, что мне не нужно сидеть с контрольным списком, проходящим через каждый браузер - "Этот заголовок полужирный? Подчеркиваются ли эти ссылки? Этот столбец шириной 110 пикселей? - каждый раз, когда я делаю изменение CSS.

Конечно, но секрет в том, что вам не нужно это делать сейчас.

Если этот заголовок не выделен жирным шрифтом, то никто не умрет или не потеряет деньги. Кто-то заметит *, и он будет исправлен с минимальными усилиями.

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

Объем усилий, необходимых вам для того, чтобы получить что-то вроде этой работы, является непропорциональным как сложностью получения кода (что не так много), так и последствия неправильного кода (что тоже не так).

Более конкретно, как бы вы определили те типы тестов, которые вы описываете? Вам нужно сообщить тест-бегуну, какие элементы он должен проверить, и каков должен быть каждый стиль элемента. Это то, что делает CSS. Возможно, ваши определения, для которых проверяемые элементы могут быть гораздо более конкретными для ваших селекторов CSS (например, выберите каждый элемент на каждой странице отдельно), но это будет очень трудоемким, как для записи, так и для сохранения.

(Чтобы подробно рассказать о необходимых усилиях: для анализов рендеринга кросс-браузера, которые вы описываете, вам нужно запустить фактические веб-браузеры (используя что-то вроде Selenium), что означает, что вам нужно несколько компьютеров (для IE), все из которых имеют чтобы быть доступным для вашей структуры тестирования. Это было бы кошмаром, чтобы работать лично, и очень вычислительно интенсивно предлагать как услугу - просто спросите парней, которые запускают Litmus.)

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

* (Или, как я уже сталкивался чаще, никто не заметит, и вы потратите несколько секунд, размышляя о бессмысленности своего профессионального существования, прежде чем достигнуть третьего пива утра.)