Снимок изменился — что с этим делать? Просмотрщик различий показывает старое и новое рядом, обводит изменившиеся места и объясняет словами, что именно поменялось. Здесь же по каждому отличию принимается решение.
Четыре способа сравнить
Одно и то же отличие можно посмотреть четырьмя способами:
- Рядом — эталон слева, новый снимок справа.
- Наложением — оба снимка совмещены, отличающаяся часть подсвечена.
- Слайдером — разделительную линию тянет человек: слева старое, справа новое.
- Переключением — старое и новое быстро чередуются, и изменение выдаёт себя мерцанием.
Масштаб тоже под рукой: приблизить и отдалить, вписать картинку в панель целиком или включить режим реальных пикселей (один пиксель картинки равен одному пикселю экрана). Двойной клик переключает между реальным масштабом и вписыванием.
Блоки изменений и пояснение
Изменившиеся места обведены рамками, а под картинкой — легенда:
- выше порога допуска — изменение больше разрешённого;
- маскированная область — то, что сравнивать запрещено маской;
- игнорируемая область — то, что исключено правилами;
- значимое изменение — то, что важно и требует решения.
У каждой рамки есть пояснение словами: «сдвиг макета», «изменение отступов», «изменение цвета», «типографика», «элемент удалён», «элемент добавлен», «изменение текста», «переполнение» и другие. Если понять не удалось, так и написано — «пояснение недоступно».
Кто решил
Рядом с отличием указано, кто определил его важность: строгий скрипт сравнения, ИИ или человек. Классов четыре: несущественно, существенно, шум и не классифицировано. У ИИ рядом видна его уверенность в процентах.
Здесь действует важное правило: ИИ может поднять важность отличия — заметить то, что скрипт пропустил, — но никогда не может её понизить. Поэтому ИИ не в силах «замолчать» настоящую поломку. И вердикт человека всё равно главнее любой классификации: рядом с решением ИИ так и написано.
Доказательства и история
Под картинкой собраны факты: каким способом сравнивали, с какими порогом и допуском, было ли сравнение пропущено из-за совпадения отпечатка. Там же видно, стабильна ли была съёмка по кадрам — «Стабильно на N кадрах» или «Нестабильно на N кадрах». Нестабильность означает, что страница мерцала во время съёмки, и такое отличие стоит проверить отдельно.
Рядом — история этого снимка: как он выглядел в прошлых сборках и кто и когда одобрил каждую версию. Старую версию можно снова сделать эталоном — текущая при этом остаётся в истории, а перенос записывается в журнал аудита.
Вердикты и обсуждение
По каждому отличию можно принять решение:
- Подтвердить — отличие принято, эталон переходит на этот снимок;
- Запросить изменения — вернуть автору на доработку;
- Отклонить — признать изменение лишним или ошибочным;
- Исправить — создать задачу — передать отличие на исправление: доказательства приложатся сами;
- Отозвать одобрение — вернуть предыдущую версию эталоном.
Записывать вердикты может рецензент и выше, наблюдатель — только смотрит. Если отличие затрагивает общий компонент, для одобрения нужна отметка дизайн-ревьюера. К любому отличию можно оставить комментарий и обсудить его с коллегами, в том числе упомянуть человека через @.
Текстовые снимки
У текстовых снимков — а это структура страницы, стили, дерево доступности и последовательность адресов — вместо изображения показано текстовое отличие: построчно видно, что убралось, а что добавилось. Решения принимаются точно так же: посмотреть, понять причину, подтвердить или вернуть.
Дальше: где живут образцы, с которыми всё сравнивается, — в разделе Эталоны.