До сих пор мы тестировали продукт как веб-страницу в браузере — включая проверку вёрстки на трёх ширинах экрана через режим адаптивного дизайна DevTools (глава 7). Но браузер на компьютере, притворяющийся телефоном, — это не совсем то же самое, что реальный телефон в руках пользователя. В этой главе разберём мобильное тестирование: чем мобильные продукты отличаются друг от друга, на чём их тестируют, и с чем реально столкнётесь вы на этом курсе.
Чему научишься за этот урок:
— различать mobile web и native-приложение и понимать, почему их тестируют по-разному;
— называть способы получить «телефон» для тестирования: реальное устройство, эмулятор, эмуляция в браузере, облачная ферма устройств;
— понимать, что именно из мобильного тестирования вы попробуете руками на этом курсе, а что разберём только обзорно.
Mobile web против native: два разных продукта
Мобильный продукт бывает двух принципиально разных типов. Mobile web — тот же сайт, что открывается на компьютере, просто адаптированный под маленький экран: один и тот же код, один URL, обновление мгновенное — при следующем открытии страницы пользователь уже видит новую версию, ничего устанавливать не нужно. Наша учебная платформа курсов — это mobile web: та же страница каталога курсов, что мы проверяли в главе 7, на телефоне открывается по тому же адресу в мобильном браузере. Native-приложение — отдельная программа, написанная под конкретную операционную систему (для Android — файл APK, для iOS — сборка, публикуемая через App Store), устанавливается из магазина приложений, может глубже работать с возможностями устройства (push-уведомления, камера, контакты, офлайн-режим) — но и обновляется не мгновенно: пользователь получает новую версию только после того, как её опубликуют в магазине и он сам обновит приложение.
Mobile web: Native-приложение: - тот же сайт, адаптированный - отдельная программа под ОС под маленький экран (Android: APK, iOS: App Store) - открывается в браузере, - устанавливается из магазина ничего не устанавливать приложений - обновление мгновенное - обновление после публикации (следующее открытие страницы) И обновления пользователем - доступ к устройству ограничен - глубокий доступ: push, камера, тем, что даёт браузер контакты, офлайн-режим
Как получить «телефон» для тестирования
Проверить продукт на реальном телефоне надёжнее всего — но держать парк из десятков разных моделей Android и iOS дорого и не всегда возможно. На практике используют несколько подходов:
- Реальное устройство — самый точный результат: настоящая ОС, настоящая сеть, настоящая батарея. Но моделей телефонов сотни, и парк под все не соберёшь.
- Эмулятор (Android) или симулятор (iOS) — программа на компьютере, которая имитирует ЦЕЛУЮ операционную систему телефона: Android Studio запускает эмулятор Android, Xcode — симулятор iOS. Бесплатно, доступно сразу, хватает для большинства функциональных проверок — но не полностью повторяет реальное устройство (например, реальную нестабильную сеть или поведение настоящей батареи).
- Эмуляция в браузере (DevTools) — тот самый режим адаптивного дизайна из главы 7, только теперь с выбором конкретных моделей устройств (iPhone, Pixel и т.д.), а не произвольной ширины. Быстрее всего для проверки mobile web-вёрстки, но это по-прежнему браузер на компьютере, а не отдельная операционная система — часть мобильного поведения он не воспроизводит.
- Облачная ферма устройств (например, BrowserStack, Firebase Test Lab) — сервис, который даёт удалённый доступ к настоящим физическим телефонам через интернет. Используют в индустрии, когда свой парк устройств недоступен или недостаточен — в этом курсе мы этот способ не настраиваем, только называем как существующий инструмент рынка.
Что из этого вы попробуете на этом курсе
Наша учебная платформа — сайт, а не отдельное приложение под Android или iOS. Поэтому практика на курсе — это mobile web: та же эмуляция в DevTools, что и в главе 7, но теперь с выбором конкретных моделей устройств вместо произвольной ширины. Native-приложения (APK, IPA, магазины приложений, push-уведомления) в этом уроке и следующем разбираем только обзорно — как факт индустрии и тему для собеседования, без сборки реального приложения: у нас его просто нет. Это честное ограничение курса, не сокрытие темы.
Совет: на собеседовании достаточно уверенно объяснить разницу mobile web/native и назвать способы получить «телефон» для тестирования — глубокая экспертиза по сборке native-приложений не требуется от manual QA, это отдельная специализация.
Итог:
— mobile web — тот же сайт, адаптированный под маленький экран, без установки; native — отдельная программа под ОС, из магазина приложений, с более глубоким доступом к устройству;
— способы получить «телефон» для тестирования: реальное устройство (точнее всего, дорого держать парк), эмулятор/симулятор (бесплатно, почти всё функциональное), эмуляция в браузере DevTools (быстрее всего для mobile web-вёрстки), облачная ферма устройств (доступ к реальным устройствам удалённо);
— на этом курсе практика — mobile web через DevTools с выбором моделей устройств, native разбираем только обзорно.
Контрольный вопрос. В чём принципиальное отличие mobile web от native-приложения?
Подсказка: Вспомни, нужно ли что-то устанавливать в каждом случае.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Контрольный вопрос. Что происходит с mobile web-продуктом при выходе новой версии?
Подсказка: Подумай, нужно ли пользователю сайта что-то отдельно устанавливать, чтобы увидеть новую версию.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Контрольный вопрос. Что из перечисленного — эмулятор или симулятор для мобильного тестирования?
Подсказка: Слово «эмулятор» — про имитацию, не про реальное устройство и не про облако.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Контрольный вопрос. Что такое облачная ферма устройств (например, BrowserStack)?
Подсказка: В названии есть слово «облачная» — подумай, где физически находятся устройства.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Контрольный вопрос. Какие из перечисленных признаков относятся именно к native-приложению (выбери все подходящие)?
Выберите все верные варианты.
Подсказка: Два признака — про native, два других — про mobile web. Сверься с ASCII-таблицей урока.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Контрольный вопрос. Как называется мобильный продукт, который представляет собой тот же сайт, просто адаптированный под маленький экран, без установки? Ответь двумя словами по-английски.
Подсказка: Название есть в самом начале урока и встречается многократно.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Задание. Наша учебная платформа курсов — это сайт с каталогом курсов, регистрацией и оплатой, без отдельного приложения в Google Play или App Store. К какому из двух типов мобильных продуктов она относится? Ответь двумя словами по-английски.
Подсказка: Вспомни определение из урока — есть ли у нашей платформы отдельная программа, которую нужно ставить из магазина.
✅ Готово, если: ты ввёл(а) верный ответ, и онлайн-проверка его приняла.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Задание. Тестировщику нужно быстро проверить, не наезжают ли друг на друга элементы каталога курсов на экране iPhone 14, не устанавливая ничего дополнительно и не покидая браузер на компьютере. Какой способ получить «телефон» для тестирования подходит лучше всего? Ответь тремя словами по-русски.
Подсказка: Вспомни, какой способ из списка не требует ничего устанавливать и работает прямо в браузере на компьютере.
✅ Готово, если: ты ввёл(а) верный ответ, и онлайн-проверка его приняла.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Задание. Объясни в 2-3 предложениях, почему эмулятор Android (Android Studio) — это не то же самое, что проверка mobile web-вёрстки через DevTools в браузере, хотя оба варианта не требуют реального телефона.
Критерий приёмки: объяснено, что эмулятор Android имитирует ЦЕЛУЮ операционную систему (можно тестировать любое приложение, не только браузер), тогда как DevTools — это по-прежнему десктопный браузер, который лишь меняет заявленную ширину экрана и модель устройства, оставаясь тем же браузером, а не отдельной ОС.
Подсказка: Вспомни, что именно имитирует каждый из двух способов — целую операционную систему или только браузер, который выглядит иначе.
✅ Готово, если: программа запускается без ошибок и выводит то, что просят в задании.
Онлайн-проверка ответа появится позже
Задание. Команда планирует выпустить новый раздел «Отзывы о курсах», доступный и на десктопе, и в мобильном браузере (mobile web), без отдельного native-приложения. Бюджета на парк физических телефонов нет. Предложи сочетание способов получения «телефона» для тестирования этого раздела на разных этапах — от быстрой проверки вёрстки до более точной проверки перед релизом — и обоснуй выбор каждого способа в 2-3 предложениях.
Критерий приёмки: предложена связка минимум из двух разных способов урока (например, сначала эмуляция в браузере DevTools для быстрой проверки вёрстки на разных моделях, затем эмулятор/симулятор или облачная ферма устройств для более точной проверки перед релизом), с объяснением, почему каждый способ подходит именно на своём этапе (скорость против точности, отсутствие своего парка устройств).
Подсказка: Подумай, какой способ логичнее использовать СНАЧАЛА, когда вёрстка ещё дорабатывается и важна скорость, а какой — уже ПЕРЕД релизом, когда нужна точность и нет своего парка устройств.
✅ Готово, если: программа запускается без ошибок и выводит то, что просят в задании.
Онлайн-проверка ответа появится позже
Что дальше
Мы разобрали, какие бывают мобильные продукты и как их тестируют технически. В следующем уроке — практический чек-лист мобильного тестирования: что именно проверять кроме вёрстки — прерывания, разрешения, сеть, ориентация экрана и жесты.
