Средний

5 мин

41

Всем привет, на связи Роман Бобков, тестировщик из проекта Wibes. В своей статье я решил поделиться личным опытом тестирования верстки и layout на Android и теми инструментами, которые можно использовать для этого.

Проблемы тестирования верстки на Android

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

Отсутствие devtools как в браузере

Когда открываешь новую сборку и начинаешь сравнивать новый экран с макетами, понимаешь, что хотелось бы посмотреть такие свойства как:

• цвет (желательно в hex формате);

• размер шрифтов;

• отступы между элементами;

• высоту элементов.

Т.к. в Android такой встроенной возможности нет, то остаётся либо определять всё это на глаз (что не лучший вариант), либо использовать вспомогательные инструменты, именно поэтому я и пишу данную статью.

Разные диагонали/размеры экранов

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

Построение матрицы моделей телефонов (device martix) — это немного отдельная тема, но к нашей тоже относится. Если нет возможности и ресурсов тестировать на физических устройствах, тогда в ход идут симуляторы и фермы, которыми можно пользоваться.

Настройки масштаба шрифта

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

Немного теории

Перед тем как перейти к инструментам, хочется рассказать немного «базы» про единицы измерения на Android.

Плотность пикселей dp/dip (density-independent pixel)

Это единица измерений показывает сколько пикселей есть в 1 dp, т.е. плотность пикселей.

Как видно на картинке, в 1 dp может быть разное количество пикселей. Телефоны с плохими дисплеями (чаще дешевые смартфоны), имеют маленькое количество px (пикселей), а телефоны с хорошими дисплеями (чаще всего дорогие смартфоны и флагманы) имеют больше px на 1 dp.

Dp — универсальная единица измерения, она «подстраивается» под экран. Если бы разработчик указывал отступы, размеры в пикселях, то на дисплеях разных размеров и плотности пикселей верстка бы ломалась. Работая с dp мы спасаем себя от таких «сюрпризов».

Единица измерения текста sp (scale-independet pixel)

Sp учитывает настройки размера шрифта в системе. Если sp может увеличиваться/уменьшаться от настройки системы, то dp остается таким, каким его задает разработчик.

Щупаем единицы измерения

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

Экран dp

На экране находится 2 инпута, значение которых отображает размер отступов (красных полос) по бокам. Можно подвигать ползунок и понаблюдать, как изменяются значения в dp и px.

Экран Text

На экране мы видим текст «DEMO TEXT» и возможность задать размер в sp тексту. На этом экране следует задать текст и сделать следующие действия:

• запомнить (или сделать скриншот) какого размера отображается текст;

• перейти в настройки дисплея;

• перейти в размер шрифта;

• поставить максимальный;

• вернуться в приложение.

Как мы видим, поменялся размер не только текста «DEMO TEXT», но и остального интерфейса. Хорошая практика — учитывать этот кейс при тестировании.

Дополнительные инструменты

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

Режим разработчика: показывать границы элементов

Важно, чтобы у вас были включены «Параметры разработчика» (5-7 раз быстро тыкнуть на номер сборки в «Сведения о ПО»), потому что именно там находится настройка «Показывать границы элементов», которая показывает границы не только приложений, но и системного интерфейса. Очень удобно проверять что-то на симметрию, отступы и чтобы UI-элементы не торчали там, где не нужно.

GRID Tool

Утилита, которая помогает выявлять похожие проблемы с отступами, симметрией. Есть разные её версии, я скачал самую первую из Google Play (в других сторах должно быть что-то похожее). Утилите необходимо дать доступ открываться поверх ваших приложений, чтобы можно было открыть сетку, которая поможет подсветить проблемы с версткой.

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

Color Picker: Eye Dropper Tool

Пипетка позволяет «взять» цвет со скриншота, сделанного на телефоне. Я нашел конкретно эту и иногда пользуюсь ей, но вариантов множество, так что используйте ту, которая нравится вам. Как вариант, можно подключиться к компьютеру и через adb сделать скриншот и воспользоваться «пипеткой» на нём.

Inspector в Android studio

В Android studio есть возможность просматривать экран приложения и смотреть свойства элементов как во вкладке elements в devtools. Для этого нужно перейти в Running Devices и выбрать элемент.

После нажатия на иконку лупы 🔍, начинает загружаться слои и элементы экрана. Когда элементы загрузились (на скриншоте я назвал это «Дерево элементов»), можем выбрать нужный элемент через дерево или нажать «Toogle Deep Inspect» и выбрать нужный. Тогда покажутся атрибуты (на скриншоте «Атрибуты выбранного элемента»).

В атрибутах мы можем увидеть разные свойства выбранного элемента (всё как и на вебе):

• width = ширина;

• height = высота;

• colors = цвет (с цветом есть нюанс, он может не быть указан в привычном hex/rgb/rgba/hsl, значение может быть функцией/переменной. Ещё цвет или значение background может не считаться из-за альфа-канала, который может быть задан с помощью альфа-каналов или быть унаследован от другого элемента, тогда узнать значение цвета может быть проблематично);

• enabled = доступность (пользовать может ввести текст);

• isError = флаг валидации — false, если пользователь при вводе не допустил ошибок (ввёл спец символы или превысил количество символов), true при обнаружении ошибок;

• minLines = количество строк в поле ввода;

• readOnly = доступ к инпуту, отличается от enabled: false тем, что у readOnly: true можно фокусировать инпут, можно выделять и копировать текст;

• и другие свойства, которые есть у элементов.

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

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

Практика

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

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

А вот вам apk, если хотите пощупать первые 2 экрана с dp и текстом.