Кроссплатформенный Путь Мобильного Тестировщика Или Как Стать Flutter Qa

Привет, Хабр! Для начала позвольте представиться: я тестировщик мобильных приложений в компании.

АТИ.

СУ .

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

Как сэкономить время и на что его потратить потом

Оказалось, что сэкономить время можно не только в процессе разработки, но и во время тестирования.

Чтобы ускорить тестирование, мы придумали стратегию: на каждой платформе (iOS и Android) мы тестируем только платформенно-специфичный функционал, а все остальное тестируем на одной платформе.

Что такое функциональность, специфичная для платформы:

• разрешения приложения: доступ к файловой системе, камере, георазрешению и т. д.;
• сервисы приложений;
• взаимодействие с веб-представлением;
• всплывающее уведомление.

Что не является специфичным для платформы функционалом:

• Пользовательский интерфейс и верстка: цвета, шрифты, расположение элементов;
• работа кнопки;
• выполнение сетевых запросов и обработка ответов;
• реагирование на сетевые ошибки, таймауты и отсутствие сети;
• работа с базами данных, миграция баз данных;
• тост;
• переворот экрана;
• изменить часовой пояс и дату;
• функциональные части приложения (или бизнес-логики).

• дополнительные элементы интерфейса, только на iOS/Android;
• функции анимации;
• Особенности цветовой гаммы.

Таким образом, кроссплатформенность приложения и подход к его тестированию позволяют сэкономить много времени.

Но сначала стоит разобраться в технических деталях.

Особенности релизных и отладочных сборок

Отладочная версия нам в первую очередь нужна для проксирования, сбора логов в случае ошибок и проверки основной бизнес-логики.

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

Непосредственно перед релизом мы проводим тестирование релизной сборки.

В отличие от нативных приложений, производительность Flutter-приложения в отладочной сборке значительно ниже, чем в релизной.

Это может привести к замедлению отклика и заиканию.

Причина такого различия кроется в виртуальной машине (Dart VM) и JIT (точно в срок) компиляторе, которые используются для отладочных версий.

(Dart — это язык, используемый для написания приложений Flutter).

Проксирование

1. откройте на своем компьютере сниффер (подробности его настройки мы опускаем);
2. в настройках устройства установите прокси-сервер для сети wifi, указав IP-адрес и порт компьютера с включенным сниффером;
3. скачайте и установите сертификат сниффера на устройство.

дио не используйте настройки прокси-сервера, установленные на устройстве.

Для этих клиентов настройки изолированы от платформ, поэтому настройки прокси можно реализовать только внутри приложения.

Для удобства тестирования разработчики создали экран QA, на котором можно ввести адрес и порт.



Экран контроля качества: настройки прокси-сервера

Экран контроля качества

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

Я приведу несколько примеров использования QA screen для проверки бизнес-логики.

1. У вас есть экран с нумерацией данных.

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

То есть на экране есть настройка, ограничивающая количество элементов в пагинации.

2. У вас есть скрытые функции, которые раскрываются при настройке флагов функций.

Обычно такие флаги есть в Firebase или другой удаленной конфигурации.

Чтобы не зависеть от настроек удаленного конфига, удобнее менять эти параметры внутри приложения.

3. В вашем приложении есть какой-то фоновый сервис.

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

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

Давайте рассмотрим эту проблему более подробно.

Тестирование элементов пользовательского интерфейса

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

Такое поведение вызвано тем, что Flutter использует собственную систему рендеринга, основанную на графической библиотеке Skia. Для операционной системы (как iOS, так и Android) экран приложения Flutter — это просто окно системы рендеринга, в котором отрисовываются элементы, поэтому он не может подсвечивать границы.

Чтобы протестировать пользовательский интерфейс, разработчики добавили параметры отладки на экран контроля качества.

Экран контроля качества: параметры отладки Опишу некоторые варианты отладки, которые мы использовали:

• checkerboardRasterCacheImages — проверить, какие изображения кэшируются;
• debugShowMaterialGrid — рисует сетку;
• debugPaintPointersEnabled — кнопки мигают при нажатии;
• debugPaintSizeEnabled — для каждого объекта рисования добавлять видимые границы, отображать отступы и направление выравнивания, а также направления прокрутки для элементов, поддерживающих прокрутку;
• debugPaintLayerBordersEnabled — отображать границы каждого слоя рендеринга;
• debugRepaintRainbowEnabled — отображает границы каждого слоя рендеринга; по мере увеличения частоты рендеринга границы элементов окрашиваются в разные цвета;
• debugRepaintTextRainbowEnabled — аналог debugRepaintRainbowEnabled, отмечать цветом-индикатором элементы, регулярно перезаписываемые, но относящиеся к текстовым элементам;
• showPerformanceOverlay — отображает временную шкалу для построения и отображения кадра.

Тестирование стиля

Для решения этой проблемы мы использовали популярное решение: токенизацию системы стилей в приложении.

Мы сформулировали отдельные системы токенов для текста и цветов.

Чтобы упростить тестирование токенов, мы создали два отдельных экрана, на которых вы можете визуально сравнить дизайнеры токенов, запланированные в Figma, и их реализацию в приложении.

? краны для тестирования стилей Как вы знаете, в iOS есть два стиля текста: текстовый и отображаемый.

Для текстового стиля расстояние между символами больше, чем для отображаемого.

При автоматическом переносе стилей весь текст в iOS был в текстовом стиле.

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

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

О стилях мы поговорили, теперь давайте посмотрим на инструменты разработчика, доступные в приложении Flutter — Flutter Dev Tools.

Инструменты разработки Flutter

Чтобы попасть в инструмент, вам необходимо:

1. установите плагин Flutter в Android Studio;
2. запустите приложение Flutter из Android Studio;
3. откройте Flutter Dev Tools.

Производительность .

Здесь вы можете отслеживать производительность приложения в FPS (кадров в секунду).

Вертикальная шкала указывает время отрисовки кадра в миллисекундах.

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

Мониторить производительность имеет смысл только на релизной сборке.

Инструменты разработки Flutter: производительность Память .

Показывает использование памяти приложением.

При появлении пиковых значений может потребоваться исправление от разработчиков, поскольку у пользователей слабые устройства с небольшим объемом памяти.

Инструменты разработки Flutter: память Сеть .

Это простой сниффер, но без возможности подмены трафика.

Он не требует дополнительных настроек на устройстве или установки сертификатов, а также ловит не только http, но и веб-сокеты.

Инструменты разработки Flutter: сеть, HTTP



Инструменты разработки Flutter: сеть, WebSocket Ведение журнала .

Здесь все просто - это логи.

Их можно сортировать по времени, сообщению и типу.

Также есть строка поиска.

И наконец - впечатления

Приложение выглядит одинаково на iOS и Android, поэтому пользователю не придется привыкать к особенностям реализации при переходе на другую платформу.

Наше приложение предназначено для делового и внутреннего использования, поэтому в нем не много анимации и сложной графики.

Он не страдает ни по скорости запуска, ни по производительности в релизных сборках.

Пользовательский интерфейс отзывчив, и его сложно отличить от нативного.

Кроме того, для тестировщика есть очевидные преимущества: сокращение времени тестирования и знакомство с новой технологией, поэтому общее впечатление от тестирования Flutter-приложения очень положительное.

P.S. Посмотрите, как переводится слово «трепетание».

Возможно, вы удивитесь и тоже полетите в кроссплатформенность! Теги: #Тестирование мобильных приложений #Тестирование ИТ-систем #мобильные приложения #flutter #мобильное тестирование #кроссплатформенность #кроссплатформенность #мобильная разработка flutter #flutter app #кроссплатформенное мобильное программирование #flutter

• Почему Я Использую Bloglines В Качестве Программы Чтения Rss По Умолчанию

  19 Oct, 24

• Разработчики Chrome Вводят Принудительное Открытие Сайтов По Https

  19 Oct, 24

• Официальный Блог Google Снова Взломали?

  19 Oct, 24

• Кунг-Фу В Командной Строке

  19 Oct, 24

• Идея Мобильного Приложения Для Наблюдателей За Выборами

  19 Oct, 24

• Посетите 4 Дата-Центра За День И Не Пожалеете О Потраченном Времени

  19 Oct, 24

• Как Уитфилд Диффи Помог Бобу И Алисе Обмануть Еву

  19 Oct, 24

• 10 Уроков Маркетинга Для Технологических Стартапов

  19 Oct, 24

• Как Мы Делали «3D Фотографии»

  19 Oct, 24

• Еженедельный Подкаст От Умпутуна (Сша, Чикаго) №159

  19 Oct, 24