Проверьте, как выглядит сайт на экранах и в окнах разных размеров

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

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

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

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

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

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

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

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

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

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

Восстановление состояния

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Дальнейшие действия

Подробнее о том, как реализовать проверки, описанные в этом документе, можно узнать в разделе Библиотеки и инструменты.