Мы используем файлы cookie. Чтобы улучшить работу сайта и предоставить вам больше возможностей. Продолжая использовать сайт, высоглашаетесь с условиями использования cookie.

Шпаргалка для QA: как тестировать Flutter-приложения

AGIMA20 февраля 2024

Flutter-приложение нужно проверять не только обычными мобильными тестами, но и с учётом собственного движка рендеринга. QA пригодятся Flutter DevTools, golden-тесты и автоматизация сценариев, которые выявляют визуальные и производительные регрессии.

Коротко

КонтурЧто проверять
UIРазмеры, состояния, адаптивность и переполнение
РендерингВизуальные отличия на платформах и устройствах
ПроизводительностьКадры, память и долгие операции в DevTools
Golden-тестыНезапланированные изменения интерфейса
АвтоматизацияКритические пользовательские сценарии

Чек-лист Flutter-тестирования

ПроверкаОжидаемый результат
Разные размеры экранаИнтерфейс не обрезается и не переполняется
Медленное устройствоАнимации и прокрутка остаются стабильными
Тёмная и светлая темыЦвета и контраст соответствуют дизайну
Обновление FlutterGolden-тесты не показывают случайных изменений

Привет! Меня зовут Юлия Андреева, я QA-специалист в AGIMA. Мы пилим и тестируем много Flutter-приложений. И недавно я заметила, что не все коллеги понимают специфику их тестирования. В этой статье расскажу про основные инструменты и подходы, которые мы используем. Сосредоточусь только на тех технологиях, которые уникальны для Flutter.

Это база. Что надо знать про Flutter

Flutter от Google — инструмент для создания кросс-платформенных приложений. Этот фреймворк позволяет разработчикам использовать одну кодовую базу для приложений на Android, iOS, Linux, macOS, Windows и Web. На Flutter реализовано более 700 тысяч приложений в Google Play.

>> Больше про сам Flutter уже рассказал руководитель нашего Flutter-направления Саша Ворожищев

Язык Flutter-приложений — это Dart. Сама технология выделяется уникальной архитектурой и подходом к дизайну, в котором каждый элемент — виджет. Это обеспечивает высокую гибкость и производительность, но вместе с тем предъявляет особые требования к тестированию.

Особенности тестирования Flutter-приложений

Попробую суммировать, какие тонкости наша команда замечает при работе с Flutter-проектами. Я их объединила в три большие группы.

  • Архитектура Flutter.

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

  • Кросс-платформенность.

Можно сильно сэкономить время на тестировании приложения для каждой платформы. Платформенно-специфические функциональности тестируешь отдельно на iOS и на Android, всё остальное — на какой-то одной.

  • Специфические инструменты тестирования.

Flutter предоставляет собственные инструменты для тестирования виджетов и интеграционного тестирования, например FlutterDevTools.

Проблемы и их решение при тестировании Flutter-приложений

🔴 Самая популярная проблема — отслеживание трафика. Dart обычно использует высокоуровневые библиотеки для HTTP-запросов. Библиотеки инкапсулируют низкоуровневые детали сетевого взаимодействия. И это затрудняет прямой доступ или мониторинг данных — как отправляемых, так и получаемых.

🟢 Проблема решается подключением прокси-сервера. Лучше всего добавить этот функционал в вашу инженерную панель.

🔴 При тестировании различий UI/UX на разных платформах чаще всего мы сталкивались с такими проблемами:

  • Проблемы с анимацией, обращайте внимание на переходы и скроллы, особенно на iOS-устройствах.
  • Работа с жестами при закрытии и свайпах экранов.
  • Отображение системных диалоговых окон.

🟢 Не стоит фокусироваться на всех кнопках. Лучше обращать внимание только на существенные различия. Плюс помогает общение с сообществом. На GitHub можно найти множество уже открытых проблемы, а также добавить свою.

Кроме того, в решении любых проблем помогает Flutter DevTools.

Flutter DevTools

Этот комплект инструментов для отладки и профилирования в экосистеме Flutter дает нам возможность глубоко анализировать и тестировать приложения. Мы можем использовать его для инспекции иерархии виджетов. Это помогает выявлять проблемы с UI, а также мониторить производительность и использование памяти приложения.

Особенно ценной мы считаем его способность к отслеживанию сетевых запросов и логированию. Это делает его мощным инструментом в нашей повседневной практике тестирования и отладки.

Инспектор виджетов и Layout Explorer во Flutter DevTools

Интеграция голден тестов в процесс разработки

Мы также активно внедряли голден тесты в наши процессы разработки. Команда тестирования участвовала в разработке сценариев для этих тестов.

Голден тесты — это специальные тестовые сценарии, которые записывают ожидаемые результаты выполнения приложения.

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

Пример реализации:

Golden-тест сравнивает карточки с коротким и длинным заголовком

Внедрение автоматизации

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

Что необходимо учитывать:

  • Flutter-совместимость. Наши тесты должны говорить на одном языке с Flutter, так что выбирайте инструмент, дружащий с Dart. Среди них Selenium, Patrol, утилиты integration_test (ex-Flutter Driver), библиотеки flutter_gherkin().
  • Кросс-платформенность. Flutter не знает границ, так что и наш фреймворк должен уметь работать и на Android, и на iOS.
  • Дружба с CI/CD. Хотите скорости и удобства? Убедитесь, что ваш фреймворк ладит с Jenkins, GitLab и прочими CI/CD-инструментами.
  • Популярность в индустрии. Выбирайте фреймворк, который имеет большое комьюнити.

Наш выбор пал на Appium — это открытый инструмент для автоматизации тестирования мобильных приложений, который поддерживает множество платформ, так же как и Flutter. Тесты для Appium можно писать на разных языках программирования. А еще он легко интегрируется с системами непрерывной интеграции и доставки (CI/CD).

Проблема, с которой мы столкнулись: почти всё в приложении является виджетом. Поэтому нам не удавалось получить текст из некоторых модальных окон. Чтобы решить эту задачу, обращайтесь к своей разработке. Они добавят идентификаторы к элементам.

В итоге с помощью Appium мы сильно сократили время на регрессионное тестирование. Ранее полный регресс в нашей команде занимал до 90 часов, а после автоматизации время сократилось до 33 часов. Среднее время выполнения одного теста ~1,5 минуты. Около 10% дефектов заводилось благодаря автотестам.

Параметризацией и оптимизацией тестовых сценариев удалось уменьшить количество тест-кейсов с 1334 до 483 — более чем в два раза! Параметризация позволила сделать тесты более гибкими и адаптировать их под различные условия. В итоге мы стали эффективнее распределять наши ресурсы и уделять больше внимания новым функциям и улучшениям.

Результат автоматизированного end-to-end-теста мобильного приложения

End-to-end-тест на шести страницах проходит за полторы минуты.

Заключение

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

Раннее тестирование с использованием голден тестов, оптимизация процессов, применение автоматизации с параметризацией на основе Appium и интеграция с CI/CD позволяют повысить эффективность и точность тестирования для вашего продукта. В этом мы убедились на собственном опыте.

Если у вас остались вопросы по тестированию Flutter-приложений, задавайте в комментариях. А еще подписывайте на телеграм-канал Саши Ворожищева, нашего руководителя Flutter-направления. Там вы больше узнаете про сам фреймворк.

Что еще почитать

  • Как мы делаем тестирование прозрачным. Всё об инфраструктуре QA
  • Как мы тестировали первый в России финансовый маркетплейс
  • Transition Animation: настраиваем анимацию переходов во Flutter

Комментарии и обсуждения статьи на habr.

FlutterQAтестированиеgolden testsFlutter DevTools
Загружаем чат

Напишите в поддержку

Опишите проблему — команда разберётся.