Elysia Tools
Навигация
Workflow Playbook
Сравните версии страницы при одинаковых размерах окна, разберите изменения вёрстки и цвета и передайте снимки, проверенные замечания и основания для решения о выпуске.
Темы
Этот процесс помогает разработчикам и тестировщикам принять решение об одном редизайне. Результат — матрица, снимки, объяснённые замечания и ручное решение, а не автоматически запущенный набор тестов. Серверную съёмку используйте для разрешённых публичных страниц. Частные состояния требуют согласованного внешнего способа без секретов в URL.
До развёртывания сохраните старую версию или исходные доказательства. Запишите сборку, данные, язык, шрифты, окно, режим снимка, цветовую настройку и ожидание. Используйте одинаковые инструмент и окружение. Без эталона новый снимок не доказывает отсутствия регрессии.
Ширины 375, 768, 1024 и 1440 пикселей при согласованной высоте — примеры, а не универсальные границы. Инструмент адаптивного сравнения снимает один URL на двух–шести ширинах. Здесь используйте соседние ширины. Карты сравнивают масштабированные изображения, а не старый и новый выпуски или семантически распознанные компоненты.
Проверьте обрезанные надписи, перекрытия, неожиданное горизонтальное переполнение и пропавшее содержимое. Изменение колонок и переносов может быть правильным. Снимок окна не покрывает весь документ; остальные области исследуются отдельно. Сохраните отчёт и ZIP, но не превращайте процент пикселей в вердикт.
Снимите версии через Website Screenshot и проверьте реальные размеры по метаданным. Для произвольных размеров не включайте мобильный режим: сейчас он использует фиксированное окно 375 на 667. Предпочтительны PNG без потерь, непрозрачный фон и совместимые каналы.
Image Difference растягивает разные размеры до общего холста. Лучше переснять, чем выдавать такое преобразование за одинаковые условия. Инструмент не понимает семантику вёрстки. Различие каналов тоже требует остановки, внешней нормализации или повторной съёмки.
Храните полные оригиналы. Для фрагментов запишите координаты, размеры и контекст с обеих сторон. Сдвинувшийся элемент может выйти из той же области; вернитесь к полной картинке. Обрезка не гарантирует безопасного удаления конфиденциальных данных.
Проверьте даты, анимацию, внешние изображения, загрузку шрифтов и данные. Дополнительное ожидание не гарантирует стабильность. Скрытие элементов устанавливает display none и может перестроить страницу; документируйте исключения и не скрывайте нужное для приёмки содержимое.
Извлечённая палитра — выборка, а не доказательство пары текст/фон. Перед проверкой контраста подтвердите реальные цвета, учитывая прозрачность, градиенты и сглаживание. Хороший результат одной пары не сертифицирует доступность страницы. Отдельно фиксируйте намеренное изменение, дефект, шум и открытый случай.
Для замечания укажите ширину, место, оригиналы, необязательные координаты, ожидаемое и фактическое, ответственного и повторный результат. Длинные переводы, области вне кадра и взаимодействие проверяйте отдельно разрешённым браузерным сеансом. Снимки не подтверждают клавиатуру, меню, формы и касания.
Передайте локальные исходные и новые снимки, отчёты, разницы, матрицу и решение: принять, исправить, отложить или блокировать. Рассчитайте SHA-256 окончательных файлов для передачи; хеш определяет копию, а не правильность. Связанные процессы предназначены для инвентаризации стилей, расширенной проверки доступности и подготовки шрифтов.
Руководство по рабочему процессу
Запишите матрицу, сохраните одинаковые настройки и проверьте реальные размеры файлов.
Используйте соседние контрольные ширины, изучите снимки и переполнение, сохраните отчёт и ZIP.
Перед построением разницы проверьте размеры и каналы. При выделении фрагментов сохраняйте контекст полного изображения.
Используйте палитру как подсказку, при необходимости подтвердите цвета текста и фона для контраста. Отделите замысел от дефектов и непроверенных случаев.
Отчёт по контрольным ширинам показывает одну версию в разных окнах. Для сравнения выпусков нужны отдельные снимки при одинаковых условиях.
Сохраняйте полные оригиналы и координаты парных фрагментов. Не убирайте переполнение из кадра ради положительного результата.
Сначала проверьте данные, шрифты и динамическое содержимое. Палитру и контраст исследуйте только при значимом изменении цвета.
Сохраните реальные повторные снимки, решения и ограничения; вычислите SHA-256 окончательных локальных файлов.