Тестирование сайта на мобильных устройствах онлайн: Где тестировать вёрстку сайта для мобильных устройств? — Хабр Q&A

Тестирование мобильной версии сайта без мобильного устройства

Автор: Франсуа Ле Нотр (Francois Le Notre) Оригинал статьи: https://www.lyontesting.fr/en/testing-mobile-website-without-any-mobile-device-at-what-cost Перевод: Ольга Алифанова Эта статья – продолжение статьи Стефана про разнообразие методик для тестирования мобильных приложений в условиях нехватки физических устройств: ‘Как тестировать на мобильных телефонах, не имея телефонов?’ Учитывая, что современные репрезентативные смартфоны стоят недешево, и несмотря на то, что некоторые платформы – например, французская BackMarket – продают их по сниженной цене, очень заманчиво использовать бесплатные и простые способы тестировать мобильные версии сайтов – например, браузерные симуляторы – вместо устройств как таковых. К примеру, ввести адрес сайта или нажать на ссылку в избранном через заранее настроенный на адаптивную верстку десктопный браузер куда быстрее, чем вводить адрес вручную в мобильном приложении, или через несколько тапов из избранного. Если тестовое устройство у вас под рукой, то вы все равно сэкономите секунд пятнадцать. Можно выиграть и больше времени: в ситуации с iOS-платформой и ее XCode IDE запуск симулятора с последними сборками избавляет от проблем с сертификатами, которые требуются для установки сборки на реальное устройство. Если у вас нет минимального представления, что именно нужно делать, то по опыту могу сказать, что решение этих вопросов может занять длительное время – минимум полчаса – и потребовать подключения к процессу коллег, что повышает риски и усложняет зависимости в задаче. Эта экономия может привести к формированию удобных устойчивых привычек, а они, как известно, враги разнообразия – и следовательно, враги тестировщика. Правильный вопрос звучит вовсе не как «Сколько времени и денег мы можем сэкономить, используя разнообразные бесплатные инструменты?». Скорее это «Можем ли мы тестировать при помощи различных инструментов, которые если и не идентичны реальным устройствам, то хотя бы приемлемы для того, чтобы доверять поведению нашего приложения на них?» Я три года проработал для сайта Net-a-porter.com (группа компаний Yoox) в команде, ответственной за мобильные приложения для iOS и Android. То, чему я научился в плане тестирования без использования физических устройств,  я и изложу в этой статье, посвященной мобильным версиям сайтов. User Agent Пример: расширение User Agent Switcher для Chrome Представьте, что User Agent – это краткий список характеристик, которые браузер отправляет на сервер для авторизации, похожий на паспортные данные: дата рождения, пол, и т. д. Имеющиеся в наличии плагины позволяют легко имитировать специфическую «личность» – сервер может «увидеть» вас как iPhone, хотя вы просматриваете сайт через десктопный Chrome, и покажет вам содержание и форматирование сайта так, как будто вы пользуетесь реальным смартфоном. Позволяющий это полезный плагин User Agent Switcher доступен в магазине Chrome. Достоинство этого инструмента – это возможность быстро протестировать текстовые поля и, тестируя локализацию, найти непереведенные участки текста и места, где текст вообще не отображается. Однако он только имитирует отображение для определенной платформы, и неверно масштабирует дисплей. В результате проверить, к примеру, длинные названия полей на немецком и убедиться, что они не ломают верстку или расположение кнопок, довольно сложно. Преимущества Быстрая проверка текстов на сайте (переводы, юридическая информация…) Недостатки Нерелевантен для всех прочих тестов, так как зависит от десктопной платформы, не коррелирующей с реальными физическими смартфонами. Инструменты разработчика Стефан в своей вышеупомянутой статье демонстрирует адаптивное отображение сайтов в Chrome, позволяющего точнее проверить отображение элементов сайта на той или иной мобильной платформе: это решает вопрос с вышеупомянутыми длинными немецкими названиями кнопок. Однако этим инструментам нельзя доверять, проводя функциональные проверки: они опираются на десктоп-платформу, которая, как уже говорилось, никак не связана с реальными мобильными устройствами. Комбинируя эти инструменты с User Agent, можно быстро собрать информацию, которая остается невидимой глазу, если вы тестируете на реальном устройстве: во вкладке «Сеть» будут подсвечиваться отклики сервера, и медленный отклик или пропавшие запросы помогут разобраться в причинах непредвиденного поведения системы. При помощи этих инструментов можно также управлять cookie-файлами, тестируя безопасность. С другой стороны, эти инструменты – большое подспорье, когда мобильное устройство подключено к настольному компьютеру. Настроить их можно максимум за час, а прокси-инструменты позволяют перехватывать запросы сайтов и анализировать их. К примеру, браузер Safari отображает подключенное устройство и предлагает набор своих инструментов для тестирования. Преимущества: Адаптивные инструменты позволяют быстро протестировать верстку. Легко получить доступ к разнообразным эффективным инструментам. Недостатки Инструменты разработчика отличаются от браузера к браузеру, что приводит к тому, что тестирования в одном браузере недостаточно для целей вашего приложения. Нельзя доверять функциональным тестам. Симулятор Симулятор, хоть и требует настройки большого количества инструментов, позволяет куда больше в плане наблюдений за поведением приложения, чем вышеупомянутые инструменты. Отображение сайта куда более релевантно, чем при использовании инструментов браузера, и позволяет менять реальные настройки мобильных браузеров и мобильных ОС, хотя доступна не вся функциональность (к примеру, недоступна камера). Я зачастую использовал симуляторы для быстрой обратной связи по функциональности приложений и для smoke-тестов при валидации новой сборки. Они улучшают тестовое покрытие за счет покрытия конфигураций устройств, которых нет под рукой у команды или компании – особенно для Android, где количество возможных конфигураций очень велико. Стоит, однако, учитывать, что при использовании симулятора вы кликаете мышью на экране, а не используете тап на небольшом дисплее смартфона: соответственно, невозможно получить представление о реальном пользовательском опыте. Кроме того, симуляторы тоже используют ресурсы настольного ПК, и вы не можете судить о скорости отклика, производительности и отклику приложения на тап. Еще один недостаток симуляторов – это баги, всплывающие в мобильном браузере, но отсутствующие в симуляторе: например, это редиректы URL, затрудняющие доступ к таким страницам, как пользовательское соглашение. Преимущества Позволяют провести большую часть функционального тестирования – ограничения описаны в разделе недостатков ниже. Можно использовать для smoke-тестирования Улучшают тестовое покрытие, позволяя тестировать на конфигурациях железа, недоступных внутри компании. Недостатки Зачастую требуют установки целой экосистемы, что может занять много времени: IDE, подписки и учетки для iOS-платформы, одна версия SDK для каждой версии OS, нуждающейся в тестировании. Невозможно оценить пользовательский опыт: отклик на тап, проблемы «толстых пальцев», соответствие расположения элементов друг другу в процессе использования, и т. д. Полагаются на ресурсы компьютера, невозможно оценить реальную производительность. Не дают доступа к всем функциям ОС/устройства/браузера (например, к камере). Эмулятор Я никогда не тестировал мобильные сайты/приложения при помощи эмуляторов, поэтому по этой теме мне нечего сказать. Все, что я знаю – это то, что эмуляторы предположительно должны работать на схожей с устройством конфигурации оборудования, устраняя недостаток, упомянутый выше для симуляторов. Облачные сервисы Их уже описал Стефан в своей статье, и ими я тоже не пользовался. Физическое устройство Не будем забывать про «Геракла» мобильного тестирования, физические устройства! О чем мы пока не говорили, так это о качестве изображений: симулятор полагается на характеристики вашего настольного монитора, и в результате тяжело обнаружить изображения плохого качества и размытые картинки, которые сразу бросятся в глаза на мобильном экране. Мой опыт общения с iOS показывает, что ресурсы для Retina-дисплеев требуют особого уровня качества (например, для iPad версии 3 и выше) и отличаются от обычных дисплеев (iPad версии 2 и ранее). Это «скрытое» функциональное требование, и про него легко позабыть в юзер-стори, если оно явно не прописано в критериях приемки. Преимущества Наилучший инструмент для тестов, опирающийся на реальные ресурсы железа и ПО. Позволяет оценить качество изображений. Недостатки Стоимость устройств, которую необходимо закладывать в бюджет. Необходимость делиться устройствами с другими членами команды может превратиться в «бутылочное горло» проекта: распланируйте управление устройствами внутри команды заранее! В чем ценность этой статьи? В том, что доступные для тестирования мобильных сайтов инструменты – это методы, только временно ускоряющие часть ваших тестов. Используя их с умом, вы можете повысить тестовое покрытие и снизить риски, но никто не гарантирует вам, что ваш продукт будет аналогично работать на наиболее важных для вас физических устройствах – тех, которые используют ваши пользователи. Всегда имейте под рукой ряд устройств для тестирования на них. Если ваша компания не хочет инвестировать в реальные смартфоны, возможно, они чересчур верят в инструменты и не относятся к их релевантности реальному миру критически. В этом случае я надеюсь, что в моей статье достаточно аргументов «за» покупку смартфонов. Обсудить в форуме

Как протестировать свой сайт на мобильных устройствах

В этой статье будут показаны достаточно хорошие инструменты, при помощи которых вы сможете протестировать свой сайт на мобильных устройствах и проверить его кросс-браузерность

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

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

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

TestiPhone

Это симулятор на основе веб-браузера для быстрого тестирования веб-приложений iPhone.

Screenfly

Протестируйте ваш сайт на различных устройствах, включая ПК, планшетах, ТВ и мобильных телефонах

The Responsinator

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

Mobile Phone Emulator

Mobile phone emulator что позволяет проверить отображение любого веб-сайта во многих мобильных телефонах.

ProtoFluid

ProtoFluid упрощает разработку отзывчивых и адаптивных макетов

iPhoney

iPhoney является веб-симулятором iPhone. Он предназначен для разработчиков и дизайнеров которые разрабатывают веб-сайтовы и приложения для iPhone.

ResponsiView

Еще один сервис для тестирования адаптива вашего сайта, пробуйте.

Ripple Emulator

App для Google Chrome, основан на HTML5 поможет разрабатывать приложение и сразу их тестировать.

Resize My Browser

Простой, удобный и красивый «ресайзер» для браузера. Кликните по нужному вам разрешению и Resize My Browser создаст новое окно нужного размера

iPhone Tester

Название говорит само за себя, любители iPhone 😉

Demonstrating Responsive Design Tool

Сервис поможет протестировать адаптивность вашего сайта.

Responsive Test

Тестируйте адаптивные сайты.

Responsivepx

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

Responsivepx

Responsive Test

Mobile Emulator by Brickandmobile

Протестируйте ваш сайт на мобильном телефоне через наш мобильный эмулятор.

Matt Kersley’s Responsive Design Tool

Очередной сервис для тестирования отзывчивого дизайна

CrossBrowserTesting

Данный сервис позволяет протестировать кросс-браузерность макета в десятках браузеров с мгновенным результатам.

Multi-Browser Viewer

Еще один сервис для тестирования кросс-браузерности сайта

Browshot

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

Opera Mini Simulator

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

По данным статистического сервиса StatCounter, мобильные браузеры на фоне всех браузеров, установленных на различных типах устройств – на ПК, ноутбуках, планшетах, смартфонах и т.п. – заняли второе почётное место с долей рынка в 15,8%. Первенство в этом списке долгое время удерживает десктопный браузер Google Chrome, и по итогам прошедшего года он занял почти 40% рынка. Мобильным браузерам всем вместе удалось опередить таких десктопных монстров, как Mozilla Firefox, Internet Explorer, Microsoft Edge, Opera, Safari.

Опередили они и веб-обозреватели, установленные на планшетах. StatCounter отдельно подсчитывает визиты пользователей с мобильных устройств (смартфонов и телефонов) и отдельно с планшетов. Так вот планшетным браузерам досталось всего лишь 2,5% рынка.

Актуальность мобильных устройств со временем будет только расти, мобильный Интернет – только развиваться. Эти факты очевидны. И адаптация сайтов под мобильные устройства – давно уже не полезный совет их владельцам, а факт Must Have. При создании сайта или блога необходимо подбирать адаптивный веб-дизайн, чтобы содержимое ресурса удачно смотрелось на экране любого устройства. Но заботиться о корректности интерфейса в mobile-версии нужно не только веб-дизайнерам, владельцам сайтов или блоггерам. В процессе раскрутки YouTube-канала или аккаунтов в соцсетях их авторам не лишним будет время от времени отслеживать юзабилити публикуемого контента в мобильных браузерах. Безусловно, мобильная адаптация интерфейса соцплощадок – сфера ответственности их создателей. Но насколько удачно для маленьких экранов подобраны превью видеороликов, фото публикаций или текстовый формат, это уже зависит от самих авторов контента.

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

1. Режим разработчика в Google Chrome

Десктопный браузер Chrome предусматривает возможность тестирования сайтов в mobile-формате. Находясь на тестируемом сайте, необходимо клавишей F12 запустить режим разработчика и включить отображение мобильной версии. Такая функция режима разработчика предусматривает адаптацию интерфейса под экраны распространённых смартфонов и позволяет задавать произвольные разрешения.

После задания настроек, возможно, потребуется обновить страницу. В итоге по центру окна Chrome увидим сайт так, как он смотрелся бы на экране устройства с выбранными параметрами экрана.

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

2. Расширение для Chrome Mobile Browser Emulator

Другой способ посмотреть, насколько читабельно смотрится сайт на различных экранах – использование Chrome-расширения Mobile Browser Emulator. Оно встраивается на панель инструментов браузера и являет собой небольшое окошко с настройками запуска страницы в формате, адаптированном под разные разрешения и диагонали экрана. Первым делом необходимо указать расширению реальную диагональ экрана – диагональ используемого монитора или ноутбука, чтобы отображение веб-контента адаптировалось максимально корректно. В строке «monitor size» прописываем диагональ и жмём кнопку рядом «set».

Теперь можно приступать к тестированию. Чтобы проверить юзабилити сайта на планшетах, кликаем графу «Tablet» и последовательно применяем различные пресеты: в графе «real screen size» указываем размер экрана планшета, затем чуть выше выбираем одно из двух типичных для этих устройств разрешений.

В графе «Phones» представлены три типа стандартных разрешений экранов смартфонов и телефонов.

После выбора настроек тестируемый сайт откроется в отдельном окошке и будет выглядеть так, как выглядел бы в окне выбранного устройства, в частности, в mobile-версии на маленьких экранах.

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

Расширение не эмулирует сенсорное управление, пролистывать сайты в окошках реализуемого им mobile-формата можно обычным скроллингом при помощи колеса мыши.

3. Opera Mobile Classic Emulator

Специально для тестирования mobile-версий сайтов разработчик Opera Software создал эмулятор своего мобильного браузера Opera Mobile – Opera Mobile Classic Emulator. Это бесплатная программа для Windows, Mac и Linux. При её запуске необходимо выбрать предпочитаемый язык.

Затем указать параметры эмулируемого устройства – либо выбрать его из перечня слева из числа известных смартфонов и планшетов, либо оставить значение «Custom» и самостоятельно определить параметры в блоке справа. В этом блоке для устройства можно указать разрешение, DPI, тип эмулируемого управления (сенсорный, с помощью клавиатуры или мыши), масштаб и пр. По итогу жмём «Запустить».

И далее в отдельном окошке можем тестировать тот или иной сайт. Программа полностью эмулирует браузер Opera Mobile с его интерфейсом и функционалом.

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

Подходы к тестированию мобильных приложений

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

На основе эмуляции

Эмуляторы являются отличным способом для начала тестирования. Они помогают обнаружить большинство ошибок на самой ранней стадии жизненного цикла разработки ПО. Если в наличии нет необходимых девайсов или нужное устройство занято другим тестировщиком, в помощь приходят мобильные эмуляторы, которые способны полностью имитировать поведение смартфона/планшета. Изначально они разрабатывались для тестирования, поэтому являются частью SDK разработчика. Удобно, что эмуляторы запускаются на ПК или серверах, более мощных устройствах, чем смартфон. Но из-за этого некоторые ошибки могут быть не обнаружены или вызвать неправильное представление, например, время отклика или производительность приложения.

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

Для лучшего результата тестирования лучше использовать смешанный подход – с помощью эмулятора и девайса. При таком подходе придется только распределить тесты.

В облаке

Облако устройств – это мобильная среда, которая включает реальные устройства Android и iOS с различными комбинациями версий ОС, размерами экрана, оперативной памяти и многое другое. Облачные устройства являются отличным решением для крупномасштабного мобильного тестирования.

Тестирование в облаке позволяет подключаться к разнообразным мобильным устройствам независимо от их местоположения. Устройства поддерживают параллельное тестирование, подходят для быстрой разработки, записывают результаты и доступны 24/7. Что касается безопасности, то можно выбрать частное облако вместо общедоступного.

В реальном облаке устройств тестировщик может протестировать пользовательский интерфейс на каждом устройстве, измерить производительность, наблюдать за тем как работает приложение с разряженной батареей, а также когда находится в автономном режиме и т. д.

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

На базе устройств

Тестирование мобильных приложений на базе устройств показывает наилучшие результаты, так как ПО предоставляется в точности такое же как для конечного пользователя. При тестировании на реальных мобильных устройствах учитываются все особенности ОС, а также качество обслуживания сети (QoS).

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

С использованием краудсорсинга

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

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

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

С помощью данного подхода можно получить важную обратную связь по улучшению UX и обеспечению удобства использования.

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

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

Тестирование верстки в Android, iPhone, iPad, Windows Phone

На сегодняшний день, современный сайт — это сайт который сверстан с использованием адаптивных технологий и имеет нужно представление для большинства мобильных устройств, как минимум смартфонов и планшетов. Поэтому тестировать сайт по старинке, всего лишь в разных браузерах под разными ОС, сейчас не достаточно. Если ваш сайт имеет адаптивный дизайн и использует отзывчивую (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, встроен прекрасный инструмент эмуляции мобильных устройств, даже с подменой пользовательского агента и эмуляцией тач-событий и геолокацией. Однако, если вы активно используете инструменты интерактивного взаимодействия с пользователем, используете множество обработчиком специфических тач-событий то без виртуализации вам не обойтись. Удачной вам верстки современных сайтов.

Применение ферм девайсов в тестировании мобильных приложений — Сервисы на vc.ru

Firebase Test Lab vs Microsoft App Center

{«id»:166540,»url»:»https:\/\/vc.ru\/services\/166540-primenenie-ferm-devaysov-v-testirovanii-mobilnyh-prilozheniy»,»title»:»\u041f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0444\u0435\u0440\u043c \u0434\u0435\u0432\u0430\u0439\u0441\u043e\u0432 \u0432 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439″,»services»:{«facebook»:{«url»:»https:\/\/www.facebook.com\/sharer\/sharer.php?u=https:\/\/vc.ru\/services\/166540-primenenie-ferm-devaysov-v-testirovanii-mobilnyh-prilozheniy»,»short_name»:»FB»,»title»:»Facebook»,»width»:600,»height»:450},»vkontakte»:{«url»:»https:\/\/vk.com\/share.php?url=https:\/\/vc.ru\/services\/166540-primenenie-ferm-devaysov-v-testirovanii-mobilnyh-prilozheniy&title=\u041f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0444\u0435\u0440\u043c \u0434\u0435\u0432\u0430\u0439\u0441\u043e\u0432 \u0432 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439″,»short_name»:»VK»,»title»:»\u0412\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u0435″,»width»:600,»height»:450},»twitter»:{«url»:»https:\/\/twitter.com\/intent\/tweet?url=https:\/\/vc.ru\/services\/166540-primenenie-ferm-devaysov-v-testirovanii-mobilnyh-prilozheniy&text=\u041f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0444\u0435\u0440\u043c \u0434\u0435\u0432\u0430\u0439\u0441\u043e\u0432 \u0432 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439″,»short_name»:»TW»,»title»:»Twitter»,»width»:600,»height»:450},»telegram»:{«url»:»tg:\/\/msg_url?url=https:\/\/vc.ru\/services\/166540-primenenie-ferm-devaysov-v-testirovanii-mobilnyh-prilozheniy&text=\u041f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0444\u0435\u0440\u043c \u0434\u0435\u0432\u0430\u0439\u0441\u043e\u0432 \u0432 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439″,»short_name»:»TG»,»title»:»Telegram»,»width»:600,»height»:450},»odnoklassniki»:{«url»:»http:\/\/connect.ok.ru\/dk?st.cmd=WidgetSharePreview&service=odnoklassniki&st.shareUrl=https:\/\/vc.ru\/services\/166540-primenenie-ferm-devaysov-v-testirovanii-mobilnyh-prilozheniy»,»short_name»:»OK»,»title»:»\u041e\u0434\u043d\u043e\u043a\u043b\u0430\u0441\u0441\u043d\u0438\u043a\u0438″,»width»:600,»height»:450},»email»:{«url»:»mailto:?subject=\u041f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0444\u0435\u0440\u043c \u0434\u0435\u0432\u0430\u0439\u0441\u043e\u0432 \u0432 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439&body=https:\/\/vc.ru\/services\/166540-primenenie-ferm-devaysov-v-testirovanii-mobilnyh-prilozheniy»,»short_name»:»Email»,»title»:»\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u043f\u043e\u0447\u0442\u0443″,»width»:600,»height»:450}},»isFavorited»:false}

1169 просмотров

Мы в Open Solutions максимально автоматизируем процесс тестирования в наших проектах. Это позволяет заказчику сэкономить деньги, а нам — помогает максимально полно проверить функционал разрабатываемого нами продукта. В случае с мобильными приложениями, мы пришли к выбору сервиса автоматизации после того, как выстраивали систему на базе локальных ресурсов. Но со временем это стало неудобно из-за необходимости поддерживать актуальный парк устройств и заниматься их администрированием. Поэтому мы перешли на облачные фермы мобильных устройств и выбирали между Firebase Test Lab и Microsoft App Center. Об этом выборе мы и хотим рассказать в данной статье.

Что такое удаленные фермы устройств и зачем они нужны?

С каждым годом различных моделей и производителей мобильных устройств становится все больше и больше. Основное направление нашей компании — это заказная разработка ПО и нам попросту не выгодно покупать и содержать все модели телефонов. Нам на помощь пришли более крупные корпорации, такие как Microsoft или Google, а также сами производители мобильных устройств.

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

Какие преимущества дают удаленные фермы:

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

Но без недостатков тоже не обойтись:

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

Почему именно Firebase Test Lab и Microsoft App Center?

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

• Firebase Test Lab. Потому что мы уже работаем в Firebase. Мы загружаем наши тестовые сборки приложений и собираем статистику. Удобно держать результаты автотестов в той же консоли. Достаточно зайти в одну систему и ты получишь полную информацию о своем приложении.
• Microsoft App Center. Наша фирма является сертифицированным партнером Microsoft. Благодаря этому, нам доступна существенная скидка на использование всех сервисов, в том числе и App Center. А самый главный плюс — это большой выбор физических устройств.

Firebase Test Lab

Данный сервис предоставляется 11 виртуальных и 139 физических устройств для тестирования. Firebase дает возможность руками запускать 10 тестов на виртуальных и 5 тестов на физических устройствах в день совершенно бесплатно. За запуски через CI или увеличение доступных запусков в день придется платить.

Помимо запуска рукописных тестов, о них поговорим чуть позже, Test Lab умеет делать Robo-тесты. По сути это некое подобие monkey-тестов. Только здесь есть возможность задать тестовое окружение и, как говорится в документации, на одних и тех же данных тест будет выполнять одни и те же действия, что позволит проверить исправление ошибок.

К автотестам Firebase предъявляет ряд требований. Такие тесты должны быть написаны с использованием следующих фреймворков:

• Grandle + JUnit + UIAutomator или Espresso для Android. UIAutomator используется для тестирования методом черного ящика. Espresso — белого.
• XCUITests для iOS.

Основные сравнительные эксперименты мы проводили в части тестов на Android приложениях. Тестирование МП реализовывали методом черного ящика, поэтому выбрали следующий набор технологий: Grandle + JUnit + UIAutomator. До этого мы не были знакомы с UIAutomator независимо от Appium. Но разобраться получилось довольно быстро. Написание простенького теста на авторизацию с использованием PageObjects и отладка запусков в Firebase заняло около 3 дней.

Данные, которые мы получили по результатам прогона теста:

• Список сценариев, которые выполнялись во время прогона.

• Видео прогона.

• Логи устройства.

• Сведения о производительности.

Работа в Firebase Test Lab показалась довольно удобной, отчетность по результатам тестирования достаточно полная. Единственное — не хватало логов самих тестов дополнительно к логам телефона.

Microsoft App Center

App Center дает возможность тестировать на 374 смартфонах и 54 планшетах. Все устройства физические. На изучение инструмента дается пробный бесплатный период длиной в 30 дней. Далее начинает взиматься ежемесячная плата. Никаких ограничений по количеству устройств или количеству запусков в день нет.

Автотесты для запуска через App Center можно писать с использованием следующих фреймворков:

• Maven + JUnit + Appium.
• XCUITests для iOS.

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

Данные, которые мы получили по результатам прогона теста:

• Список сценариев, которые выполнялись во время прогона.

• Скрины с ошибками и по окончанию теста.

• Логи устройства.

• Логи самих тестов.

• Сведения о производительности(доступны не для всех устройств).

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

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

Выводы

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

Мы остановили свой выбор на Microsoft App Center, потому что фреймворки оказались более удобными и знакомыми, а за счет того, что Open Solutions является партнером Microsoft сервис получается для нас очень выгодным.

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

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

Анастасия, ведущий тестировщик, Open Solutions

8 популяных онлайн-сервисов для тестирования сайтов

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

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

W3C markup validation service — это легендарный валидатор, который знает каждый веб-разработчик, который сталкивался с проверкой HTML кода сайта. Этот валидатор проверяет HTML, XHTML, SMIL, MathML, и т.д.

WAVE  — это очень интересный  бесплатный онлайн-инструмент оценки доступности и юзабилити сайта от WebAIM. В отличии от  W3C, данный онлайн-инструмент выдает результаты наглядно — на странице проверяемого сайта появляются замечания-блоки разных цветов (красный, желтый, зеленый) с пометками что нужно исправить. Если перейти на вкладку меню «Structure/Order» будет отображаться пунктирными линиями схема, стуктура сайта в виде рамок. Кроме того, можно проверить как выглядит сайт в текстовом режиме.

W3C CSS Validation Service — тоже весьма известный онлайн-сервис проверки валидности CSS.  Можно вводить как линк сайта, так и просто CSS-код в форму проверки. В результате появится отчет с ошибками, замечаниями и пояснениями. Но бывает так, что CSS изначально валидный и исправлений не требутеся 😉

OnlineWebCheck.com — бесплатный олайн-сервис проверки сайта для CSS, HTML/XHTML. В отличии от сервиса W3C, как правило, более подробно описывает в чем ошибка и как ее исправить.

W3C Feed Validation Service — валидатор для Atom/RSS лент. Принцип проверки очень простой — вводите линк rss-ленты и получаете результат.

Pingdom Tools — полезный онлайн-сервис для проверки скорости загрузки сайта и его элементов. Очень наглядный отчет, где видно какие элементы сайта перегружены или создают проблемы при загрузке, а  страница «Page Analsis» дает развернутые отчеты оскорости отклика сервера, ошибок, отказов и пр.

W3C Links Validator — этот инструмент анализирует гиперлинки и якоря (ancor) в  HTML/XHTML документах, что очень важно при тестировании сайта на нерабочие, «битые» линки.

 

W3C mobileOK Checker — онлайн-сервис от W3C проверки сайта для мобильных устройств.

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

—

При использовании этого материала активная ссылка на http://www.topobzor.com обязательна.

Похожее

Тестирование мобильных пользователей | Тестирование юзабилити сайта TryMyUI

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

Решение для тестирования мобильных пользователей TryMyUI позволяет легко…

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

Решение для тестирования мобильных устройств

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

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

Мобильное пользовательское тестирование работает так же, как тестирование настольных компьютеров с помощью TryMyUI: просто настройте свой тест, выберите платформу и получите свои тесты в считанные часы.

Подпишитесь на бесплатную пробную версию и получите свой первый результат пользовательского теста бесплатно!

Начать

Как это работает: приложения для тестирования TryMyUI

Наши тестировщики записывают свой мобильный опыт с помощью тестовых приложений TryMyUI для Android и iOS — нашего ответа на вызовы мобильного пользовательского тестирования.

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

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

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

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

Тестирование Android: всплывающее окно «Пользовательский интерфейс»

Другой нашей задачей было максимально точно воспроизвести реалистичный, подлинный пользовательский опыт. Мы удалили все лишние слои и заменили их маленьким зеленым пузырем, плавающим на краю экрана.

Тестировщики

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

Тестирование iPhone: переключение для задач

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

Тестировщики

могут нажимать на красную полосу для переключения между тестовым веб-сайтом или приложением и текущей задачей.

Что я могу протестировать на мобильном телефоне с помощью TryMyUI?

Вы можете протестировать любой тип интерфейса как на Android, так и на iOS с помощью программного обеспечения для тестирования пользователей TryMyUI!

Мобильный Интернет: Протестируйте свой действующий веб-сайт на любой ОС. На Android пользователи просматривают веб-сайт в браузере по умолчанию; на iPhone ваш веб-сайт отображается с помощью браузера Webview, встроенного в приложение TryMyUI.

Прототипы: Получите отзывы о своем мобильном прототипе, настроив тест с помощью Invision / AdobeXD / и т. Д.Поделиться ссылкой. TryMyUI совместим со всеми платформами прототипирования.

Мобильные приложения Live: Посмотрите и услышите, что пользователи думают о вашем мобильном приложении — просто вставьте ссылку App Store или Play Store при создании теста.

Невыпущенные мобильные приложения: Если ваше приложение еще не доступно для публичной загрузки, вы можете загрузить IPA или APK в TryMyUI, и наши пользователи смогут его протестировать. После того, как они записали свой тестовый сеанс, мы автоматически повреждаем файл, чтобы они не могли получить к нему доступ.

Почему пользовательское тестирование?

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

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

По словам Якоба Нильсена, автора книги Usability Engineering, требуется всего 5 пользователей, чтобы выявить 80 процентов высокоуровневых проблем юзабилити на вашем веб-сайте.

Так зачем ждать? Начните делать свой продукт более удобным уже сегодня с помощью бесплатной пробной версии.

Связанное чтение:

Тестирование мобильных устройств | Usability.gov

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

Планирование и подготовка к тестированию мобильных устройств

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

• Ваши сроки и бюджет .Их знание поможет вам определить, какие процессы и оборудование будут работать лучше всего в зависимости от ваших потребностей.
• Физическая установка пространства и способ записи теста. Это может варьироваться от конфигурации с низкой точностью до использования специализированной платформы и камеры и / или, возможно, с использованием программного обеспечения для отслеживания взгляда.
• Ваша целевая аудитория и устройства. Используйте веб-аналитику, чтобы узнать, сколько мобильных пользователей посещают сайт, какое устройство они используют и операционную систему.Понимание этой информации поможет вам узнать, какие устройства тестировать.
• Что входит в ваш скринер. Важно уточнить:
  • Тип телефона, который должен быть у участника
  • Телефон какого поколения, при необходимости
  • Какие действия они должны регулярно выполнять на своем устройстве (например, «Укажите, в каких из следующих онлайн-действий вы участвовали за последние 30 дней»).
• Как устроен тест .
• Подумайте, как часто вам нужно будет выполнять тестирование .
• Убедитесь, что в помещении есть возможность подключения. Убедитесь, что в районе, который вы собираетесь тестировать, есть достаточное количество операторов беспроводной связи, пользующихся услугами. Связь не всегда универсальна, и вы должны провести пилотное тестирование до прибытия участников.

Рекомендации по настройке камеры

Когда вы выбираете установку камеры, в идеале вы должны искать следующее:

• Простая настройка
• Фиксированное расстояние между устройством и камерой
• Работает для телефонов и планшетов
• Захват экрана портретной и альбомной ориентации
• Пользователь может держать / использовать свое устройство как можно «обычно», при этом камера фиксирует все действия.

Создание сценариев тестирования

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

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

Проведение тестирования мобильных устройств

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

• Желательно, чтобы они протестировали их на своих собственных устройствах.Это устраняет проблемы, связанные с незнакомым устройством или операционной системой. Поощряйте пользователя использовать устройство как можно чаще и адаптируйте камеру, насколько это возможно или необходимо.
• Обратите внимание на освещение в испытательной комнате или лаборатории. Верхнее освещение может вызвать блики на экране, которые могут ухудшить качество записи. Приглушите свет в комнате или отрегулируйте положение камеры или устройства.
• Вам следует не только провести пилотное тестирование сценариев и возможности подключения в комнате, в которой вы проводите тестирование, но и провести пилотное тестирование с максимально возможным количеством предполагаемых типов телефонов и операторов связи.
• Подумайте о том, чтобы иметь в наличии сухие салфетки для очистки стекол для очистки экранов перед тестированием — просто для повышения четкости изображения
• Будьте осторожны, не располагайте устройство слишком близко к тестируемому компьютеру. Устройства, которые излучают импульсы, например телефоны, могут вызывать шумную обратную связь для удаленных наблюдателей.
• Прочтите им задания и / или распечатайте задания

Список литературы

• «Слайды по удобству использования» — крепления для камер для тестирования мобильных устройств на удобство использования, Дэвид Эванс

10 отличных инструментов для тестирования вашего веб-сайта на мобильных устройствах

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

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

• Эмулятор мобильного телефона позволяет вам проверять скорость отклика и функциональность мобильных веб-сайтов на различных мобильных платформах, таких как iPhone, Android, BlackBerry, iPad и т. Д.
• Мобильные эмуляторы выявляют проблемы и проблемы, связанные с веб-сайтом, и позволяют принимать меры по исправлению, чтобы сделать веб-сайт визуально привлекательным и функциональным на смартфонах и других портативных устройствах.
• Мобильный эмулятор упрощает процесс тестирования веб-сайта и устраняет методику тестирования веб-сайта на различных устройствах.Разработчики могут протестировать веб-сайт на виртуальном мобильном интерфейсе со всеми функциями, доступными на устройстве.
• Тестирование с помощью мобильных эмуляторов отлично работает на сенсорных телефонах и традиционных смартфонах на базе QWERTY.

На рынке доступно несколько эмуляторов мобильных телефонов, и здесь мы рассмотрим некоторые из самых популярных из них.

01. Тестер iPhone

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

02. iPhoney

iPhoney — еще один отличный инструмент для проверки совместимости веб-сайтов с iPhone. Это не только эмулятор, но и позволяет создавать веб-сайты, совместимые с iPhone. Вы также можете протестировать изображения и коды вместе со всеми функциональными возможностями веб-сайта в среде iPhone с помощью этого инструмента.

03.Эмулятор мобильного телефона

Это, безусловно, один из самых популярных эмуляторов мобильных телефонов, который используется большим количеством разработчиков. Самым большим преимуществом этого инструмента является то, что он проверяет совместимость веб-сайта на большом количестве платформ, включая Samsung, iPhone, BlackBerry и т. Д.

04. iPad Peek

IPad

, безусловно, является самым популярным планшетом на рынке, и чтобы убедиться, что ваш веб-сайт совместим с iPad, вы можете попробовать iPad Peek.Он будет копировать внешний вид и функциональность вашего сайта на iPad.

05. Гомес

Это не только проверка совместимости веб-сайта с мобильными устройствами, но и оценка, позволяющая оценить его потенциал. Он проверяет мобильную готовность веб-сайта и присваивает оценку от 1 до 5 на основе 30 различных параметров, включая использование таблиц стилей, медиа-запросы, методы кэширования и т. Д.

06. Opera Mini Simulator

Opera Mini, безусловно, является одним из самых популярных мобильных веб-браузеров, поэтому важно проверить совместимость веб-сайта с помощью Opera Mini Simulator.Используя это, вы можете принять меры по исправлению на своем веб-сайте, если существуют какие-либо серьезные ошибки.

07. Адаптивныйpx

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

08. MobiReady

Это работает аналогично Gomez и позволяет вам ввести URL-адрес вашего веб-сайта и протестировать веб-сайт по различным параметрам, включая тест страницы, тест разметки и тест сайта.Что делает его даже более мощным, чем Gomez, так это то, что он проверяет многие другие параметры, такие как соответствие dotMobi и соответствие W3C для мобильных устройств, предлагая подробные отчеты об ошибках. Он также имеет комплексную программу проверки кода, которая пригодится.

09. Screenfly

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

10. ProtoFluid

Подобно Screenfly, этот инструмент — отличный способ протестировать множество различных разрешений, чтобы охватить некоторые из менее распространенных устройств. У него потрясающий интерфейс, но он не на 100% бесплатный, так как вам нужно будет купить лицензию за 5 фунтов стерлингов, чтобы использовать его более 10 раз. Тем не менее, это отличный вариант для надежного и очень полезного инструмента.

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

Чем тестирование мобильных приложений отличается от тестирования веб-приложений?

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

Различия между веб-приложением и мобильным приложением

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

Веб-приложения

Веб-приложения относятся к компьютерным программам, запускаемым в веб-браузере. Обычно создаваемые с помощью HTML5, CSS и JavaScript, веб-приложения предлагают больше интерактивности, чем веб-сайты, и к ним можно получить доступ через настольный компьютер или ноутбук.Классические примеры веб-приложений включают веб-почту, интернет-магазины и веб-банкинг.

Мобильные приложения

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

Мобильные веб-приложения

Мобильное веб-приложение — это программа, к которой можно получить доступ через мобильный браузер, а это означает, что вам не нужно загружать их на свое устройство, чтобы начать их использовать.Как и веб-приложения, мобильные веб-приложения обычно создаются с использованием JavaScript, CSS и HTML5; однако стандартного программного обеспечения нет. В отличие от других мобильных приложений, веб-приложения для мобильных устройств проще создавать и тестировать, но обычно они гораздо более примитивны с точки зрения функциональности.

Собственные приложения

Быстрые и более продвинутые, когда дело доходит до функций, собственные мобильные приложения запускаются на самом устройстве, поэтому вам необходимо загрузить их, прежде чем использовать. Поскольку они зависят от платформы, собственные мобильные приложения создаются с использованием определенных языков и интегрированных сред разработки (IDE).Например, собственные приложения Android разрабатываются с использованием Java или Kotlin и Android Studio или Eclipse IDE. В то же время, чтобы создать приложение для устройства Apple, вам потребуется использовать Objective-C или Swift и XCode IDE. Нативные приложения безопасны, идеально интегрируются с оборудованием и обладают лучшим интерфейсом UI / UX.

Гибридные приложения

Гибридные приложения сочетают в себе характеристики нативных и мобильных веб-приложений. Созданные с помощью «стандартного веб-стека» (JavaScript, CSS и HTML5), они затем помещаются в собственную среду, поэтому вы можете использовать один и тот же код для разных платформ.Гибридные приложения, запущенные в вашем мобильном браузере, могут быть загружены и имеют доступ к вашей камере, GPS, списку контактов и т. Д. Хотя такие приложения легче создавать и поддерживать, они медленнее и предлагают менее продвинутые функции, чем их собственные аналоги.

Типы тестирования мобильных приложений по сравнению с тестированием веб-приложений

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

• функциональное тестирование
• юзабилити-тестирование
• тестирование на совместимость
• тестирование производительности
• тестирование восстановления
• тестирование локализации
• сертификационные испытания
• тестирование, связанное с изменениями

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

Взаимодействие с пользователем

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

Подключение к Интернету

Большинство веб-приложений не работают в автономном режиме, и то же правило применяется к мобильным веб-приложениям. С этой целью, имея дело с приложениями этого типа, вы должны проверить, хорошо ли они работают при различных скоростях подключения к Интернету. Когда дело доходит до собственных и некоторых гибридных мобильных приложений, очень важно проверить, правильно ли приложение работает в автономном режиме, как оно реагирует на прерывание соединения и как оно работает с 3/4/5 G или WI-FI.

Совместимость

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

Ограничения емкости

Обратите внимание, что RAM и SSD абсолютно разные для Интернета и мобильных устройств. Хотя некоторые мобильные устройства могут поставляться с 3–4 ГБ оперативной памяти, емкость даже самого лучшего смартфона отстает от емкости среднего настольного компьютера. Таким образом, если ваше приложение не оптимизировано для мобильного использования, оно будет работать намного медленнее, чем его настольное приложение. Кроме того, поскольку мобильные приложения обновляются чаще, чем их веб-аналоги, очень важно проверить, как ваше приложение влияет на память и возобновляет ли оно правильную работу после ряда обновлений и установок.

Срок службы батареи

У настольных компьютеров

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

Размер экрана

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

Различные инструменты для тестирования мобильных и веб-приложений

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

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

Инструменты для тестирования веб-приложений

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

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

Селен

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

Для выполнения сценариев Selenium WebDriver необходимо убедиться, что у вас есть начальная конфигурация. WebDriver состоит из трех отдельных частей, возьмем, например, Chrome, сам браузер («т.е. Chrome»), предоставленные языковые привязки («Драйвер») и исполняемый ChromeDriver, загруженный из проекта Chromium, который действует как мост между « хром »и« драйвер ».Все они обсуждаются здесь.

Инструменты для тестирования мобильных приложений

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

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

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

Апиум

Если вам нужен инструмент для тестирования мобильных приложений в виде черного ящика, не ищите ничего, кроме Appium. Основанный на Selenium, это инструмент с открытым исходным кодом для тестирования гибридных, веб-приложений и нативных мобильных приложений для Android и iOS.Предлагая набор функций Selenium, Appium запускает тесты на реальных устройствах, эмуляторах и симуляторах.

Он позволяет создавать тестовые примеры на различных языках программирования, включая Java, C #, Python, PHP и т. Д., Используя один и тот же API. Тем не менее, вам нужно будет создать отдельные сценарии iOS и Android для запуска тестов пользовательского интерфейса. Как и Selenium, Appium — гибкий инструмент, который легко интегрируется с другими фреймворками. Узнайте все советы и рекомендации об Appium здесь.

Эспрессо

Espresso — это система обеспечения качества пользовательского интерфейса, разработанная Google для тестирования методом белого ящика.Поскольку он был создан для тестирования собственных приложений Android, тесты Espresso могут быть написаны на Java и Kotlin, языках программирования, используемых для разработки приложений Android.

Благодаря простому API он легко адаптируется к вашим потребностям без сложного многопоточного тестирования. Но наиболее выдающейся особенностью Espresso является то, что он обеспечивает автоматическую синхронизацию между тестами и приложениями (тест не продолжается, пока приложение не будет готово).

XCUITest / XCTest

Для функционального тестирования iOS и тестирования пользовательского интерфейса XCUITest и XCTest становятся все популярнее среди разработчиков iOS.Причина в том, что они запускают тесты внутри XCode IDE, а тестировщики могут писать тесты как на Objective-C, так и на Swift.

XCUITest и XCTest могут выполнять тесты iOS намного быстрее, чем другие кроссплатформенные платформы. Их тесты обычно более надежны и заслуживают доверия. Однако именно потому, что они являются родными для разработки и тестирования iOS, многие мобильные разработчики не обращают внимания на гибкость используемых инструментов.

Калабаш

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

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

	Селен	Аппиум	Эспрессо	XCUITest XCTest	Калабаш
Тип платформы	Настольные браузеры	И Android, и iOS	Android	iOS	И Android, и iOS
Тип приложения	Интернет	Собственный, сетевой и гибридный	Собственный, сетевой и гибридный	Собственный, сетевой и гибридный	Родной и гибрид
Участки для испытания	Функциональная, регрессия	Функциональный, регрессионный, UI	UI	UI	Функциональная, приемка пользовательского интерфейса
Язык сценариев	Java, C #, Perl, Python, JavaScript, Ruby, PHP	Java, C #, Python, PHP, Ruby, JavaScript	Ява, Котлин	Swift, Objective-C	Рубин
CI	Популярные инструменты CI (например,г., Дженкинс, Teamcity)	Популярные инструменты CI (например, Jenkins, Teamcity)	Популярные инструменты CI (например, Jenkins, Teamcity)	Популярные инструменты CI (например, Jenkins, Teamcity)	Популярные инструменты CI (например, Jenkins, Teamcity)
Тип лицензии	Открытый исходный код	Открытый исходный код	Открытый исходный код	Открытый исходный код	Открытый исходный код

Какой инструмент для тестирования выбрать?

Как теперь вы можете видеть, хотя выбор инструмента для тестирования веб-приложений может быть довольно простым, для тестирования мобильных приложений это может быть сложно.Здесь мы говорили только об Appium, Espresso, XCUITest / XCTest и Calabash, но есть много других отличных фреймворков с открытым исходным кодом, доступных для автоматизации тестирования мобильных приложений, например Robot Framework, Detox, Xamarin.UITest, EarlGrey для iOS и т. Д.

Прежде чем принять решение, ответьте на следующие вопросы:

1. Какие платформы, браузеры и типы приложений вам нужно охватить?
2. Какие области нужно тестировать? (Инструменты, перечисленные в этой статье, предназначены в основном для функционального тестирования и тестирования совместимости и не охватывают тестирование производительности и безопасности.)
3. Кто будет проводить тесты? (Если тестирование будет проводиться разработчиками или экспертами по обеспечению качества, вы можете выбрать инструмент, требующий определенных навыков программирования. Однако в случае, если будут задействованы нетехнические члены команды, вам следует рассмотреть инструменты с функцией записи / воспроизведения.)
4. С какими языками сценариев вам комфортно работать? (Инструменты обычно не охватывают все возможные языки программирования.)
5. Применяете ли вы в своем проекте методологию непрерывного тестирования? (Некоторые инструменты несовместимы с Agile.)
6. Как вы будете отслеживать и анализировать результаты? (Поскольку Selenium не предлагает функции управления тестированием, вам необходимо интегрировать его с другими инструментами для получения подробных отчетов.)
7. Вы предпочитаете бесплатные или платные варианты?

Заключение

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

Инструменты автоматизации тестирования

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

В то время как Selenium в сочетании с набором интегрированных инструментов может покрывать тестирование веб-приложений, выбор инструментов гораздо больше, когда дело доходит до тестирования мобильных приложений. Appium, Espresso, XCUITest / XCTest и Calabash — бесспорные фреймворки с открытым исходным кодом, имеющие свои плюсы и минусы. Тем не менее, вам необходимо принять во внимание тип вашего приложения, платформу и другие критерии, прежде чем выбрать один из них в качестве инструмента тестирования мобильного приложения.

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

Тестирование мобильных веб-приложений с помощью эмулятора — Обзор

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

О мобильном веб-тестировании с помощью TestComplete

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

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

Используя TestComplete, вы можете записывать автоматизированные тесты в эмуляторе мобильного браузера и воспроизводить их с использованием различных профилей браузера.Таким образом можно —

• Создавайте и запускайте функциональные тесты для бизнес-логики веб-приложения.

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

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

Тестирование мобильных веб-сайтов с помощью TestComplete аналогично тестированию обычных (немобильных) веб-сайтов, за некоторыми исключениями, описанными ниже. Например, TestComplete использует одни и те же тестовые объекты, методы и свойства как для мобильных, так и для немобильных браузеров, веб-страниц и элементов веб-страниц.При необходимости сначала ознакомьтесь со следующими разделами, чтобы получить общее представление о том, как выполнять веб-тестирование с помощью TestComplete:

Как TestComplete эмулирует мобильные браузеры

TestComplete использует Google Chrome для имитации мобильных браузеров. В режиме эмуляции некоторые характеристики браузера меняются в соответствии с характеристиками мобильных устройств:

• Агент пользователя — строка, которая идентифицирует браузер для веб-серверов. Он включает версию браузера, операционную систему и ее версию, а также другую информацию.Пользовательский агент заставляет веб-сайты «думать», что они просматриваются на мобильном устройстве. В результате веб-сайты возвращают мобильный контент, даже если вы тестируете его на настольном компьютере.

• Размер экрана браузера и соотношение пикселей устройства (для имитации дисплеев Retina).

• Эмуляция событий касания, мета-окна просмотра и наложения мобильной полосы прокрутки.

Щелкните изображение, чтобы увеличить его.

TestComplete включает предопределенные профили мобильного браузера для Apple iPhone, iPad, Google Nexus, Samsung Galaxy и других устройств.Вы можете добавить собственные профили мобильного браузера.

Создание и запись тестов для мобильных устройств

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

Создание мобильного веб-теста включает следующие шаги —

1. (Необязательно.) Добавьте пользовательские мобильные устройства, с которыми вы хотите протестировать свой сайт.

2. Запишите тест с помощью эмулятора мобильного браузера:

   • Начать тестовую запись.

   • Выберите профиль мобильного браузера в приложении «Выполнить» | Раскрывающийся список виртуального браузера на панели инструментов записи. TestComplete запустит эмулятор с выбранным профилем.

   • Откройте ваш протестированный веб-сайт в эмуляторе мобильного браузера.

   • Выполнять тестовые действия (перемещаться по веб-страницам, заполнять формы и т. Д.) И создавать контрольные точки для тестируемого веб-сайта.

   • Остановить тестовую запись.

3. При необходимости измените записанный тест.

4. Запустите тест, чтобы убедиться, что он прошел успешно. При необходимости отладьте тест, чтобы найти и исправить проблемы.

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

Различия между мобильным и немобильным веб-тестированием

Тестирование мобильных и обычных (немобильных) веб-приложений с помощью TestComplete очень похоже.В следующей таблице перечислены различия. Если у вас есть опыт регулярного веб-тестирования, вы можете использовать эту таблицу в качестве краткого справочного руководства.

Тестирование проводится с использованием различных настольных браузеров — Internet Explorer, Mozilla Firefox, Google Chrome и других.	Тестирование проводится с использованием одного браузера — Google Chrome, который имитирует разные мобильные браузеры.
Тесты могут работать с любым поддерживаемым веб-браузером, установленным на компьютере.	Тесты могут использовать профили мобильных браузеров, определенные в параметрах виртуальных браузеров проекта.
Вы можете запустить браузер как из TestComplete, так и со своего рабочего стола.	Вам необходимо запустить эмулятор мобильного браузера из TestComplete (см. Запуск эмулятора мобильного браузера).
В тестах по ключевым словам вы используете операцию «Запуск браузера» для запуска веб-браузера.	В тестах по ключевым словам вы используете операцию «Запуск виртуального браузера» для запуска эмулятора мобильного браузера.
В тестах по ключевым словам вы используете цикл браузера для повторения тестовых операций в разных браузерах.	В тестах по ключевым словам вы используете цикл виртуального браузера для повторения тестовых операций в разных мобильных браузерах.
В сценариях используется метод Browsers.Item (…) .Run для запуска веб-браузера.	В сценариях используется метод VirtualBrowsers.Item (…) .Run для запуска эмулятора мобильного браузера.
Объект Browsers обеспечивает доступ к коллекции установленных веб-браузеров.	Объект VirtualBrowsers обеспечивает доступ к коллекции включенных профилей мобильных браузеров.

Куда идти дальше

Краткое руководство по созданию мобильного веб-теста, запускаемого в разных браузерах.

Подробное объяснение веб-тестирования с помощью TestComplete (большая часть этой информации относится также и к мобильному веб-тестированию).

Описывает, как выполнять общие операции с объектами в приложениях.

Общая информация о процессе тестирования и TestComplete IDE.

См. Также

Тестирование мобильных веб-приложений с помощью эмулятора

Тестирование веб-приложений для мобильных устройств с помощью инструментов разработчика Chrome | Румеш Эранга Хапуараччи

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

Основные параметры поворота устройства Расширение ориентации устройства с помощью датчиков

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

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

Преодоление геолокации

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

Давайте сначала посмотрим, как мы можем задросселировать сеть. Здесь у нас есть несколько предустановленных значений. Если нам нужна определенная скорость, мы также можем ее установить.

Регулирование скорости сети в Chrome Dev Tools

Теперь давайте посмотрим, как можно регулировать скорость процессора. Здесь у нас есть возможность выбрать между 4- и 6-кратным более медленным процессором.

Регулирование ЦП с помощью Chrome Dev Tools

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

Chrome Dev Tools дает нам возможность запускать веб-приложения в мобильном браузере Chrome и выполнять отладку на компьютере / ноутбуке разработчика. В дополнение к ожидаемой отладке в реальном времени он также позволяет нам транслировать вывод мобильного устройства на ПК для разработки.

Вы должны включить USB-отладку на вашем устройстве Android, чтобы это работало. После этого все, что вам нужно сделать, это подключить свое устройство к компьютеру разработчика, открыть Chrome и перейти к chrome: // inspect # devices . Это покажет все подключенные устройства, а также веб-приложения, открытые на этих устройствах.

Вы можете щелкнуть ссылку «Проверить», чтобы начать удаленную отладку. После запуска сеанса отладки вы также заметите, что экранная демонстрация выполняется автоматически, и вы можете просматривать веб-приложение как на телефоне, так и на ПК.Таким же образом теперь у вас есть полная функциональность Chrome Dev Tools для тестирования веб-приложения прямо на вашем устройстве.

Удаленная отладка в действии

Как разработать и протестировать сайт с использованием дизайна, ориентированного на мобильные устройства

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

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

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

Что такое дизайн, ориентированный на мобильные устройства?

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

Адаптивный веб-дизайн (RWD)

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

Источник

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

Прогрессивное продвижение

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

Изящная деградация

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

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

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

Советы по созданию веб-сайта, ориентированного на мобильные устройства

Используйте адаптивную платформу

HTML-фреймворки сделали веб-дизайн проще, чем когда-либо. Как отмечается в недавней статье в Forbes, дизайнеры теперь могут использовать такие фреймворки, как Bootstrap и Foundation, как для внешнего, так и для внутреннего пользовательских интерфейсов. Такие фреймворки используют структуру содержимого на основе сетки со столбцами и строками для содержимого и интерфейсов приложений.

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

Приоритет UX

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

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

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

Чтобы решить эту проблему, используйте точки вместо пикселей для размеров шрифта. Чтобы оптимизировать размеры шрифтов и другие стили дизайна, используйте запросы @media CSS.

Ускорь это!

В прошлом году Google включил скорость загрузки страницы в качестве фактора ранжирования для мобильного поиска. Оптимизация скорости загрузки не только снижает показатель отказов, но и служит хорошим предзнаменованием для вашего SEO.Используйте следующую тактику для увеличения скорости вашего сайта:

• Установите плагин кеширования. — Если вы используете WordPress для создания своего сайта, такие плагины, как WP Super Cache, хранят статический контент, поэтому его не нужно загружать каждый раз, когда пользователь переходит на страницу.
• Установите CDN — Content Delivery Networks позволяет вашему сайту доставлять контент в соответствии с геолокацией посетителей. Это ускоряет работу вашего сайта за счет копирования статического контента в сеть удаленных серверов.
• Оптимизировать изображения — Помимо сжатия изображений для экранов мобильных устройств, Forbes предлагает использовать отложенную загрузку для доставки изображений без замедления загрузки страницы.
• Переключиться на HTTPS — Установка сертификата SSL и перевод вашего веб-сайта на протокол HTTPS не только защищает ваш сайт, но и помогает повысить скорость загрузки.

Упростите навигацию и взаимодействие

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

Имейте в виду, что мобильные пользователи привыкли нажимать и пролистывать. Например, мобильным пользователям проще нажимать интерактивные кнопки, чем текстовые ссылки. Чем больше способов взаимодействия пользователей с пролистыванием, тем лучше.

Проверьте свой дизайн на всем

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

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

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

5 инструментов для тестирования вашего веб-сайта

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

1) w3C mobileOK Checker

Веб-инструмент автоматической проверки, w3C mobileOK Checker, выполняет множество тестов на веб-странице.

Источник

Как показано выше, в результате создается отчет с оценкой уровня совместимости вашего сайта с мобильным Интернетом. Между тем, соответствующий инструмент mobileOk Basic Tests 1.0 может проверить удобство использования вашего сайта.

2) iPhoney

Как следует из названия, iPhoney показывает, как выглядит ваш веб-дизайн на iPhone и Safari, включая функции iPhone.Вы можете использовать среду просмотра веб-страниц с точностью до пикселей, которую она предоставляет для разработки веб-сайтов для iPhone. Одновременно он служит холстом для тестирования ваших дизайнов.

3) iPad Peek

Подобно iPhoney для iPhone, iPad Peek может показать вам, как ваш веб-сайт будет работать на iPad. Хотя этот инструмент может дать вам достаточно хорошую оценку вашего сайта, Lifewire рекомендует использовать браузер на основе WebKit, такой как Google Chrome и Safari, для достижения наивысшего уровня точности с помощью моделирования.

4) Google Mobilizer

Google называет свое расширение Google Mobilizer самым быстрым и простым способом протестировать ваш сайт на реальных мобильных устройствах прямо из браузера.

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

• Выявление проблем
• Мониторинг показателей по устройствам
• Оптимизация мобильного UX

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

Источник

В этом примере программа отображает, как мобильная версия веб-сайта Starbucks отображается на iPhone 6, Galaxy 5G и G2.

5) Гомес

Mobile readiness test, Gomez, основывает свой анализ на более чем 30 хорошо зарекомендовавших себя методах разработки мобильных веб-сайтов, чтобы оценить вашу страницу по шкале от 1 до 5. После оценки и выставления баллов для вашей платформы он предоставляет советы по подготовке вашей платформы к мобильным устройствам.

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

Движение вперед, Mobile-First

Использование подхода, ориентированного на мобильные устройства, превратилось из варианта в необходимость.