Тестирование и приемка • 11 мин чтения • 27 апреля 2026

Как сравнивать страницу до и после правок

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

Если проект сложный, полагаться исключительно на память и ручной просмотр страниц — плохая стратегия. Человеческий глаз легко упускает сдвиги в пару пикселей, пропавшие тени или случайные изменения на соседних блоках. В этой статье разберем, как сравнивать страницу до и после правок, какие условия нужны для корректного сравнения и как выстроить более надежную приемку.

Почему ручное сравнение скриншотов страницы неудобно

Самый примитивный способ найти отличия — это ручное сравнение скриншотов страницы. Обычно это выглядит так: менеджер или тестировщик делает снимок экрана «до» правок, сохраняет его на рабочий стол, затем делает снимок «после», открывает оба изображения в стандартном просмотрщике и начинает быстро переключаться между ними, пытаясь уловить разницу.

Этот подход скрывает в себе массу проблем:

• Разные условия съемки. Если первый скриншот был сделан при ширине окна браузера 1440px, а второй — при 1420px, текст перестроится, и сравнить экраны будет невозможно.
• Человеческий фактор. Наш мозг не способен эффективно обрабатывать мелкие отличия на больших полотнах. Вы легко заметите пропавший блок, но пропустите изменение межстрочного интервала или другой оттенок ссылки.
• Потеря времени. На ручное скачивание, упорядочивание файлов по папкам и вглядывание в монитор уходят часы драгоценного времени команды.

Где ручная проверка особенно часто ломается

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

• До: у блока тарифов ровная сетка и одинаковые карточки.
  После: одна карточка стала выше из-за нового текста, и весь ряд визуально «поплыл».
• До: кнопка в шапке имела один цвет и один отступ.
  После: оттенок изменился чуть-чуть, а внутренние отступы стали уже. Глазом это легко пропустить.
• До: футер выглядел стабильно на всех страницах.
  После: после правок в шапке случайно изменился общий класс, и в футере поехали иконки и расстояния.

Во всех этих случаях ручной просмотр легко дает ложное ощущение, что «вроде все нормально». Именно поэтому сравнение версий страницы и сравнение версий сайта нужны не только тестировщикам, но и менеджерам, которые отвечают за приемку.

Как сравнить два скриншота страницы

Если у вас уже есть два снимка одной страницы, важно сравнивать их в одинаковых условиях: одно устройство, одна ширина экрана и понятный момент съемки. Для рабочего процесса удобнее не хранить файлы по папкам, а использовать страницу сравнения скриншотов сайта, где снимки остаются частью истории проверки.

Если первого снимка еще нет, его можно сделать через инструмент «Скриншот сайта онлайн», а затем сохранить результат во Flomaster для дальнейшего сравнения.

Как вести историю изменений по странице

Чтобы сравнение версий страницы имело смысл, процесс должен опираться на надежную визуальную историю. Команде нужен понятный след того, как интерфейс выглядел до изменений и как выглядит после них.

Правильная история изменений строится на концепции итераций (или раундов согласования). Когда вы отправляете клиенту или тестировщику сайт на проверку, текущее состояние интерфейса должно быть «заморожено» в виде набора эталонных снимков для разных устройств (десктоп, планшет, смартфон).

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

Условия корректного сравнения версий сайта

Сравнение версий сайта полезно только тогда, когда обе версии сняты в сопоставимых условиях. Иначе команда будет сравнивать не результат правок, а шум от разных настроек браузера, ширины окна или состояния страницы.

Что даёт режим «до и после»

Когда у вас есть сохраненная история, вы можете использовать режим «до и после». Это базовый и очень полезный способ сравнения, когда две версии экрана выводятся рядом.

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

Для агентств это полезно как инструмент клиентской приемки: можно быстро показать заказчику, что изменилось между двумя итерациями. Для тестировщиков это полезно как способ быстро оценить масштаб переработки перед более детальной проверкой.

Когда одного режима «до и после» уже недостаточно

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

Алгоритм берет два снимка с одинаковыми параметрами (размер, устройство, масштаб) и накладывает их друг на друга, подсвечивая контрастным цветом (обычно красным или розовым) каждый пиксель, который изменился.

Именно здесь начинается соседний сценарий статьи про автоматический поиск различий. В этой статье важно зафиксировать границу: сравнение версий страницы и сайта — это более широкий процесс, а автоматический поиск различий — один из его инструментов.

Автоматический поиск различий особенно полезен в таких сценариях:

• Регрессионное тестирование. Разработчик чинил шапку сайта, но случайно зацепил глобальный класс, из-за чего поехали кнопки в футере. Режим визуального сравнения мгновенно подсветит футер, который вы даже не планировали проверять.
• Проверка типографики и отступов. Сдвиг иконки на 3 пикселя вправо или изменение толщины шрифта с 400 на 500 будут безошибочно найдены алгоритмом.
• Приемка верстки по макету. Если загрузить макет из дизайна как базовую версию, а скриншот готового сайта как новую, Режим визуального сравнения покажет все отклонения верстальщика от задумки дизайнера.

Как использовать сравнение версий для приемки и тестирования

Когда команда сравнивает версии сайта не по памяти, а по зафиксированным экранам, приемка становится заметно спокойнее. Тестировщикам легче проверять внесенные изменения, а менеджерам проще показать клиенту, что именно поменялось между итерациями.

Процесс становится прозрачнее в трех вещах:

• Меньше споров о том, было ли изменение. Старая и новая версии экрана лежат рядом.
• Быстрее повторная проверка после доработок. Не нужно восстанавливать контекст по перепискам.
• Выше уверенность перед релизом. Команда видит не абстрактное «вроде все ок», а конкретную разницу между итерациями.

Как Flomaster помогает сравнивать страницу до и после правок

Платформа Flomaster создана для того, чтобы у команды была не разрозненная коллекция скриншотов, а нормальная история версий по страницам и итерациям. Сравнение здесь встроено в процесс, а не существует отдельно от него.

Работая во Flomaster, вы организуете процесс через Раунды. Каждый раунд автоматически фиксирует состояние страниц. Когда разработчики заканчивают работу, вы просто запускаете новый раунд, и система сама делает свежие снимки.

Дальше команда может использовать два уровня проверки:

• Сравнение версий рядом. Для понимания общей разницы между старой и новой версией страницы.
• Автоматический поиск различий. Для детального поиска пиксельных изменений там, где ручной просмотр уже не справляется.

Если вам важен сценарий визуальной проверки сайта шире, чем одна страница, откройте страницу про визуальное тестирование сайта. А если нужно превратить найденные отличия в понятные задачи для команды, посмотрите страницу Flomaster для тестировщиков.

Для тестировщиков это означает меньше ручной рутины и более надежную повторную проверку. Для агентств это означает более понятную коммуникацию с клиентом на приемке: можно не доказывать словами, что изменилось, а показать это на экране.

Сравнение версий сайта не должно сводиться к переключению между двумя вкладками браузера. Чем раньше вы переведете этот процесс в нормальную историю экранов и итераций, тем спокойнее будет и внутренняя проверка, и клиентская приемка.