Александр Зиновьев, Test Lead портфеля проектов Enviance в Softengi в своей презентации рассказывает о тестировании веб-приложений на iPad - тема, которая является чрезвычайно актуальной сегодня в мире тестирования, где ПК быстро вытесняются мобильными устройствами. 21 век, технологии бегут вперед, ноутбуками уже никого не удивишь. Производители всяческих девайсов стремятся мобилизировать окружающий мир телефонами, планшетами. В ответ этому прогрессу множество компаний начинает выпускать мобильные версии своих продуктов: как с ними бороться тестировщику, на что необходимо обратить внимание в первую очередь и что стоит не упустить?
2. О себе
• Зиновьев Александр
• Работаю в тестировании уже почти 3 года
• Software Tester, Test Lead
• Компания Softengi
• Проект Enivance (50 человек на проекте)
3. О компании
• Компания Softengi – поставщик услуг в области разработки ПО
• Мы работаем преимущественно на рынках Европы и США
• 16+ лет опыта в области разработки программного обеспечения
• Компания входит в Intecracy Group, международный ИТ консорциум
О проекте
• Отдел тестирования – 20 человек
• Выделенный Test Manager + 5 QC Leads
• Приложение – ERP система по анализу выбросов в окружающую среду
• Проект – мамонт (12 лет разработки, 21 модуль + дополнения)
Больше о нас:
www.softengi.com
www.facebook.com/softengi_ua
4. План
1. Немного теории об устройствах
2. Разрешения экранов мобильных устройств
3. Соединение с интернетом
4. Приоритетные устройства для тестирования
5. На что стоит обращать внимание в первую очередь при тестировании?
6. Интерфейс и кнопки
7. Обновления OS и браузеров
8. Практика тестирования карт
9. Использование Proxy
10. Печать с iPad
11. Итоги
6. Разрешения и диагональ
экрана iPad
• обычный дисплей с разрешением 1024 * 768 пикселей
• Retina display с разрешением 2048 * 1536 пикселей
• Экраны бывают 7,9” и 9,7”
7. Разрешения экрана Android
У устройств работающих под управлением ОС Android существует
большое множество разрешений экрана из-за массы производителей и
разницы диагоналей экранов
9. Какое устройство выбрать?
Если не важны специфические характеристики устройства, выбор
необходимо делать в сторону самого приоритетного устройства, которым
пользуется большинство пользователей вашего продукта.
10. Что тестировать в первую
очередь
Повороты экрана Работа интернета через 3G и WiFi
Кнопки:
большие удобные
Работа GPS
Версии iOS
Прогресс индикаторы
Кроссбраузерность
11. Интерфейс и кнопки
Очень важно в мобильных приложениях - это удобные и понятные
элементы управления. Каждый элемент веб-приложения должен быть
такого размера, чтобы пользователь мог однозначно попасть по нему
12. Интерфейс и кнопки
• Скорость отклика – пользователь должен получать быструю реакцию от
нажатия на элемент управления
• У всех нажимаемых элементов должно быть нажатое состояние
13. Обновления
- При обновлениях приложения необходимо обязательно проверять, что
новая версия приложения работает с теми же версиями iOS, что и
предыдущая
- Если есть необходимость – создавать версию с урезанным
функционалом для предыдущих версий iOS и браузеров
- Случай из практики: в iOS 6 в нашем приложении была проблема с
клавиатурой, в iOS 7 эта проблема больше не воспроизводилась
14. Браузеры
- Обязательно надо удостоверится что приложение работает как на
новых, так и на старых версиях браузеров
- Производители браузеров очень часто не выпускают обновления
версий браузеров под предыдущие версии Android (3.x.x) и iOS (3.x,
4.x)
15. Messages! Must have!
Про что не стоит забывать как при разработке так и при тестировании
таких приложений:
• Сообщения при загрузке контента, progress-bar
• Сообщения при
попытке удалить важную
информацию
• Экран или сообщение
при окончании процесса
работы с приложением
16. Страницы приложения
Будь это веб-приложение для мобильных устройств или приложение для
iPad, Android, в нем должны отсутствовать пустые экраны
17. Наш проект
- Изначально Web-приложение для iPad, работает с Safari, встраивается
в основное приложение заказчика
- Требованием заказчика
было, чтобы это
приложение работало
с Google Maps через
API
- На карте по
координатам
отображались офисы
заказчика.
18. Google Maps vs …?
Изначально использовалось API Google Maps
Но цена использования Google Maps стартовала от 10 тыс $ в год
В результате исследования были выбраны бесплатные карты Mapbox.
19. Google Maps vs MapBox?
На практике хуже только UI и есть небольшой баг API
20. Google Maps vs MapBox?
На практике хуже только UI и есть небольшой баг API
21. Proxy
Из сображений security наше приложение работает во внутренней сети, а
картам нужен доступ в интернет, для этого мы используем Proxy
- На iPad Proxy настраивается через настройки WiFi и браузера
- А для Android-девайсов требуются сторонние программы, причем
большинство из них являются платными
22. Внешне похожи – другие
внутри
У нас для тестирования был iPad 1 и iPad Mini
Заказчик пользовался iPad 4
iPad 1 уступал по производительности во многом: даже открытие окон
было очень тяжелой операцией
23. Печать с iPad
Еще одно требование заказчика – это печать с приложения
Но iPad с простыми принтерами не очень дружелюбен.
Для печати с iPad в сети должен быть специальный принтер,
поддерживающий технологию печати AirPrint
Сейчас таких принтеров выпускается достаточно большое количество
24. Печать с iPad
Так как мы решили сразу не бежать в магазин за принтером, хорошим
выходом из этой ситуации было – это использование эмуляторов
Есть и для iOS и для Windows
- AirPrint Activator – позволяет печатать с любого iOS устройства на
сетевой принтер
Эмуляторы в iPad
- PDF Printer
- WEB To PDF
25. Итоги:
1. Выбираем приоритетную среду тестирования
2. Вид приложения при разных разрешениях экрана
3. Элементы управления и их скорость отклика
4. Корректные информативные сообщения
5. Работа приложений с WiFi и 3G
6. Работа приложения с GPS
7. Всегда помним о обновлении OS и браузеров
8. Корректная работа приложения с AirPrint
Последние несколько лет развитие рынка портативных устройств, планшетов шагнуло довольно сильно вперед.
Большое количество сайтов разрабатываются с возможностью использования на мобильных устройствах: планшетах
На диспее Retina элементы интерфейса или текст могут быть мельче
Если приложение или веб-сайт разрабатывался под iPad с Retina display с соответсвующими картинками большого резрешения, то при открытии сайта на предыдущих моделях iPad – картинки могут быть очень большими
Если приложение разработано для планшетов, при открытии оно должно подстраиваться на весь экран, не должно быть пробелов, рамок или растянутых элементов
Выпускают под Android: samsung, asus, acer, hp, htc, lg, sony, toshiba
И это еще далеко не все производители
Диагонали экрана: 6, 7, 8, 9, 10, 12 “
Специфические характеристики: такие как процессор, тип, сеть не имеют значения
(google analytics позволит это определить )
Каждый элемент на веб-приложения должен быть такого размера, чтобы пользователь мог однозначно попасть по ним
Например Chrome для мобильных устройств получил поддержку с версии Android 4.0 и iOS 5.0
А вот Firefox работает на устройствах с ОС Android 2.2 + и вовсе не работает с iOS
основной для iOS – это Safari, но второй по поулярности среди пользователей – это Chrome
Сообщения при загрузке контента, progress bar – человек должен видеть что приложение работает
Будь это веб-приложение для мобильных устройств или приложение для iPad, Android, должны отсутствовать пустые экраны, их надо
- опускать
- или добавлять пояснительный текст для первого открытия
Интересные кейсы с картами, приближение, отдаление, ограничение области по поисковому запросу
Mapbox + leafletJS, точно такую же использует FourSquare
Если начать листать карту влево, то карта мира отрисовывается еще, но при этом уже без обьектов на карте
Живой интерес тестировщика не даст уснуть, и мы решили сделать тестовый запуск приложения на Android, оказалось что это не так и легко, на Android требуются сторонние программы для работы с Proxy, при чем большинство из них платны
Проблемма номер один, с которой мы столкнулись – у нашего заказчика был iPad 4, а у нас iPad 1-ого поколения:
Разница была существенная, очень была заметна на довольно простых операциях, как открытие всплывающих окон, перелистывание окон, отрисовывалось все сложно и медленно
iPad Mini работал быстрее с этим приложением
AirPrint Activator устанавливается на компьютер в сети, к которому подключен обыкновенный принтер, после установки этого приложения, ipad распознает этот принтер как принтер с портом AirPrint
Вид приложения при разных разрешениях экрана – веб-приложение должно выглядеть хорошо на любом экране