Рад сообщить об официальной поддержке Ember.js в Перси!
Мы только что запустили ember-percy: дополнительный клиент для визуального регрессионного тестирования приложений Ember.
Давайте сразу перейдем к быстрому примеру - допустим, у меня есть несколько приемочных тестов Ember, которые выглядят примерно так:
Простой. Просто зайдите на страницу «О программе», щелкните члена команды и ожидайте, что класс расширено теперь применяется.
Но подождите ... вы уверены, что is-extended - правильный класс? Что, если это действительно должно быть .TeamMember - isExpanded? Что, если класс правильный, но стиль каким-то образом переопределен? Что, если .TeamMember случайно оказался за пределами экрана? Что делать, если другой разработчик нарушает стиль и не знает? Что, если какая-либо из 100 других вещей CSS или HTML покажет неправильный вид, пока ваши тесты все еще проходят?
Обычно риск этих «что, если» покрывается QA - мы должны вручную использовать приложение и смотреть на него, чтобы убедиться, что оно визуально корректно.
Здесь начинается непрерывная визуальная интеграция. Давайте добавим асинхронный помощник percySnapshot () там, где важно обеспечить визуальный охват:
Сделанный! percySnapshot () захватывает моментальный снимок DOM текущего состояния страницы и загружает его в Перси для визуализации, создания снимков экрана и сравнения с последними снимками экрана из мастера. Вычисления, рендеринг, визуальное различие и хранение полностью переданы Перси, чтобы ваши тесты были быстрыми.
Что происходит сейчас?
В следующий раз, когда вы запустите свои тесты, вы увидите это на GitHub:
Нажмите Подробности, и теперь вы можете попиксельно просматривать визуальные различия изменений для этого PR:
Это показывает каждый пиксель, измененный во всем приложении для этого конкретного PR.
Просто нажмите Подтвердить в Перси, и ваш PR на GitHub станет зеленым!
Наша цель здесь проста: обеспечить быстрый и непрерывный рабочий процесс визуальной проверки одновременно с проверкой вашего кода.
Мы оставляем вам решать, где вы хотите визуально охватить свое приложение - может быть, это все страницы, может быть, несколько состояний приемочного тестирования, может быть, это только ваше руководство по стилю или набор тестов интеграции компонентов.
А как насчет адаптивного дизайна?
Определенно! Вы можете настроить точки останова CSS и воспользоваться преимуществами адаптивных визуальных различий Перси:
См. Ember-percy docs, чтобы узнать, как настроить точки останова CSS.
Мы очень рады этому запуску и будем рады услышать ваши отзывы. Мы проводили бета-тестирование ember-percy, и у нас уже есть несколько приложений Ember, которые ежедневно отправляют тысячи снимков, а команды, которые интегрировали визуальные обзоры Перси в свой рабочий процесс разработки.
Кроме того, пользовательский интерфейс Перси представляет собой приложение Ember, так что мы, наконец, можем протестировать Перси в Перси! Например, если мы случайно удалим логотип на нашей домашней странице, мы увидим это изменение следующим образом:
Путешествие продолжается
За последние 1,5 года пришлось пройти долгий путь, чтобы добраться до этой точки - визуальное тестирование - обманчиво сложная проблема.
Я немного говорил об этом в своем недавнем выступлении на RailsConf о непрерывной визуальной интеграции - как заставить визуальное тестирование работать в масштабе, интегрироваться в ваш повседневный рабочий процесс и без накладных расходов на производительность - непростая задача.
Я с гордостью могу сказать, что базовая архитектура Перси, ориентированная на ресурсы, зарекомендовала себя таким образом - мы обработали более 1,65 миллиона визуальных различий (что также означает, что мы открыли Firefox 1,65 миллиона раз и взяли 1,65 миллионов скриншотов), и это с почти нулевыми накладными расходами , добавленными к вашему набору тестов. Все сложные вычисления, рендеринг, сравнение и хранение переданы на Перси, чтобы ваши тесты были быстрыми.
Недавно мы работали с потрясающим Джеффри Байлсом на Ember Screencasts, чтобы записать видео-обзор - посмотрите его вместе с сотнями других потрясающих видеороликов Ember:
Приглашаем вас попробовать Перси сегодня!
Я консультировался с компаниями в Сан-Франциско, чтобы настроить их визуальные тесты, показать передовые методы визуального регрессионного тестирования и разработать функции Перси. Если вы заинтересованы в практическом опыте Ember для визуального тестирования, протяните руку!
