Сегодня мы запускаем новую функцию в Перси: визуальные регрессионные тесты для адаптивного дизайна.
Это была функция №1, запрошенная нашими пользователями, поэтому мы рады представить ее вам. Его легко интегрировать, вы предоставляете список чувствительных значений ширины точки останова, а мы позаботимся обо всем остальном.
Например, вот визуальная разница изменения кнопки на той же странице, но отрендеренная с разрешением 375 пикселей и 1280 пикселей:
Мы принимаем все стандартные значения ширины точек останова, поэтому вы можете выбирать, какая ширина устройства важна для ваших пользователей.
Как это работает
Мы можем отображать адаптивные визуальные различия, не влияя на скорость ваших тестов. Как?
Помните, что Percy полностью построен на основе снимков и ресурсов DOM, а не самих изображений. Эта архитектура сильно отличается от большинства инструментов визуального сравнения, но позволяет нам сильно оптимизировать такие функции.
Перси получает исходный снимок DOM и ресурсы страницы, поэтому мы просто изменяем размер браузера и визуализируем те же ресурсы страницы, которые были загружены ранее. Мы визуализируем адаптивные визуальные различия параллельно и полностью на стороне сервера, не влияя на вашу сторону на стороне клиента. Фактически, именно так визуализируются все снимки Перси (причем быстро!).
Ознакомьтесь с документацией, чтобы начать работу, и мы будем рады услышать ваши отзывы.
P.S. Мы также внедряем этот новый режим обзора, чтобы упростить просмотр всех различий с первого взгляда:
Percy - это платформа для визуального тестирования, которая вселяет в вашу команду уверенность в каждом изменении визуального интерфейса до того, как оно будет отправлено. Начните бесплатно на percy.io.
