Автоматически делать снимки экрана при развертывании новых версий приложения.
Привет всем! В этой статье мы рассмотрим, как делать автоматические снимки экрана с помощью наших приложений Flutter. Причина этого довольно проста: каждый раз, когда мы обновляем наше приложение, мы можем тратить часы на создание новых снимков экрана и т. Д. Разве не было бы неплохо, если бы мы могли автоматизировать этот процесс?
Что ж, можем! Давайте узнаем, как это сделать.
В этой статье мы рассмотрим:
- Написание интеграционного теста.
- Использование пакета Screenshots для создания снимков экрана.
- Настройка разных эмуляторов для представления разных устройств и создание снимков экрана на этих устройствах.
- Запуск интеграционного теста со скриншотами.
Установление ожиданий
По моему личному мнению, этот конкретный путь вперед немного случайен и не так прост, как должен быть. Когда дело доходит до разработки программного обеспечения, я большой поклонник «Говори, что ты имеешь в виду». Если что-то легко читается, в будущем будет легко устранять неполадки / отлаживать / улучшать. Верно и обратное: если что-то трудно читать, над этим будет сложно работать в будущем. Люди будут уклоняться от прикосновения к нему и т. Д.
Конечно, это очень важно, когда речь идет об основном приложении. Вы хотите, чтобы его было легко понять и с ним было легко работать. В меньшей степени это относится к тестам, которые вы пишете, или, в данном случае, к коду, который вы пишете для создания снимков экрана. Если вы напишете ужасный код в своем приложении, все пойдет плохо - и вы должны этого ожидать.
Но как насчет кода, который вы пишете для своих тестов? Стоит ли придерживаться аналогичных стандартов? Я так не думаю. Вы просто указываете компьютеру, как перемещаться по вашему приложению, какие кнопки нажимать, сколько ждать и т. Д. приложение), тогда все в порядке.
Почему я продолжаю об этом? Что ж, написание автоматических тестов во Flutter на данный момент требует некоторых действительно странных обходных путей. Но преимущество в том, что вам не нужно вручную делать скриншоты.
Итак, давайте продолжим.
Клонирование нашего образца приложения
Я знаю, что вы хотите усилить это с помощью своего собственного приложения, но я рекомендую вам сначала клонировать мое примерное приложение и заставить его работать с этим. Если это сработает, у вас больше шансов заставить его работать с вашим приложением.
Подготовка к нашему первому интеграционному тесту
Приложение, которое мы будем тестировать, выглядит так:
Интеграционный тест на GitHub.
В первом тесте мы нажимаем на кнопку «Опыт», а затем делаем снимки экрана с результатом.
По большей части это имеет смысл, но в приведенной выше функции есть пара странных частей. Два, которые могли привлечь ваше внимание, - это driver.runUnsynchronized и waitUntilNoTransientCallbacks аргумент функции screenshot. Коротко говоря, если бы я не включил их в свои тесты, либо драйвер не мог найти мои виджеты для взаимодействия, либо пакет снимков экрана зависал бы на неопределенный срок и не давал результата.
Если очень хотите, можете прочитать документацию на runUnsynchronized. Я это сделал, и я не могу понять, почему проявляется такое поведение.
waitUntilNoTransientCallbacks - похожая история. В пакете снимков экрана, когда это правда (как по умолчанию), он вызывает waitUntilNoTransientCallbacks, который в конечном итоге (всегда) истекает. Теоретически документация звучит хорошо, и в ней конкретно говорится, что ее можно использовать при работе со скриншотами.
Конечно, это немного похоже на поиск в словаре определения слова «картофель» и определение этого слова как просто «картофель». В документации (бесполезно) говорится, что эта функция просто «ждет, пока в очереди не останется временных обратных вызовов». Вы вообще знаете, что такое временный обратный вызов? Честно говоря, я понятия не имею, но, опять же, возможно, я просто супер-средний разработчик, и вы полностью понимаете, что это значит.
Но как это сделать локально?
Подготовка к настройке
Для начала мы воспользуемся пакетом снимков экрана. Вот такое руководство по сверхбыстрой установке (в Windows).
- Установите Шоколадный.
- Установите ImageMagick.
choco install imagemagick.app
3. Активируйте пакет снимков экрана. Вы должны активировать пакет прямо из репозитория GitHub:
flutter pub global activate -sgit https://github.com/mmcc007/screenshots
4. В примере приложения посмотрите на screenshots.yaml. Он содержит конфигурацию, на каких устройствах запускать снимки экрана.
5. Затем создайте устройства, для которых вы хотите создать снимки экрана, и назовите их точно так же, как устройства в screenshots.yaml.
6. Запустите все эмуляторы хотя бы один раз и сохраните состояние. Иногда, если устройство запускается слишком долго, пакет tests / Screenshot завершается по тайм-ауту и завершается ошибкой.
7. Откройте командную строку, введите screenshots и нажмите Enter. Вы должны увидеть, что все эмуляторы запустятся, будут сделаны снимки экрана и процесс завершится.
Общие проблемы
Я получаю эту ошибку при запуске снимков экрана:
Unhandled exception: type ‘List<dynamic>’ is not a subtype of type ‘String’
Вы получаете эту ошибку, потому что вы активировали выпущенную версию снимков экрана, тогда как вы должны были активировать главную ветвь снимков экрана. Использование configuration.yaml немного изменилось.
«Но я сделал это! И это все еще не работает ».
Возможно, вам понадобится ядерный вариант.
Следуя инструкциям в репозитории Git, я установил свой локальный путь к pub на моем компьютере, который находился в моем каталоге %APPDATA%. Мне пришлось удалить эти дополнения и просто использовать flutter pub вместо того, чтобы напрямую использовать pub команду. Потом все заработало.
Спасибо за прочтение
Это довольно хрупкий процесс. Так что, если вы застряли, дайте мне знать в комментариях, и я сделаю все возможное, чтобы помочь.
Автоматические скриншоты, у-у!
