Как проверить верстку в мобильном приложении
На сегодняшний день, современный сайт — это сайт который сверстан с использованием адаптивных технологий и имеет нужно представление для большинства мобильных устройств, как минимум смартфонов и планшетов. Поэтому тестировать сайт по старинке, всего лишь в разных браузерах под разными ОС, сейчас не достаточно. Если ваш сайт имеет адаптивный дизайн и использует отзывчивую (responsive) разметку, то при тестировании вы должны позаботиться о том, чтобы он хорошо работал и выглядел, как минимум на современных Android и iOS (iPad, iPhone) устройствах, ну и не забывать про Windows Phone.
И так, как же тестировать верстку современных сайтов. Вариантов несколько, от использования встроенных механизмов эмуляции различной ширины viewport до реального тестирования на виртуальных устройствах. Безусловно, идеальный вариант — это тестирование на реальных физических устройствах, но не всегда есть такая возможность. Поэтому если вам нужно нечто большее нежели простое изменения viewport для проверки стилей ограниченных определенными media-queries, то вам не обойтись без виртаулизации устройств с Android и iOs.
Виртуализация Android устройств
На сегодняшний день вы можете использовать Android SDK, которую предоставляет Google. Для запуска различных профилей Android устройств помимо самой SDK вам понадобиться еще JAVA, но это не большая проблема. Но, дело в том, что скорость работы виртуальных устройств запущенных с помощью SDK в нативной JAVA исполняемой среде весьма печальна. Поэтому, я бы рекомендовал использовать прекрасную штуку под названием Genymotion, программа кроссплатформенная и бесплатная для частного использования.
Все дело в том, что Genymotion использует для виртуализации Oracle VM VirtualBox, что дает просто фантастический прирост производительности виртуальных машин по сравнению с запущенными SDK образами. Кроме того программа использует Open GL для ускорения рендеринга. Помимо это вам доступны все стандартные функции мобильного устройства на виртуальных машинах: Wifi, GPS, заряд батареи, гироскоп, поворот устройства и прочее.
Если вы зарегистрируетесь на сайте, то помимо входящих в базовую сборку нескольких видов устройств в списке доступных, вы сможете загрузить очень много разных видов сборок устройств с сайта программы.
Виртуализация iOS устройств
Здесь только один оптимальный вариант — это использование пакета разработки xCode на реальной или виртуальной машине под управлением Mac OS. xCode предлагает набор готовых образов iPad и iPhone под управлением iOS 6-7 а также эмуляцию ретина-дисплеев. Более того вы можете использовать Safari Dev Tools для инспектирования и онлайн редактирования кода. В сети очень много информации по о том как устанавливать виртуальные образы Mac OS, поэтому у вас не возникнет никаких особенных проблем с этим. Хочется еще раз повторить что на сегодняшний день это единственный наиболее правдоподобный вариант тестирования сайтов в среде iOS, если не считать онлайн сервисов, которые позволяют использовать образы виртуальных машин удаленно с туннелированием.
Виртуализация Windows Phone
На сегодняшний день ситуация довольно однозначна — Windows Phone SDK. Вот цитата с сайта:
Пакет Windows Phone SDK 8.0 — это полнофункциональная среда разработки, которая используется для построения приложений и игр для Windows Phone 8.0 и Windows Phone 7.5. Пакет Windows Phone SDK предоставляет автономный выпуск Visual Studio Express 2012 для Windows Phone или работает как надстройка в выпусках Visual Studio 2012 Professional, Premium или Ultimate. С помощью этого пакета SDK можно использовать имеющиеся навыки программирования и код для построения приложений с управляемым или собственным кодом. Кроме того, этот пакет SDK включает несколько эмуляторов и других инструментов для профилирования и тестирования вашего приложения Windows Phone в реальных условиях.
Собственно все понятно без лишних объяснений, остается добавить лишь то, что среда требует аппаратной поддержки виртуализации, и запустить ее можно только на Windows 8, более поздние версии ОС не подойдут.
Итоги
Подводя итоги всего выше сказанного стоит сказать, что если вам не нужно тестировать работу Java Script в среде устройства, а всего лишь надо взглянуть на отзывчивую статическую верстку, то вам, возможно это все не понадобится. Благо в Google Chrome, встроен прекрасный инструмент эмуляции мобильных устройств, даже с подменой пользовательского агента и эмуляцией тач-событий и геолокацией. Однако, если вы активно используете инструменты интерактивного взаимодействия с пользователем, используете множество обработчиком специфических тач-событий то без виртуализации вам не обойтись. Удачной вам верстки современных сайтов.
68,1% всех визитов на сайты в 2020 году совершались с мобильных устройств
Mobile vs Desktop Usage in 2020
Большинство людей заходят на сайты с мобильных устройств — телефонов и планшетов. Хорошая вёрстка это учитывает и подстраивается под разные размеры экранов, это называется адаптивностью. Разработчику важно проверять, как выглядит вёрстка на мобильных и ничего ли там не сломалось.
68,1% всех визитов на сайты в 2020 году совершались с мобильных устройств
Mobile vs Desktop Usage in 2020
Как проверить мобильную вёрстку в браузере на компьютере?
Самый простой способ проверить вёрстку на мобильных — уменьшить ширину окна браузера или включить режим отладки на мобильных в инструментах разработчика в браузере. Так вы увидите, как выглядит страница на узком экране.
В Хроме нажмите F12 или ⌘+Opt+I, чтобы открыть инструменты разработчика. Затем нажмите кнопку с телефоном и планшетом в левом верхнем углу инструментов или Ctrl+⌘+M, чтобы включить режим отладки на мобильных:
В Сафари сначала включите инструменты разработчика в настройках: меню Safari → «Настройки» → «Дополнения» → «Показывать меню „Разработка“ в строке меню». Затем на странице нажмите Ctrl+⌘+R:
В других браузерах режим отладки на мобильных включается похожим образом.
Почему проверки в браузере на компьютере недостаточно?
Юзерагент — это строка с данными об устройстве, которую браузер передаёт на сервер и на страницу. Иногда проверки юзерагента используют в коде сайта, чтобы управлять его поведением и содержимым для разных устройств
Проверка в браузере на компьютере просто эмулирует маленький размер экрана и иногда подменяет юзерагент. Но для показа страницы используется компьютерный браузерный движок отображения страницы, который может местами отличаться от движков на мобильных устройствах.
Юзерагент — это строка с данными об устройстве, которую браузер передаёт на сервер и на страницу. Иногда проверки юзерагента используют в коде сайта, чтобы управлять его поведением и содержимым для разных устройств
Ещё один минус проверки на компьютере — несоответствие реальному пользовательскому опыту. На компьютере мы обычно пользуемся мышкой или трекпадом, а экран целиком находится перед глазами. На телефоне вместо мышки палец, который может частично закрывать экран, а для перемещения по страницам используются касания и жесты. При проверке на компьютере можно не заметить проблемы с дизайном и взаимодействием, которые возникнут у пользователей на реальных мобильных устройствах.
Зачем проверять вёрстку на реальных устройствах?
Проверка на реальных устройствах — это максимально приближенные к боевым условия. Можно проверить не только правильность работы вёрстки, но и заметить проблемы с дизайном и взаимодействием на устройствах.
Часто у верстальщика под рукой есть как минимум айфон, телефон на Андроиде и айпад — самые популярные у пользователей устройства. В зависимости от задач и проекта, количество устройств с разными прошивками может увеличиваться. Скажем, мне как‑то раз приходилось верстать под сенсорный кассовый аппарат :‑)
Чтобы не плодить вокруг себя тонны ненужных и часто дорогих железок, можно использовать эмуляторы. Важно, чтобы это были не просто программы, которые тупо меняют ширину экрана, а честные эмуляторы или виртуальные машины. Например:
Xcode Simulator — программа для Мака, эмулирует работу Айфонов и Айпадов на разных версиях прошивки;
Genymotion — сервис для эмуляции разных версий Андроид, полноценные виртуальные машины с разными версиями прошивки;
BrowserStack — виртуальные машины мобильных устройств и компьютеров с разными операционными системами и браузерами.
Проверка на устройствах и эмуляторах медленнее, чем проверка в браузере, но и пользоваться ей на постоянной основе обычно не нужно. Во время разработки часто достаточно проверять общую адекватность мобильной вёрстки в инструментах браузера, а на реальных устройствах смотреть время от времени, например, перед релизом новой версии вёрстки или после глобальных изменений в коде.
На дворе 2016 год, и для тестирования разнородных проектов существует уже немало автоматизирующих библиотек, с помощью которых можно проверить поведение даже самых незначительных частей программы. Собрали для вас самые популярные из таких инструментов, предназначенных для мобильной разработки.
Calabash
Это фреймворк для автоматизации функционального тестирования, который является своего рода драйвером, управляющим работой приложения на девайсе или симуляторе. Подходит как для Android-приложений, так и для приложений для iOS. Разработкой и поддержкой занимается компания Xamarin. Также компания Xamarin предоставляет платную услугу тестирования в «облаке». С тем, как это работает, можно ознакомиться тут.
Appium
Это open source фреймворк, который помогает автоматизировать тестирование мобильных приложений. В последнее время Appium часто упоминают на конференциях, а используется он даже Яндексом. Про его установку и настройку можно прочитать здесь.
Robotium
А Robotium предназначен для Android-приложений. С помощью него разработчики могут писать функциональные тесты, охватывающие несколько Android активити. Рекомендуем вот этот вебинар для освоения Robotium.
Espresso
Espresso — это инструмент для тестирования пользовательских интерфейсов Android-приложений. Основной API невелик и прост, но поскольку исходный код инструмента открыт, вы можете расширить его для своих нужд.
iOS UI automation
Это родной инструмент от Apple. Не упомянуть его было нельзя, но сразу стоит оговориться о нескольких минусах:
- Тесты нужно писать на JavaScript.
- Для запуска тестов нужно открывать отдельное приложение, что не слишком удобно, особенно если использовать CI (continuous integration).
- Приложение должно быть подписано. Подписать приложение, может, и не проблема, но делать это, просто чтобы научиться использовать инструмент, мало кому хочется.
UI Automator
Аналог UIAutomation для тестирования Android-приложений. Разрабатывается корпорацией Google и поставляется вместе с Android SDK.
KeepItFunctional
KIF позволит вам проверить то, как ваше iOS приложение воспринимают люди с плохим зрением.
MonkeyRunner
Инструмент monkeyrunner предоставляет API для написания программ, которые управляют Android-устройством или эмулятором извне Android-кода. Вы можете написать программу на Python, которая установит приложение или тестовый пакет, запустит его, отправит нажатия, сделает скриншоты интерфейса и сохранит их.
Ranorex
SeeTest
Ещё один фреймворк для автоматизации тестирования. Код можно расширить с помощью встраиваемых инструментов, а скрипты можно запускать на разных устройствах без изменений. SeeTest также можно использовать для тестирования отзывчивых веб-сайтов и пользовательских интерфейсов.
TestFairy
При публичном тестировании мобильных приложений очень сложно узнать, из-за чего конкретно у пользователя возникла та или иная проблема. TestFairy решает эту проблему, записывая все тесты на видео, а также запоминая технические характеристики устройства.
В жизни фронтендера случается так, что он становится немного верстальщиком. Тут очень важно не попасть в капкан собственной уверенности. Вёрстка как у боженьки на рабочем экране не означает, что такой же крутой результат получился везде.
Представь, тебе дали проект — допустим, какой-нибудь сайт. Дизайн сайта прилетел в виде макета: в Figma, Zeplin (Sketch) или Adobe XD. И вот ты его сверстал.
Настало время тестировать! Что делать? Расскажу по порядку.
Кому советую читать:
- Фронтендерам, которые начали этот увлекательный путь боли, страдания и приключений!
- Всем, кто связан с разработкой. Хотя бы ради мыслей « А Я ТАК НЕ ЛАЖАЮ » .
А теперь к делу.
Погружаемся в тестирование фронтенда: сравните результат с макетом
Учиться на ошибках чужих — хорошо. Для фронтенд-тестирования это правило работает так же хорошо. Вот что случается, если не сверять верстку с макетом.
Сверху экран Contact Us для нашего сайта. Eще год назад он был в разработке. Слева — макет или «то, как должно быть». Справа — то, что получили на выходе.
Или вот еще пример.
Опять то же самое. Макет слева, реальность справа. Тут проблема с баджами.
Сверять верстку с макетом сложно. Но не расстраивать же дизайнера — он это все «рисовал». И заказчика — он заапрувил макет и ждет, что ожидания совпадут с реальностью.
Посмотрите, как все выглядит на разных экранах
Что может случиться, если не учесть размер экрана при тестировании фронтенда? Давайте посмотрим.
При высоте экрана меньше 700px форма Contact us обрезалась, а кнопка Send исчезала вовсе
На каких экранах сайт будет открываться? Необходимо выяснить это с командой на берегу. Так, можно минимизировать неприятные сюрпризы, а пользователи смогут без проблем открыть страницу. Даже на каком-нибудь маленьком экране.
Вот 10 популярных разрешений экрана, на которых пользователи открывают наш сайт:
Было важно, чтобы сайт выглядел хорошо. Как минимум, на каждом из перечисленных
Кто-то любит сидеть за MacBook Air, кто-то обожает огромные дисплеи. Но, открыв страницу сайта, каждый хочет увидеть что-то внятное — круто, когда вёрстка этому не препятствует:)
Протестируйте на кроссбраузерность
Во время фронтенд-тестирования не ограничивайтесь Google Chrome — откройте также Safari, Firefox и Microsoft Edge. Чтобы не произошло такое:
Здесь Safari съел большую часть плейсхолдера «Поиск»
Опять же Safari. Тут страница не заканчивается там, где нужно
Слишком много нашего сайта. Впрочем, ладно. Держите еще один пример.
В MS Edge и в меню, и в под кнопкой Read more есть подчеркивания. А иконка стрелки стала прямоугольником
В процессе фронтенд-тестирования, cкорее всего, придется проверить и «мертвый» Internet Explorer. Статистика посетителей нашего сайта подтверждает факт, что кто-то до сих пор им пользуется.
Как видите, IE попал в десятку
Это же касается и IE 11. Потому что бывает вот так:
Поддержка Internet Explorer — главный страх и боль последних лет. Этот браузер часто остается в стороне. НО пользователи IE живы пока жив сам IE. Так что, проверьте результат работы и там — если ничего не работает, сообщите об этом команде (можно начать с проектных менеджеров).
Маленький совет: Помните о том, что Google Chrome на Mac OS совсем не тот, что на WIndows.
Проверьте верстку на мобильном устройстве (критично для тестирования фронтенда)
Лайтовый вариант, который не вводит в ужас обычных людей, но вводит в ужас дизайнеров:
Уезжающие в никуда иконки
Как часто вы открываете сайты с телефона в обычной жизни? Я — часто 😀 Сейчас смартфон заменяет компьютер, люди от быстрой жизни читают, смотрят, изучают всё с телефона. И если есть возможность использовать сайт мобильной версии, то не забудьте посмотреть, как он выглядит. Зачем? Чтобы пользователь, зашедший на сайт со смартфона не выколол себе глаза от ужаса 😀
Проверьте, как выглядят длинные строки в формах ввода
Допустим, у тебя форма регистрации пользователя с именем, почтой и паролем. И где-то на сайте будет отображаться имя. Именем может быть «Ян», а может «Барнаби Мармадюк Алоизий Бенджи Кобвеб Дартаньян Эгберт Феликс Гаспар Гумберт Игнатий Джейден Каспер Лерой Максимилиан Недди Объяхулу Пепин Кьюллиам Розенкранц Секстон Тедди Апвуд Виватма Уэйленд Ксилон Ярдли Закари Усански». И это не моя бурная фантазия, а реальное имя. Имя, которое может всю верстку сломать 🙂
Тестирование фронтенда: Зачем проверять верстку?
Верстка — это важная часть любого веб-проекта. Это то, что пользователи видят в первую очередь. Это обертка, по которой судят. Сделать ее классной — ваш священный долг!
Просто потому что:
- Проект — это чьи то деньги.
- Каждая мелкая деталь важна.
- Слишком просто верстать только под Chrome.
Выполняя эти непростые простые шаги, вы здорово повысите перформанс проекта. И тогда (возможно не с первого раза) тестировщик, заказчик или менеджер не заставят вас переделывать верстку по сто раз. И будет вам счастье!
Читайте также: