Скорее всего, вы слышали о всевозможных тестах, но есть вероятность, что вы не слишком знакомы с миром визуального тестирования. Но что это, черт возьми?
Визуальное тестирование - это автоматизированный процесс обнаружения и анализа визуальных изменений пользовательского интерфейса.
Проще говоря, Percy.io делает следующее: берет ваш код, запускает его, визуализирует, а затем делает снимок экрана, когда страница загружается в Google Chrome, Firefox или в обоих.
В BuildEmpire мы запускаем эти визуальные тесты каждый раз, когда создается новый запрос на вытягивание, что позволяет нам быстро определять любые изменения, которые могли повлиять на другие разделы большого приложения, которое мы ' перестройка.
После того, как визуальные тесты будут завершены, Перси сравнит его с базовым уровнем - мы обычно используем для этого ветвь по умолчанию (разработка), а затем предоставляем вам красивый простой вид, выделяющий выявленные различия и позволяющий вам принять изменения.
Все это аккуратно упаковано в раздел статуса запроса на слияние на GitHub, что позволяет вам видеть (наряду с вашими обычными тестами и т. Д.), Все ли прошло успешно или нет.
А как насчет отзывчивости?
В настоящее время большинство сайтов, как правило, разрабатываются в первую очередь для мобильных устройств, а это означает, что дизайнер стремится разрабатывать для наименьшего поддерживаемого устройства, а затем расширять его.
Percy отлично подходит для предоставления вам ряда различных разрешений, которые вы хотите поддерживать. Затем он выполнит обычный процесс, но сделает дополнительные снимки с этими разрешениями.
Включение этого параметра позволяет вам заранее определить, не справились ли вы с другими поддерживаемыми размерами устройств.
Не забывайте, что если у вас есть гамбургер-меню, вы можете отобразить его в развернутом и свернутом состоянии на мобильных устройствах!
Как мы это используем?
В настоящее время мы находимся в закрытом бета-тестировании нового приложения под названием thirst.io, которое позволяет создателям контента курса создавать контент для Learning Systems. Это один из наших последних проектов, в котором мы реализовали это, поэтому приведенные ниже скриншоты взяты из нашей реальной учетной записи Percy с главной веб-страницы thirst.io.
На снимке экрана слева показана базовая линия (разработка), а справа - то, что изменилось в запросе на вытягивание, хотя и немного затенено. Красным цветом вы можете увидеть, что изменилось, что позволит вам точно определить в приложении, что было затронуто.
Нажатие на последний снимок экрана позволяет вам включать и выключать это наложение, чтобы легче было определить, что изменилось.
Когда Перси завершит выполнение своих процессов и сравнений, он появится в GitHub, как упоминалось ранее:
Потрясающий! Стоит ли мне его использовать?
Мы узнали о Перси, вероятно, чуть более 18 месяцев назад (на момент написания) и с тех пор используем его. Изначально мы интегрировали его в один из сайтов наших крупных клиентов, поскольку масштаб приложения рос, чтобы гарантировать, что мы не вносим критические изменения, и с тех пор мы используем его и добавляем в новые проекты.
Однако…
… Одно из ключевых требований Перси - гарантировать, что при каждом запуске ваших тестов ваши скриншоты используют одни и те же данные. То есть, если вы используете что-то для создания фальшивых данных, не позволяйте этому изменяться каждый раз, иначе это будет отмечено. Часто забывают об использовании даты или времени относительно точки выполнения теста, не забывайте издеваться над ними, чтобы предотвратить ложные срабатывания!
Кроме того, остается только убедиться, что люди действительно проверяют снимки. Недавно в одном из наших больших приложений мы внесли некоторые изменения в меню навигации, которые затрагивают каждую чертову страницу, и это здорово! За исключением случаев, когда он создает более 100 снимков экрана, которые вы можете просмотреть и просмотреть.
Лично я считаю, что Перси был отличным дополнением к нашему и без того довольно надежному рабочему процессу. Это уже позволило нам зафиксировать некоторые (потенциально серьезные) недостатки пользовательского интерфейса, прежде чем отправлять изменения клиенту для тестирования.
Это часть серии публикаций, в которых рассказывается о некоторых инструментах и процессах, которые мы используем здесь, в BuildEmpire, чтобы помочь нашим разработчикам выпустить лучший код.
