Визуальные проверки — дело тонкое: где-то важна каждая деталь, а где-то мешает анимация. Поэтому у них есть отдельные настройки. Хорошая новость: у каждой настройки есть разумное значение по умолчанию, поэтому проект без настроек работает ровно так же, как проект с рекомендованными.
Настройки хранятся в файле проекта, в разделе visual:. Их можно править прямо в интерфейсе, а можно посмотреть итог и скопировать его готовым текстом.
Пресеты приложений
Начать удобнее с готового профиля: восемь пресетов описывают типовые случаи. Один выбор заменяет тридцать полей.
- SaaS-дашборд — плотные внутренние экраны: строгое сравнение по пикселям с маскировкой динамических зон.
- Маркетинговый сайт — публичные страницы с анимированными баннерами: снимки всей страницы и мягкие пороги.
- Canvas и WebGL — приложения на холсте: сравнение только раскладки плюс маски на области рисования.
- Электронная коммерция — каталоги и оформление заказа: включён текстовый слой, чтобы ловить изменения цен и текстов.
- Документация — справка и блоги: снимки всей страницы, терпимые к смене контента.
- Сначала мобильные — продукты, где телефон важнее: размер 390×844 снимается раньше настольного.
- SPA-приложения — одностраничные приложения: дополнительный последовательный кадр выявляет мерцание при отрисовке.
- CMS-системы — редакторские интерфейсы: текстовый слой и слой DOM пишутся в журнал.
Честная оговорка: применение пресета перезаписывает всю визуальную настройку целиком, включая ваши правки. Отменить это можно только новой правкой, поэтому выбирайте пресет до тонкой настройки.
Съёмка
Раздел «Съёмка» отвечает на вопрос, что и как снимается. Здесь задаётся тип съёмки по умолчанию: видимая область, вся страница, компонент или отдельный элемент.
Дальше — матрица размеров окна: по снимку на каждый размер. Так одна и та же страница проверяется и на широком мониторе, и на телефоне.
Маски — именованные области, которые закрашиваются перед сравнением. Это то, что меняется само по себе и не должно считаться отличием: часы, «2 минуты назад», аватары, рекламные блоки. Маска задаётся либо правилом выбора элемента, либо прямоугольником с координатами; у неё есть имя и цвет. Игнорируемые элементы — похожий приём: они закрашиваются чёрным и не показываются с именем и рамкой.
Стабилизация
Прежде чем снять кадр, продукт делает страницу спокойной — иначе два снимка одного и того же экрана отличались бы сами собой. Все приёмы включены по умолчанию, потому что дрожащий снимок хуже строгого.
- Заморозить время — тикающие часы и таймеры обратного отсчёта перестают показывать новый момент на каждом снимке.
- Просеять генератор — случайные номера и перетасованные списки перестают менять раскладку.
- Отключить анимации — кадр не ловит полупрозрачный элемент в середине движения.
- Скрыть каретку — мигающая палочка ввода не создаёт отличие.
- Нормализовать полосу прокрутки — она рисуется одинаково на разных системах.
- Ждать тишину сети — поздние ответы не перерисовывают страницу уже после снимка.
- Ждать успокоения страницы — приложение перестаёт менять разметку.
- Ждать шрифты — подмена шрифта не сдвигает все размеры.
- Блокировать сторонние домены — реклама и счётчики не показывают разный креатив; нужные домены можно внести в список разрешённых.
- Последовательные кадры — если их больше одного, снимается несколько кадров и сравниваются между собой: мимолётное дрожание проявляется как «нестабильно», а не попадает в отличие.
Слои проверок и пороги
Проверка состоит из нескольких слоёв, и у каждого свой режим: «строго» — падение валит сборку, «в журнал» — записывается без провала, «выключен» — слой пропускается совсем. Слои такие: визуальный, текст, сеть, консоль, доступность, дизайн-токены, производительность и адреса.
Пороги визуального слоя задают, что считать отличием:
- Максимум пикселей расхождения — абсолютный предел; пустое значение выключает ограничение.
- Допустимая доля пикселей расхождения от 0 до 1 — тоже выключается пустым значением.
- Чувствительность к цвету — пиксели с меньшей разницей не считаются.
- Допуск цвета — цвета, различимые меньше этого порога, для большинства людей неразличимы.
- Требовать одинаковые размеры, только раскладка и определять вертикальный сдвиг — три отдельных правила для особых случаев.
Чтобы не подбирать числа вручную, есть три готовых набора чувствительности: строгая (порог 0,1), рекомендуемая (сохраняет ваши числа; по умолчанию порог 0,2) и мягкая (порог 0,3).
Ветки
У вашего приложения могут быть ветки — версии кода, над которыми идёт работа. Настройки говорят, как вести себя с каждой:
- Ветка по умолчанию — с чем сравнивается сборка, если у её собственной ветки нет одобренного эталона. Это запасной вариант.
- Ветки с авто-одобрением — сборки на подходящих ветках могут сами принять заведомо безопасные отличия. Пустое значение — нигде.
- Ветки с обязательным ревью — сборки на подходящих ветках всегда требуют решения человека. Пустое значение — таких веток нет.
Шаблоны веток записываются привычным способом: * — внутри одного отрезка пути, ** — через несколько. Например, release/* или feature/**.
Эталоны привязаны к ветке с откатом к ветке по умолчанию: сборка сначала сравнивается со своим эталоном, а если его нет — с эталоном основной ветки. Историю репозитория тестируемого приложения продукт не читает, поэтому никаких сложных вычислений общего предка здесь нет.
ИИ и бюджеты
Искусственный интеллект подключается только там, где без него трудно. У него есть главный выключатель, а по умолчанию включены две задачи: разбор неоднозначных отличий (последний шаг сравнения, где простые правила не справились) и разбор упавших сборок (группировка и пояснение). Модель можно задать отдельно; если не задавать, берётся модель агента проекта.
Поставщик ИИ здесь один — подключённый Pastukhov Agent, прямых обращений к чужим моделям нет. Повторные сборки ничего не стоят: сначала отвечает обычное сравнение, и только неоднозначное уходит модели.
Обращения к ИИ стоят денег, поэтому есть потолки — предохранители: токенов на задачу и на кампанию, число починок на тест и на сборку, сколько кампаний починки идёт одновременно и остановка, когда одна и та же ошибка повторяется без изменений. Потолок на кампанию проверяется на границах её фаз, а не в середине работы. Важно: предохранители останавливают расход, но ничего не одобряют — ни план, ни тест.
Уведомления
Продукт умеет стучаться наружу: указывается адрес уведомлений, куда уходит короткое сообщение о событии, и есть кнопка «Отправить тестовый вебхук» для проверки связи. Уведомления отправляются на два события — «требуется ревью» и «сборка упала».
У события есть порог, поэтому уведомление приходит, только когда порог преодолён: отличие в один пиксель никого не разбудит.
Действующая конфигурация
Внизу настроек видно действующую конфигурацию — итог со всеми подставленными значениями по умолчанию, ровно то, что записалось бы при сохранении. Её можно скопировать готовым текстом, а рядом виден список ошибок проверки.
Полезная мелочь: если настройка сломана, это не мешает читать данные — просто начинают действовать значения по умолчанию, а сама ошибка честно показана. Неверную правку продукт не примет и файл на диске не тронет.
Дальше: пошаговый порядок запуска — в разделе Чек-лист настройки.