Тестируйте разные размеры экрана и окон

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

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

Что тестировать

При разработке пользовательских интерфейсов для разных размеров экранов и окон следует обратить особое внимание на два аспекта:

  1. Как визуальные характеристики компонентов и макетов различаются на окнах разных размеров?
  2. Как сохраняется состояние при изменении конфигурации

Визуальные атрибуты

Независимо от того, настраиваете ли вы интерфейсы для разных размеров окон или нет, необходимо убедиться, что они отображаются корректно. Учитывайте ширину и высоту компактного, среднего и расширенного размеров. Рекомендуемые контрольные точки см. в разделе «Классы размеров окон» .

Рисунок 1. Экран «Для вас» в приложении Now в Android при разных размерах окна.

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

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

Восстановление государства

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

Рисунок 2. Складное устройство в сложенном виде, в разложенном виде (плоское положение), в разложенном виде (повернутое горизонтальное положение) и в полуразложенном виде (настольное положение).

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

Существует несколько способов проверки изменений конфигурации, но в большинстве случаев есть два способа проверки:

  • В Compose используйте StateRestorationTester для эффективной имитации изменения конфигурации без перезапуска активности. Дополнительную информацию см. в следующих разделах.
  • В любом тесте пользовательского интерфейса, таком как Espresso или Compose, имитируйте изменение конфигурации, вызвав Activity.recreate() .

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

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

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

  • При использовании любого устройства измените размер экрана во время тестирования. В большинстве случаев это запустит все механизмы восстановления состояния, необходимые для проверки. Однако этот тест не сработает для логики, которая определяет определенные положения в складных устройствах, поскольку изменение положения не вызывает изменения конфигурации.
  • Используя устройство или эмулятор, поддерживающий тестируемые функции, запустите соответствующие изменения конфигурации. Например, складной планшет или планшет можно управлять с помощью Espresso Device, чтобы переводить его из сложенного состояния в разложенное в альбомной ориентации. Примеры тестирования различных размеров экрана см. в разделе Espresso Device в библиотеке и инструментах.
Рисунок 3. Складывание и раскладывание устройства.

Типы тестов для разных размеров экрана и окна

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

  • Тесты поведения пользовательского интерфейса запускают определенную часть интерфейса приложения, например, отображение активности. Тесты проверяют, существуют ли определенные элементы или обладают ли они определенными атрибутами. При желании тесты могут выполнять имитацию действий пользователя. Для представления используйте Espresso . Jetpack Compose имеет собственные API для тестирования . Тесты поведения пользовательского интерфейса могут быть инструментальными или локальными . Инструментальные тесты выполняются на устройствах или эмуляторах, а локальные тесты пользовательского интерфейса — на Robolectric в JVM.

    Используйте поведенческие тесты пользовательского интерфейса, чтобы проверить правильность реализации навигации в приложении. Тесты выполняют такие действия, как клики и свайпы. Поведенческие тесты пользовательского интерфейса также проверяют наличие определенных элементов или свойств. Для получения дополнительной информации см. раздел «Автоматизация UI-тестов» .

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

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

Следующие шаги

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