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

Question

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

Я думал об использовании jQuery для вычисления вычисленных значений и сравнения их с ожидаемыми значениями.Например, у меня может быть <h1>This is a header</h1>, и теоретически я должен знать, что это размер шрифта, цвет, вес шрифта и т. Д. Я могу использовать jQuery, чтобы проверить, что это действительно тот размер шрифта, и если нет, вернутьошибка.

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

Мой вопрос - это осуществимая идея?Каковы основные проблемы в реализации чего-то подобного?Кто-нибудь делал что-то подобное раньше?

РЕДАКТИРОВАТЬ: Любые мысли о том, как на самом деле сделать ошибки также приветствуются.Я подумал об использовании файла JavaScript в заголовке соответствующей страницы, а затем о добавлении контента на страницу, что-то вроде версии Firebug на странице.Тем не менее, я беспокоюсь, что может повлиять на визуализацию страницы.В качестве альтернативы, я мог бы войти в консоль, но я не думаю, что IE6 имеет надлежащую консоль, и открытие каждой консоли каждого браузера для каждой тестируемой страницы также кажется немного раздражающим.

Answer 1

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

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

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

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

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

Answer 2

Я отправил один и тот же ответ на похожий / похожий вопрос: Автоматизированное тестирование интерфейсного кодирования CSS и HTML

---

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

https://github.com/bfirsh/needle

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

Answer 3

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

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

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

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

Answer 4

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

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

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

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

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

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

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

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

---

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