Добрый день, столкнулся с задачей, как тестировать верстку? интеграционные тесты не подходят, так как при выполнении каких-то проверок мы ищем элемент просто по селектору, и даже если весь дом сжать в 1 гипотетическую точку, тесты отработают нормально. Так вот, кто сталкивался с подобной задачей? какие инструменты для этого использовали? У кого вообще какая инфа есть?
Пока раскопал только Gemini
,
Извините, если этот вопрос не в тему, но как будет “верстка” по-английски? У меня русская компьютерная терминология хромает, а слово встречается часто.
обычно именно слово “верстка” и используют, наравне с фронт-энд, бек-энд. Можно конечно говорить…лицевая часть, задняя часть) но…будет замешательство. А вообще, верстальщиков называют так же дизайнерами интерфейсов или архитекторами интерфейсов…можно как-то в эту степь подумать))
Прямого аналога я не встречал. В зависимости от контекста использую
Не понятен вопрос, тестирование на предмет чего? Кроссбраузерность, адаптивность или имеется что-то другое ввиду?
соответствие макету. Размеров, цветов, форм, шрифтов и т.д.
С опытом глаз будет видеть и без инструментов, а сами инструменты:
Шрифты - http://www.fontface.ninja/
Размеры - https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=ru еще можно линейкой вымерять PicPick - All-in-one Graphic Design, Best Screen Capture and Recording Software, Image Editor, Color Picker, Pixel Ruler and More
А с цветами думаю проблем не будет - инспектор поможет
У нас верстка - markup, верстальщик - markup-developer. Как-то так))
Соответствие макету проверяю накладыванием дизайна на сверстанную страницу + полупрозрачность окон. Цвета и шрифты берутся из ПСД-файла, проверяются, соответственно, тоже по нему. В браузере через фаербаг это все видно.
Линейку у хрома использовал раньше плагин Page Ruler. Сейчас в основном использую инспектор элементов F12. справа вверху есть шестеренка settings - там можно поиграть с настройками, Есть там пункт Elements, галку ставишь в Show rulers. А. если в винде надо линейку, запись видео, Picker - пользуй faststone
плагин для хрома ColorPick
Также есть примочки которые облегчают жись.
Сделай себе закладурки *:
инструмент дизайнера в броузере, ценная штука - настраиваемая сетка.
javascript:function fnStartDesign(sUrl) {var nScript = document.createElement(‘script’);nScript.setAttribute(‘language’,‘JavaScript’);nScript.setAttribute(‘src’,sUrl);document.body.appendChild(nScript);}fnStartDesign(‘//www.sprymedia.co.uk/design/design/media/js/design-loader.js’);
проверка подключенного JQ и версия егоже
javascript:(function(){var msg;if (window.jQuery) {msg = 'You are running jQuery version: ’ + jQuery.fn.jquery;} else {msg = ‘jQuery is not installed’;}alert(msg);})();;
VisualEvent2
javascript:(function() {var protocol = window.location.protocol === ‘file:’ ?‘http:’ : ‘’;var url = protocol+‘//www.sprymedia.co.uk/VisualEvent/VisualEvent_Loader.js’;if( typeof VisualEvent!=‘undefined’ ) {if ( VisualEvent.instance !== null ) {VisualEvent.close();}else {new VisualEvent();}}else {var n=document.createElement(‘script’);n.setAttribute(‘language’,‘JavaScript’);n.setAttribute(‘src’,url+‘?rand=’+new Date().getTime());document.body.appendChild(n);}})();
закладука * - сохранить закладку, вместо адреса скрипт
не знаю что поменялось -всегда проверяли верстку V3C
для CSS
для HTML
имелось ввиду автотестирование, что бы время от времени пробегало по приложению, сверяло верстку, например с макетом ( эталоном ) и либо проходило тест, либо падало.
Онлайн сервисы, они присылают скриншоты проверок кроссплатформенности и адаптивноста, но что бы сверяло по дизайну такого не встечал
что-то ближе уже…по сути, нужно что-то что будет делать скриншот, налаживать на макет и сверять разницу, если она есть - тест не проходит.
А про какие сервисы ты говоришь?
Знаю только phantomcss который находится на ранней стадии разработки, и еще не оброс плагинами и хорошими практиками. Правда его цель - поиск регрессий (когда что-то отваливается в интерфейсе после твоих изменений), а не сравнение с оригинальным макетом.
Как я уже недавно писал, подкаст radiojs поможет быть в теме и ответить на многие вопросы.
Они конечно зафукали эту тулзу (MakeUP) ведь она не дает ничего нового, но насколько я слышал там можно как-то автоматизировать, что может составить неплохую конкуренцию Gemini (думаю пока самая наилучшая тулза).
@mantorovv по поводу пункта 2) проверка подключенного JQ …
Имею такой проект на гите https://github.com/AlexanderTserkovniy/get-jquery-version, писал ещё в стенах ММ, там даже есть проверка на JQ в главной библиотеке.
Из фичей:
В общем мне помогает, эта тулза.
Единственное, что написана хреново, а переписывать мне лень.
И куча другой хни, можеш поискать - их довольно много
Есть утилиты, которые могут делать окна прозрачными (например, окно Фотошопа), такую будет рационально заюзать вместе с утилитой, которая разместит это же окно поверх всех окон. Для винды это GhostWin и TurboTop (названия пишу по памяти, могу ошибаться). Да, это не совсем то, что просил автор, но для решения задачи пиксель-пёрфект лично я не знаю ничего лучше. Хотя, кажется, у htmlbook есть очень похожий механизм, может быть, есть смысл спросить на ихнем форуме.