тестирование верстки

Добрый день, столкнулся с задачей, как тестировать верстку? интеграционные тесты не подходят, так как при выполнении каких-то проверок мы ищем элемент просто по селектору, и даже если весь дом сжать в 1 гипотетическую точку, тесты отработают нормально. Так вот, кто сталкивался с подобной задачей? какие инструменты для этого использовали? У кого вообще какая инфа есть?
Пока раскопал только Gemini

,

Извините, если этот вопрос не в тему, но как будет “верстка” по-английски? У меня русская компьютерная терминология хромает, а слово встречается часто.

обычно именно слово “верстка” и используют, наравне с фронт-энд, бек-энд. Можно конечно говорить…лицевая часть, задняя часть) но…будет замешательство. А вообще, верстальщиков называют так же дизайнерами интерфейсов или архитекторами интерфейсов…можно как-то в эту степь подумать))

Прямого аналога я не встречал. В зависимости от контекста использую

  • верстка, как результат работы - page layout.
  • заниматься версткой как задачей - implement page layout. Неформально “я занимаюсь версткой” - I’m doing front-end for a living.

Не понятен вопрос, тестирование на предмет чего? Кроссбраузерность, адаптивность или имеется что-то другое ввиду?

соответствие макету. Размеров, цветов, форм, шрифтов и т.д.

С опытом глаз будет видеть и без инструментов, а сами инструменты:
Шрифты - http://www.fontface.ninja/
Размеры - https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=ru еще можно линейкой вымерять http://www.picpick.org/en/download
А с цветами думаю проблем не будет - инспектор поможет

1 Симпатия

У нас верстка - markup, верстальщик - markup-developer. Как-то так))

Соответствие макету проверяю накладыванием дизайна на сверстанную страницу + полупрозрачность окон. Цвета и шрифты берутся из ПСД-файла, проверяются, соответственно, тоже по нему. В браузере через фаербаг это все видно.

Линейку у хрома использовал раньше плагин Page Ruler. Сейчас в основном использую инспектор элементов F12. справа вверху есть шестеренка settings - там можно поиграть с настройками, Есть там пункт Elements, галку ставишь в Show rulers. А. если в винде надо линейку, запись видео, Picker - пользуй faststone
плагин для хрома ColorPick

Также есть примочки которые облегчают жись.
Сделай себе закладурки *:

  1. инструмент дизайнера в броузере, ценная штука - настраиваемая сетка.
    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’);

  2. проверка подключенного 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);})();;

  3. 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 в главной библиотеке.
Из фичей:

  1. Проверяет все возможные подключенные jQuery и выводит сообщение с их версией (Так как оказалось, что есть сайты на которых 2+ jQuery).
  2. Если jQuery не нашел совпадение на знанные его сокращения (там есть массив сокращений), то будет ходить по всем объектам пока не найдет.
  3. Интегрирован с главной библиотекой ММ.

В общем мне помогает, эта тулза.
Единственное, что написана хреново, а переписывать мне лень.

http://browsershots.org/
http://netrenderer.com/
http://www.my-debugbar.com/wiki/IETester/HomePage
http://crossbrowsertesting.com/?utm_expid=7091622-1.trYR7mPFTDiY8aYWRuigcw.0&utm_referrer=http%3A%2F%2Fwww.topobzor.com%2F13-servisov-dlya-testirovaniya-sajta-v-raznyx-brauzerax%2F.html


И куча другой хни, можеш поискать - их довольно много

Есть утилиты, которые могут делать окна прозрачными (например, окно Фотошопа), такую будет рационально заюзать вместе с утилитой, которая разместит это же окно поверх всех окон. Для винды это GhostWin и TurboTop (названия пишу по памяти, могу ошибаться). Да, это не совсем то, что просил автор, но для решения задачи пиксель-пёрфект лично я не знаю ничего лучше. Хотя, кажется, у htmlbook есть очень похожий механизм, может быть, есть смысл спросить на ихнем форуме.