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


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

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


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



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

[Перевод] Современный CSS для динозавров

— Двигать пиксели в CSS и так было трудно! А теперь мне говорят, насколько круто использовать несемантические названия классов, встроенные стили в HTML и даже писать стили CSS на JavaScript! [Вставь... читать далее

[Перевод] 11 вещей которые я узнал, читая спецификацию flexbox

Я всегда считал, что с flexbox довольно легко работать — глоток свежего воздуха после стольких лет float'ов и clearfix'ов. Правда недавно я обнаружил что борюсь с ним; что-то растягивалось,... читать далее

Одна компания – один сайт?

Часто сталкиваюсь с ситуацией, когда фирмы имеют два и более сайтов. По разным причинам. У одних кроме нового имеется «рудиментарный» интернет-ресурс, к которому никто не помнит логинов-паролей, у... читать далее

Модульный CSS: — Инструментарий, который мы имеем сейчас в арсенале — это просто сказка

Инструментарий, который мы имеем сейчас в арсенале — это просто сказка! Андрей Оконечников, разработчик с 15-летним стажем, из которых пользовательским интерфейсам было отдано более десяти, Андрей... читать далее

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

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

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

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

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


@

  • 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

Архив сайта

Реклама на сайте Мотоблоки в костроме цены сельхозтехника мотоблок в костроме.