Test html on android

HTML5test how well does your browser support HTML5?

About HTML5test

The HTML5 test score is an indication of how well your browser supports the HTML5 standard and related specifications. Find out which parts of HTML5 are supported by your browser today and compare the results with other browsers.

The HTML5 test does not try to test all of the new features offered by HTML5, nor does it try to test the functionality of each feature it does detect. Despite these shortcomings we hope that by quantifying the level of support users and web developers will get an idea of how hard the browser manufacturers work on improving their browsers and the web as a development platform.

The score is calculated by testing for the many new features of HTML5. Each feature is worth one or more points. Apart from the main HTML5 specification and other specifications created the W3C HTML Working Group or WHATWG, this test also awards points for supporting related drafts and specifications.

Please be aware that although the HTML5 specification is now an official recommendation, other specifications that are being tested are still in development and could change before receiving an official status. In the future new tests will be added for new specifications and existing tests will be updated when the specifications change.

Help us improve HTML5 test by donating

This will allow us to spend more time on HTML5test.com and acquire more devices for our testing lab.

June 2016 — version 8.0. Created by Niels Leenheer.
Please note that the HTML5 test is not affiliated with the W3C or the HTML5 working group.
HTML5 Logo by W3C . Browser detection by WhichBrowser.

Источник

“Протестируй на всех браузерах на телефоне” или инструменты для тестирования Mobile Web приложений

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

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

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

Давайте для начала определимся, что является мобильным веб-приложением.

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

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

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

Существует как минимум 3 способа для тестирования:

• На реальном устройстве;
• С помощью эмулятора;
• C помощью симулятора.

Каждый проект уникален и требует свой собственный подход. Чтобы сделать выбор (или использовать и то и то), я сделала небольшой анализ плюсов и минусов каждого из вариантов:

+ Точность результатов;
+ Облегчает тестирование ориентации устройства;
— Дорого;
— Трудоемкий процесс создания и последовательного воспроизведения
результатов;

Эмуляторы:

+ Легче управлять переключением типов устройств, загрузив новый профиль устройства;
+ Бесплатно или небольшие затраты;
— Возможно небольшие погрешности в результате;
— Ограниченные возможности при использовании изменения размера окна.

+ Экономически выгодно;
— Не принимает во внимание аппаратное обеспечение;
— Возможны ложные срабатывания;
— Результаты моделирования могут быть трудными для анализа из-за неполных данных.

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

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

Вот список инструментов, которые я бы посоветовала вам использовать:

1. Chrome DevTools — простой эмулятор на основе браузера Google Chrome, который умеет работать в мобильном режиме. Применяется, в основном, для выполнения начального уровня тестирования эмуляции определенного мобильного устройства.
2. BrowserStack — онлайн-инструмент для тестирования веб-приложений на различных мобильных устройствах. Это довольно надежный и исчерпывающий инструмент, который обеспечивает легкий доступ к более чем 1200 реальных мобильных устройств и браузеров. Пользовательский интерфейс довольно прост для понимания.
3. MultiBrowser — онлайн-инструмент, позволяющий убедиться, что приложение хорошо работает на мобильных устройствах. Он использует эмуляторы мобильных браузеров, чтобы обеспечить беспроблемное тестирование. Для работы с инструментом не нужен круглосуточный доступ в Интернет, так как он отлично работает и как настольное приложение.

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

Как выбрать на чем тестировать?

1. Проанализируйте и определите самые популярные и используемые гаджеты на рынке;
2. Выберите устройства с разной ОС (Android, iOS);
3. Выберите устройства с различными разрешениями экрана.

gs.statcounter.com Вам в помощь!

После выбора инструментария определяемся с набором браузеров на которых будем тестировать. Они бывают обычные и InApp.

Обычный браузер — это отдельное приложение для просмотра веб-сайтов на мобильных устройствах. Как правило, такие браузеры отличаются гибкостью настроек и расширенными функциями, относительно встроенных. Наиболее популярные: Google Chrome, Safari, Mozilla Firefox, Operа mini, Tor Browser, UC Browser.

In-App браузер — это встроенный браузер в приложении, который имеет окно веб-просмотра. Каждый раз, когда вы нажимаете на ссылку в мобильном приложении (например Facebook), вы используете встроенный браузер, то есть переходите по ссылке внутри самого приложения.

Браузеры In-App имеют легкий функционал, но они не позволят Вам добавлять закладки, не имеют изменяемой адресной строки и не дают открывать ссылки в новых окнах (только дают перейти в обычный браузер).

При выборе браузера можете использовать опять же таки gs.statcounter.com и для статистики траффика вашего приложения — www.similarweb.com

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

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

Источник

Тестирование для мобильных устройств: эмуляторы, симуляторы и удалённая отладка

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

При отсутствии инструментов отладки приходилось полагаться на разные хаки. В целом они сводились к попыткам воспроизвести баг в десктопном браузере и затем отловить его при помощи Chrome Developer Tools или где-то ещё. К примеру, можно было уменьшить размер окна браузера или поменять user agent.

Грубо говоря, эти хаки не работали. Если ты правишь баг на десктопе, ты не уверен, что он исправлен на мобильном устройстве (МУ). Поэтому приходилось постоянно метаться между устройством и десктопом.

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

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

Эмуляторы и симуляторы

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

Симулятор iOS

Для тестирования яблочных устройств, айфонов и айпадов, есть несколько вариантов. Первый среди них – официальный Apple iOS Simulator, входящий в поставку Xcode. Позволяет тестировать разные комбинации софта и железа – но только на Mac.

Установите и запустите Xcode. Потом ПКМ и выберите «Show Package Contents». Затем пройдите “Contents” → “Applications” → “iPhone Simulator.”

Хотя найти его нелегко, использовать симулятор просто. Откройте Safari в симуляторе и тестируйте свой сайт. Можно переключаться между разными устройствами iPhone и iPad, менять версию iOS, поворачивать устройство и т.п.

Если у вас нету Mac’а, придётся заморачиваться. Можно взять iPadian, симулятор iPad для Windows. Кроме него существует ещё несколько вариантов, в частности онлайновые. Но, честно говоря, они не особенно хороши.

Эмулятор Android

У андроида эмулятор кросс-платформенный. К сожалению, он сложен в настройке.

Для начала, скачайте подборку, включающую Android Development Tools (ADT) для Eclipse и Android software development kit (SDK). Затем следуйте инструкциям по установке, не забудьте кроме настроек по-умолчанию установить и “Intel x86 Emulator Accelerator (HAXM installer)”. Также вам понадобится установить HAXM (IntelHaxm.dmg на Маке и IntelHaxm.exe на PC).

Затем создайте Android virtual device (AVD) для тестируемого устройства. В менеджере AVD есть список готовых устройств в “Device Definitions”. Для начала выберите одно из них и нажмите “Create AVD”

Выберите любой CPU, и поставьте “No skin“ и “Use host GPU”. Теперь можно запускать виртуальное устройство и использовать браузер Android для тестирования.

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

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

Другие симуляторы и эмуляторы:

Удалённое тестирование

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

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

Для тестирования устройств от Samsung, таких, как Galaxy S5, можно бесплатно воспользоваться услугами Samsung Remote Test Lab – они предоставляют для тестирования большой выбор своих устройств.

Также можно пользоваться ресурсами Keynote Mobile Testing. Они недёшевы, но количество доступных устройств поражает, и некоторыми можно пользоваться бесплатно.

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

Удалённая отладка

Удалённая отладка на МУ выявляет множество трудностей. К примеру, как получить осмысленные данные от небольшого, сравнительно дохленького устройства?

Инструменты удалённой отладки предоставляют интерфейс для подключения к МУ с десктопа. Таким образом, мы работаем с данными с реальных устройств на мощном десктопном компьютере.

С выходом 6-й версии Apple представила инструмент для отладки МУ через Safari Web Inspector.

Для начала надо разрешить удалённую отладку на устройстве. “Settings” → “Safari” → “Advanced” и разрешить “Web Inspector”

Затем подключите устройство к компьютеру через USB. Потом откройте Safari (версии не ниже 6) и в “Preferences” → “Advanced” выберите “Show Develop menu in menu bar”.

В этом меню вы увидите ваше устройство и несколько страниц с настройками.

На каждой из страниц представлено много инструментов, DOM Inspector и подобные.

Кроме DOM Inspector, iOS’ вы можете использовать:

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

Как и в случае с симулятором iOS, удалённой отладкой можно заниматься только с Мака.

Android

В случае с Андроидом инструменты удалённой отладки позволяют работать с десктопа при помощи Chrome’s Developer Tools. Кроме того, инструменты эти опять-таки кросс-платформенные.

Сначала, на телефоне пройдите в “Settings” → “About Phone” (для Android 4.4+), или “Settings” → “About Tablet”. Затем нужно нажать на “Build Number” семь раз. Кроме шуток. После этого вы увидите сообщение насчёт разработчика.

Затем обратно в основных настройках “Developer Options” нужен пункт “USB debugging”.

В адресной строке браузера Chrome наберите about:inspect. Разрешите “Discover USB devices”, и вы увидите в меню своё МУ.

Также вы должны увидеть открытые закладки в мобильном браузере. Выберите нужную, и вам будут доступны:

DOM Inspector,
Сетевая панель с внешними ресурсами
Панель исходного кода, для отладки JavaScript
Консоль JavaScript

Подробности можно найти в тьюториале “Introduction to Chrome Developer Tools, Part One.”

Также можно заниматься удалённой отладкой в эмуляторе Андроида.

Weinre

Если вам приходится отлаживать устройство с iOS на Windows, или Linux, или отлаживать устройство, работающее под Windows Phone или BlackBerry – попробуйте Weinre (web inspector remote). Работает везде.

Настройка weinre сложновата, т.к. его надо устанавливать и на сервере, и на странице. Сначала вам понадобится установить Node, а затем установить модуль Weinre:

npm install –g weinre

Затем запустите сервер отладки (подставляем ip-адрес компьютера):

weinre —boundHost 10.0.0.1

Затем проходим на localhost:8080 и копируем содержимое тега . Его нужно будет вставить на отлаживаемую страницу.

Наконец, кликните на ссылке вверху user interface for debugging clients (http://localhost:8080/client/#anonymous). Теперь, когда вы откроете страницу на устройстве, её можно будет увидеть в списке целей (targets).

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

Weinre позволяет тестировать любое устройство, но он не настолько продвинутый, как родные решения для iOS и Android. К примеру, нельзя пошагово отлаживать JavaScript.

Ещё один вариант удалённого тестирования называется Ghostlab.

Заключение

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

Также мы познакомились с различными инструментами удалённой отладки, которые открывают доступ к отладочным данным МУ, без которых отладка сильно затруднена.

Что ещё почитать перед сном:

“Mobile Emulators and Simulators: The Ultimate Guide,” Maximiliano Firtman
“Introduction to Chrome Developer Tools, Part One,” Seth Ladd, HTML5 Rocks
“About Safari Web Inspector,” Safari Developer Library, Apple
“Enable Remote Debugging With Safari Web Inspector in iOS 6” Dave Ackerman, Modus Create
“Remote Debugging on Android With Chrome,” Chrome Developer Tools
“Weinre as Remote Debugger,” Mozilla Developer Network

Источник