Знаете ли вы компаратор внешнего вида веб-страницы?

Question

Мне нужен инструмент для сравнения дизайна сайта, я не хочу сравнивать только HTML-код, но дизайн вывода.

Это вообще возможно? также есть ли какая-либо программа с открытым исходным кодом такого рода?

Я искал в Google, но на данный момент у меня есть только один кандидат - HTML Match.

Answer 1

В современных веб-страницах внешний вид контролируется различными «вещами»: HTML-кодом, CSS-стилями и изображениями, по крайней мере (также на некоторых страницах есть JavaScript). Простых текстовых программ сравнения недостаточно, потому что их вывод может не иметь отношения к внешнему виду веб-страницы (т. Е. Очистка CSS может показать много различий, но отображаемая веб-страница остается той же).

Для более простых страниц HTML Match, упомянутый выше, может сделать эту работу. Если бы мне пришлось сравнивать дизайн двух «сложных» страниц (включая изменения макета, пространства, изображения и текста), я бы сделал двухэтапный подход:

1. Запустите инструмент diff для источников HTML, чтобы выделить различия в текстовом содержимом. Затем я изменил бы одну из страниц, чтобы показывать то же содержимое, что и на другой (чтобы сделать следующий шаг более точным и «сфокусированным», чтобы показать «реальные» изменения макета). Конечно, это работает только с очень похожим HTML.
2. Загрузите страницы в одном и том же веб-браузере, получите несколько скриншотов из отрендеренного вывода в фиксированных положениях и сравните изображения (то есть с ImageMagick ). Он должен показать все визуальные различия в отображаемом выводе.

Это не идеально, но должно работать.

[ОБНОВЛЕНИЕ] HTML Match кажется мертвым, см. этот ответ для альтернативного решения.

Answer 2

Решение: инструмент «сравнить веб-страницы» . («Мы занимаемся этим с 1999 года. Это бесплатно».)

Пример вывода (сравнение страниц для модели USB-концентратора TP-Link UH700 и UH720 ):

Answer 3

Есть эти онлайн-инструменты, которые не являются блестящими:

http://www.w3.org/2007/10/htmldiff

http://www.aaronsw.com/2002/diff/

Мне нравится внешний вид daisydiff, но я не использовал его в гневе: http://code.google.com/p/daisydiff/

Answer 4

Если вы используете KDE, вы можете использовать Kompare или KDiff3 .

Однако если вы хотите посмотреть, как ваша веб-страница выглядит в разных браузерах в разных операционных системах, можно использовать BrowserShots .

Answer 5

Под окнами:

http://www.htmlmatch.com/

Answer 6

Вы можете сделать визуальное сравнение с Araxis Merge Pro , сделав вывод на экран такими системами, как BrowserStack , Кросс-браузер , PhantomJS

Answer 7

Я работаю над одним и говорю вам, что это сложно, и на рынке ничего нет. Возможно, у Google и Bing что-то есть. Вы можете использовать некоторые инструменты сравнения изображений, которые идентифицируют прямоугольные области измененных изображений. Это, например, часть всего современного сжатия видео, но вы должны сделать это для разных областей веб-страницы (раздел навигационной панели, основная статья, область, отфильтрованная рекламным блокировщиком и т. Д.), Так как некоторые из них могут измениться. и это все еще считается тем же контентом на странице.

Как я уже сказал, очень сложная проблема без точного решения.

Другой идет не визуально, а просто сравнивает полученные компьютерные стили каждого элемента HTML. Вы должны взломать браузер, чтобы получить доступ к дереву макетов. Для него также нет официального API или существующей библиотеки / программы / хака / патча.

Answer 8

Ключевое слово, которое вы ищете, это "diff".

Хорошая программа, которая может показать вам различия между двумя файлами (html-разметкой или другими), будет ExamDiff для Windows.