[Перевод] Тестирование вёрстки на визуальные регрессии с помощью PhantomCSS


Работа с чужим кодом — одна из распространенных и сложных проблем, с которыми мне приходилось сталкиваться в своей работе. Почти в каждом случае предыдущий разработчик писал код не так, как бы мне этого хотелось. И такие ситуации возникают довольно часто. Не каждый клиент имеет потребность, желание или бюджет переписывать весь проект с нуля. Недавно наша команда получила код от нового клиента, и нам было поручено после небольшого рефакторинга быстро переходить к реализации нового функционала. Мы понимали, что могли бы улучшить код, перенеся клиентские стили на Sass, и это упростило бы нам поддержку в будущем. С другой стороны, мы могли просто переименовать файлы и включить их в один прекомпилированный css (без какого-либо рефакторинга). Но для улучшения кода было бы хорошо порефакторить стили. Эта работа более затратная, но в будущем себя бы окупила. И, что самое важное — это позволило бы нам работать быстрее, с большей уверенностью что мы что-то не сломаем. Раньше я рассматривал такие изменения как большие риски. В конце концов, C в CSS это каскадирование, где порядок абсолютно важен. Реструктуризация нескольких стилей означает изменение порядка, что, естественно, приводит к большому риску что-то сломать. В результате, мы должны были либо дополнительно тестировать наши изменения вручную, либо выставлять такой счет заказчику, который сразу бы отпугивал его своей стоимостью. На этот раз было решено построить визуально регрессионный набор тестов. Читать дальше →

 Источник: Уроки CSS на Хабрахабре


Уважаемые посетители,
Если Вы хотите оставить заказ на разработку сайта или получить предварительную консультацию воспользуйтесь формой по ссылке ниже.
Обратная связь
Наш специалист ответит вам в течении суток.



Похожие публикации

Рентабельность веб разработки

Статья опубликованная сегодня на хабрахабре, местами противоречивая, но в целом очень полезная для начинающих веб-разработчиков и их руководства. Наверняка, многие руководители веб-студий согласятся... читать далее

Каскадные Таблицы Стилей / [Ссылка] Frame: Фреймворк нового поколения

После заевшегося 960.gs и Blueprint, захотелось чего то нового. Долго и упорно насиловал гугл, наткнулся на помесь того, что мне и было нужно. Смесь довольно интересная, реализует концепты... читать далее

Web-разработка / альтернатива HTML5 прямо сейчас

Пока все обсуждают HTML5 я тут пошевелил извилинами и придумал, в общем-то, тривиальную, но полезную концепцию и решение всех ваших проблем с языками разметки. Оно работает уже сейчас в Mozilla,... читать далее

Методичка по работе с клиентами. Для начинающих менеджеров веб-студий

(2008 год, письмо старшего менеджера веб-студии — младшему) ( профи вряд ли найдут что-то новое, молодым будет интересно) Привет. Вот краткая инструкция, основанная на личном опыте. Так сказать,... читать далее

Web-разработка / Странное ограничение IE на количество внешних CSS

Разрабатывая проект наткнулся на странный глюк в IE. Некоторые стили просто не применялись к странице. Т.к. проект большой и стилей много, на этапе разработки CSS был разбит на много файлов для... читать далее

Пассивный доход студии. Поддержка сайта.

Нет ничего лучше пассивного дохода, все это знают! Разработка сайта — проект, это одно. Бюджет относительно высокий, но и трудозатраты значительные. Намного интересенее после завершения разработки... читать далее

Прокомментировать


@

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent

Архив сайта

Реклама на сайте