Тестирование встроенных функций в приложениях Flutter с помощью Patrol и Codemagic

«Это бесполезно! Я не могу провести сквозное тестирование с помощью интеграционных тестов Flutter», — воскликнул один из наших клиентов около 9 месяцев назад. Я спросил, в чем проблема, и они объяснили, что используют аутентификацию Google для входа в систему и используют пакет google_sign_in , но невозможно использовать интеграционные тесты Flutter для взаимодействия с экранами входа в систему. Я так и не совсем понял, в чем проблема, и тут меня осенило: этот плагин использует нативные компоненты пользовательского интерфейса , с которыми интеграционные тесты не работают.

Я был очень разочарован тем, что не смог предложить решение в то время, и мне пришлось оставить все как есть. Однако перенесемся в сегодняшний день, и появилось потрясающее новое решение под названием «Патруль» от LeanCode . Я собираюсь рассказать вам все об этом, но прежде чем мы углубимся, давайте просто вспомним, почему важно запускать тесты, какие инструменты у вас были доступны до сих пор, а затем поговорим о том, как начать работу с Patrol.

Зачем вообще тестировать приложения Flutter?

Одна из основных причин, по которой команды разработчиков используют службы непрерывной интеграции (CI), такие как Кодмагия заключается в том, чтобы получить немедленную обратную связь по коду, который они фиксируют в своем репозитории. Тесты могут запускаться автоматически как часть вашего конвейера, чтобы обеспечить уровень качества и стабильности, поскольку ошибки или проблемы можно обнаружить на ранней стадии и сразу же исправить. Мы всегда рекомендуем клиентам проводить тестирование при настройке своих рабочих процессов, но нередко можно услышать: «У нас нет времени писать тесты». Надеюсь, вы не в такой ситуации и используете тестирование как часть цикла разработки приложений, чтобы создавать приложения отличного качества и без ошибок!

Каковы основные автоматизированные способы тестирования приложений Flutter?

Существует четыре основных метода тестирования, которые можно автоматизировать в рамках рабочего процесса CI. Тестирование — это отдельная тема, поэтому я буду краток, но использование комбинации этих методов тестирования поможет вам улучшить качество вашего приложения и выявить проблемы раньше, чем позже.

Во-первых, существует «Модульное тестирование» , которое обычно используется для изолированного тестирования функций и методов, чтобы убедиться, что они работают должным образом. Также можно написать модульные тесты, чтобы убедиться, что ваша бизнес-логика работает в различных сценариях без каких-либо неожиданных результатов.

Далее у нас есть «тесты виджетов» Flutter, которые позволяют вам протестировать компоненты пользовательского интерфейса и убедиться, что они отображаются правильно и работают так, как вы ожидаете.

Затем идет «Интеграционное тестирование» , во время которого вы проверяете, работают ли модули и компоненты вашего приложения вместе, как ожидалось.

Наконец, существует «сквозное тестирование пользовательского интерфейса» , при котором вы тестируете приложение так, как если бы оно использовалось реальным пользователем. В рабочем процессе CI это обычно автоматизируется с помощью симуляторов или эмуляторов для тестирования различных путей в вашем приложении, чтобы убедиться в отсутствии каких-либо проблем после внесения изменений в код.

Именно здесь застрял клиент, о котором я говорил вначале, потому что он не мог запустить сквозные тесты пользовательского интерфейса, потому что не было возможности войти в приложение. В то время они тестировали версию для разработчиков, которая обходила часть входа в систему.

Однако теперь, когда доступен «Патруль», в этом больше нет необходимости!

Входите, сцена слева, Патруль!

Итак, прежде всего, что такое Патруль? Ну, я думаю, что документы говорят об этом лучше всего:

Patrol — это новая платформа тестирования пользовательского интерфейса с открытым исходным кодом для Flutter, разработанная LeanCode. Он основан на существующих инструментах тестирования Flutter и позволяет вам делать то, что раньше было невозможно. Patrol позволяет вам получить доступ к собственным функциям платформы, на которой работает приложение Flutter.

Самая важная часть здесь заключается в том, что он позволяет вам получить доступ к собственным функциям платформы, на которой работает ваше приложение Flutter .

Это означает, что теперь вы можете делать такие вещи, как:

1. Взаимодействуйте с диалоговыми окнами запросов на разрешение, чтобы отклонять или принимать запросы.
2. Взаимодействие с WebViews.
3. Сверните и разверните свое приложение.
4. Взаимодействуйте с потоками аутентификации, такими как аутентификация Google или Apple.
5. Взаимодействуйте с другими встроенными функциями, такими как открытие панели уведомлений, нажатие кнопки «Домой», включение или выключение подключения Wi-Fi, перевод устройства в темный режим и т. д.

Хорошо, это звучит здорово, но в чем подвох?

Ну, его нет! И более того, это не только бесплатно , но и Открытый исходный код !

Более того, Patrol также представляет «пользовательские средства поиска» , которые дают вам более краткий синтаксис для написания тестов. Вы можете прочитать о них больше здесь .

Установка и настройка Патрола

Чтобы начать работу с Patrol, вам необходимо установить CLI, добавить зависимость Patrol в ваш pubspec.yaml и настроить некоторые конфигурации в ваших проектах iOS и Android.

LeanCode создал отличную документацию. здесь который проведет вас через процесс для каждой платформы, которую вы можете найти здесь. Их пошаговое руководство проведет вас через настройку как для iOS , так и для Android .

Если у вас возникнут какие-либо проблемы, лучшее место, где можно получить помощь, — это сервер Discord сообщества Patrol , к которому вы можете присоединиться. здесь .

Если вы обнаружите какие-либо ошибки, вы можете поднять проблему здесь .

Установка и настройка Патрола

Чтобы начать работу с Patrol, вам необходимо установить CLI, добавить зависимость Patrol в ваш pubspec.yaml и настроить некоторые конфигурации в ваших проектах iOS и Android.

LeanCode создал отличную документацию. здесь который проведет вас через процесс для каждой платформы, которую вы можете найти здесь. Их пошаговое руководство проведет вас через настройку как для iOS , так и для Android .

Если у вас возникнут какие-либо проблемы, лучшее место, где можно получить помощь, — это сервер Discord сообщества Patrol , к которому вы можете присоединиться. здесь .

Если вы обнаружите какие-либо ошибки, вы можете поднять проблему здесь .

Написание собственных тестов функций с помощью Patrol

Теперь все настроено, давайте начнем тестировать некоторые встроенные функции. Чтобы попробовать это самому, я установил простое приложение Flutter с кнопкой с повышенными правами, при нажатии которой открывается собственное диалоговое окно оповещения.

Нажатие «ОК» или «Отмена» просто закрывает диалоговое окно.

Опять же, я бы рекомендовал использовать собственную документацию Patrol, которую вы можете найти. здесь чтобы добавить свой первый тестовый файл.

Итак, для моего теста я хотел нажать на кнопку с повышенными правами, на которой есть текст «Нажмите на меня!». Это стандартный виджет Flutter, поэтому его можно нажать с помощью следующего средства поиска Patrol:

 await $('Click me!').tap();

После этого должен отобразиться собственный диалог, и теперь мы можем начать взаимодействовать с собственным компонентом пользовательского интерфейса. Итак, давайте добавим собственный поисковик, который позволит нам нажимать кнопку «ОК»:

 await $('Click me!').tap(); await $.native.tap(Selector(text: 'OK'));

Это было легко! Я также хочу протестировать кнопку «Отмена», поэтому давайте нажмем «Нажмите на меня!» кнопку еще раз, а затем нажмите кнопку «Отмена» в собственном диалоговом окне, добавив еще пару строк следующим образом:

 await $('Click me!').tap(); await $.native.tap(Selector(text: 'OK')); await $('Click me!').tap(); await $.native.tap(Selector(text: 'Cancel'));

Готовый тестовый файл должен выглядеть следующим образом:

 import 'package:cmpatrol/main.dart'; import 'package:patrol/patrol.dart'; void main() { patrolTest( 'Native tests', nativeAutomation: true, ($) async { await $.pumpWidgetAndSettle(const MyApp()); await $('Click me!').tap(); await $.native.tap(Selector(text: 'OK')); await $('Click me!').tap(); await $.native.tap(Selector(text: 'Cancel')); await $('Click me!').tap(); await $.native.tap(Selector(text: 'NO')); }, ); }

Теперь вы сможете запустить этот тест на своем эмуляторе или реальном устройстве, используя команду для запуска теста. Мой файл интеграционного теста назывался «button_test» , поэтому я начал тесты из терминала следующим образом:

 patrol test -t integration_test/button_test.dart

Вы увидите, пройдут ли ваши тесты или нет, прямо в Терминале. Если тесты не пройдут, вы получите ссылку на полный отчет о тестировании. В качестве альтернативы, если вы запускаете тесты на Android, как это сделал я, вы можете получить доступ к отчету, щелкнув index.html в следующем каталоге:

 ./build/app/reports/androidTest/connected 

Вы можете поэкспериментировать с другими встроенными функциями, такими как открытие панели уведомлений, отключение Wi-Fi, включение темного режима, сворачивание и развертывание приложения:

 // minimize app await $.native.pressHome(); await $.native.openNotifications(); await $.native.disableWifi(); await $.native.enableDarkMode(); // maximize app await $.native.openApp();

⚠️ Обратите внимание, что невозможно полностью закрыть приложение, а затем снова открыть его, поскольку это приведет к завершению всего теста и, следовательно, к его провалу.

Проконсультируйтесь с патрулем документация дополнительные примеры.

Использование Patrol в рабочих процессах Codemagic

Чтобы включить Patrol в свои рабочие процессы, вам сначала необходимо установить интерфейс командной строки Patrol на машине сборки. Это займет всего несколько секунд, и как только это будет сделано, вы сможете запустить тестовый скрипт. Ниже приведен пример добавления этих шагов в раздел «сценарии» файла конфигурации codemagic.yaml . Я бы рекомендовал запустить сценарий для установки Patrol CLI в качестве одного из первых шагов сценария, а затем вы можете запускать тесты Patrol либо сразу после этого, либо после любых других тестов, которые вы также можете запустить заранее.

Перед запуском тестов Patrol вам необходимо запустить эмулятор, поэтому мы добавим скрипт для запуска эмулятора и дождемся его полной загрузки. Обратите внимание, что эмуляторы Android недоступны на компьютерах, использующих компьютеры Apple Silicon M1 или M2, поскольку Apple Virtualization Framework не поддерживает вложенную виртуализацию. Поэтому я бы рекомендовал использовать экземпляр Linux при тестировании приложений для Android.

Раздел скриптов вашего codemagic.yaml должен выглядеть примерно так:

 scripts: ... - name: Install Patrol CLI script: dart pub global activate patrol_cli - name: Launch Android emulator script: | cd $ANDROID_HOME/tools emulator -avd emulator & adb wait-for-device - name: Run tests with Patrol script: patrol test -t integration_test/your_test.dart ignore_failure: true ...

Отображение результатов теста Patrol в журналах сборки Codemagic

Результаты теста Patrol также доступны в формате JUnit XML , что означает, что их можно отображать в журналах сборки на экране обзора сборки Codemagic. Вам просто нужно добавить передачу свойства test_report в путь к создаваемому XML-файлу JUnit. Вы можете использовать свойство ignore_failure с логическим значением, чтобы контролировать, хотите ли вы продолжать работу остальной части рабочего процесса или нет. Если вы хотите загрузить свои результаты в систему управления тестированием, как описано в следующем разделе, вам следует установить для этого параметра значение true .

Вот пример того, как должен выглядеть ваш скрипт:

 scripts: ... - name: Run tests with Patrol script: | patrol test -t integration_test/your_test.dart test_report: build/app/outputs/androidTest-results/connected/*.xml ignore_failure: true ...

Неудачный тест может выглядеть примерно так:

Сбор отчета о тестировании Patrol как артефакта сборки

Еще одна вещь, которую вы, возможно, захотите сделать, — это собрать выходные данные отчета о тестировании в виде артефакта сборки, чтобы вы могли просмотреть полный отчет в случае возникновения каких-либо ошибок. После этого отчет станет доступен для загрузки в виде zip-файла на экране обзора сборки в разделе «Артефакты» слева. Самый простой способ сделать это — скопировать каталог, в котором находятся файлы отчетов, в каталог, который Codemagic использует для экспорта артефактов. Существует встроенная переменная среды $CM_EXPORT_DIR , которая ссылается на этот каталог, который вы можете использовать в своем скрипте.

Скрипт для этого должен быть таким:

 scripts: ... - name: Export Patrol test report script: | cp -r build/app/reports/androidTests/connected $CM_EXPORT_DIR/report ...

Заключение

Patrol наконец-то решил проблему запуска тестов пользовательского интерфейса и интеграции, в которых используются встроенные функции. Теперь можно тестировать встроенные функции и взаимодействовать с потоками аутентификации, собственными диалоговыми окнами и даже переключать встроенные функции, такие как Wi-Fi, сотовая связь, темный режим, и даже сворачивать и разворачивать приложение. Кроме того, он бесплатен , имеет открытый исходный код и обеспечивает решение реальной проблемы, которая существовала с момента запуска Flutter. Более того, его легко добавить и использовать в рабочих процессах Codemagic. Если вы хотите поддержать замечательную работу LeanCode, поставьте лайк Patrol на pub.dev. здесь и поставьте репозиторию Patrol GitHub звезду здесь .

Эта статья написана Кевином Сухайдой, руководителем отдела разработки решений в компании Кодмагия . Вы можете найти Кевина на Икс , GitHub , и LinkedIn .