Критерии выбора браузера для тестирования
«Не грузится приложение? Попробуй запустить через другой браузер!». Это самый частый совет, который мы получаем, когда веб-приложение не запускается на «родном» браузере.
Дабы потенциальный пользователь не страдал от необходимости перехода на другой браузер из-за вашего сайта, на этапе подготовки к релизу разработчикам советуют «пропустить» его через кроссбраузерное тестирование.
Александр Панченко и Сергей Немчук из компании «Технологии качества» попробуют разобраться, действительно так ли это так необходимо, как это делается и какие подводные камни могут ждать нас на этом пути.
Уникальные браузеры почему приложения и сайты необходимо тестировать?
Начнём с того, что ни одно веб-приложение (сайт) не будет одинаково работать во всех браузерах. Это обусловлено и разными версиями одного приложения, и разницей в поведении браузера на десктопе и мобильном устройстве, и различным окружением: плагинами, настройками браузера и т. д. Именно поэтому кроссбраузерное тестирование призвано максимально сблизить параметры работы приложения во всех веб-обозревателях.
Конечно, сегодня существует возможность проверки работы приложения в разных браузерах, даже если они не установлены на вашем компьютере. Однако, это не самый надёжный способ.
- Google Chrome (для тестирования, как правило, берется последняя версия), им пользуются 48,06% юзеров в мире;
- Internet Explorer, 19,6% пользователей;
- Mozilla Firefox (последней версии), 16,74% пользователей;
- Safari, 10,63% пользователей (в США — 16,88%).
Некогда популярная Opera скатилась до рейтинговой отметки «другие браузеры» и, помимо Восточной Европы, используется редко. Самым же популярным по статистике является Google Chrome, поэтому, как правило, он принимается за основной браузер для тестов.
Как выбрать приоритетный браузер для тестирования?
Приоритетный браузер всегда определяет заказчик. Исходя из специфики приложения и коммерческого таргетирования, он изначально рассчитывает на определённых пользователей. Это логично. Но не стоит упускать из виду тот факт, что не всегда заказчик достаточно осведомлён о том, насколько широк круг потенциальных пользователей. Поэтому задача тестировщиков, как людей более опытных в сфере веб-тестирования, помочь и подсказать, какой браузер в том или ином случае должен стать «главным».
Кроме пожелания заказчика выбор браузеров для тестирования обусловлен и другими объективными критериями: популярность браузера (согласно статистике) и целевой регион — если, скажем, приложение «нацелено» на Россию, то имеет смысл включить в тестирование Opera, а если на пользователей из США или Западной Европы, тестировать в Opera смысла нет.
Основные моменты, которые должны быть проверены в первую очередь — это вёрстка (шрифт, цвет, расположение элементов) и JavaScript (может «отрабатывать» по-разному).
Кроссбраузерное тестирование может быть упрощено за счёт различных инструментов. Например, можно тестировать на виртуальной машине. Это удобное решение в тех случаях, когда необходимо проверить разные версии одного браузера. Также виртуальная машина подойдет, когда тестирование нужно провести в браузере Safari на Mac OS, а реального устройства на этой «оси» нет. При этом стоит помнить об опасности возникновения дефектов, которые не воспроизведутся на реальном устройстве. Например те, что связаны с отображением элементов.
На каких браузерах нужно тестировать ваш сайт? Давно надо было написать эту страницу, чтобы каждый раз не пытаться написать заново, о каких браузерах идет речь, и на каких браузерах нужно тестировать свой сайт.
О браузерах и Css.
О браузерах и поддержке Css
Одни браузеры поддерживают все правила Css.
Для других браузеров пишутся отдельные стили, потому, что они не поддерживают те или иные правила css(например).
Как выбрать браузер для тестирования?
На каких браузерах вообще нужно сконцентрироваться для тестирования вашего сайта?
Конечно жже на тех, которые используют пользователи.
Специально для этой темы сделал отдельную страницу о популярности браузеров.
Это не та непонятная, хрен знает откуда взятая статистика!
А реальная - собранная с моих сайтов начиная с 2013года.
Браузер для тестирования "Internet Explorer"
Некоторые свойства - стандартные, которые используются во многих браузерах по умолчанию не поддерживаются "Internet Explorer".
Данный браузер - это точно " НЕ ТОТ " на котором стоит тестировать ваш сайт!
Самый отстойный браузер, который только можно придумать это - "Internet Explorer" - мною глубоко презираемый! Раньше была такая присказка : IE нужен для того, чтобы скачать "Оперу", сейчас это "Яндекс браузер".
Вопрос к microsoft?
В чем проблема!? Хочется спросить у "мелкомягких"(microsoft)? Хотим повыеживаться?
Преследуем цель, чтобы вебмастера проклинали данный браузер или что?
Я правда не понимаю.
Эта шняга уже длится с 2007года(когда я купил свой первый комп). и все такая же порнуха!
Соответственно, количество пользователей данного браузера стремится к нулю!
И это касается всех других браузеров ведущих такую политику!
Статистика по приведенному браузеру
Посмотрите сколько процентов людей пользуются данным браузером!
За 2020 данным браузером пользовались 0.73%
На какой браузер нужно ориентироваться в процессе создания сайта.
Вопрос - на каких пользователей нужно ориентироваться?
Наверное на тех, кого больше - это ведь логично!?
А как интернет поделен между браузерами?
Я делал отдельное видео о браузерах еще и потому, что устал рассказывать на словах, кто на олимпе, и кто отстой.
Не забываем сказать спасибо! Я старался для вас!
Вывод такой:
Два браузера(50%), которые делят интернет это:
Все остальные не более 10%, а IE даже не может выбраться за 3%.
И два браузера мобильный Яндекс и Chrome - не тестировал, но думаю, что логично предположить, что поддержка правил Css аналогична, что в старших версиях(моё предположение).
Итого получается: Что 4 браузера , которые делят весь интернет и в совокупности занимают 70% интернет пространства и есть, на которые надо ориентироваться, при тестировании вашего сайта!
Как часто заказчики ПО хотят, чтобы их детище работало у любого пользователя, в любых условиях и окружениях? Здесь будет уместен ответ — всегда. Что же скрывается за этой фразой? Что именно требуется для проверки от тестировщика? И как он будет воплощать требования в жизнь?
Не секрет, что WEB-приложения имеют отличия от десктопных. Самое главное отличие и опасение — это то, что мы не знаем, в каком браузере и уж тем более — в какой версии этого браузера откроет приложение наш пользователь.
Сколько существует браузеров
Если вас спросят, сколько браузеров вы знаете, думаю, вы с уверенностью назовете не меньше пяти. А если вас спросить, сколько вообще существует браузеров — возможно, вы задумаетесь.
А если спросить об этом у Гугла? Ответ будет неоднозначный. Количество более-менее известных браузеров сейчас превышает 50 наименований. И возможно, прямо сейчас кто-то выпускает в сеть еще один, свой собственный. А давайте представим, что уже завтра этот “кто-то” выпустит обновление своего браузера. Как же в таких непростых условиях проверить всё?
Какие есть стандарты для создания браузеров
Но и тут есть подводные камни. Стандарты совершенствуются; новые версии браузеров, по крайней мере, стараются совершенствоваться. А старые версии? Мало кто занимается доработкой старых версий. Да вообще никто не занимается. Выпустили новую — и все счастливы. А пользователи, думаете, каждый день проверяют наличие обновлений своего браузера? Тоже вряд ли.
К тому же, не стоит забывать про разработчиков, которые пишут само приложение. Они тоже люди, могут ошибиться в коде, могут не посмотреть в стандарт — бывает всякое. Поэтому, к сожалению, стандарты — не панацея.
Как выбрать браузеры под ваше приложение
Теперь о тестировании. Прежде чем начать непосредственно тестировать то или иное web-приложение, тестировщик должен ознакомиться с требованиями, которые выдвигает заказчик. Бывает так, что в требованиях изначально прописано: “Наш продукт должен работать в браузерах Chrome, начиная с версии 43, и IE, начиная с версии 9”. Или же сам заказчик не может определиться и, конечно же, ему хочется охватить всё и всех. Ну а вдруг, его самый важный потенциальный клиент использует браузер Uran? И что тогда? Он не увидит его приложение вовсе?
Прежде чем тестировщик начнет устанавливать себе все браузеры мира на один компьютер или, наоборот, удалять ненужные 48, можно предложить заказчику провести исследование. Таким образом, тестирование пройдет быстрее и более углубленно. Приложение выйдет в свет раньше. Ну а сам заказчик потратит меньше денежных средств.
Для начала надо определить целевую аудиторию будущего приложения. Кто эти люди, где они живут? Исходя из этих данных в сети можно увидеть статистику использования браузеров — например, самые популярные браузеры Азии. Благодаря таким запросам можно увидеть очень интересные и даже неожиданные результаты. Ну а если приложение в каком-то виде уже существует, можно воспользоваться удобной статистикой от ГуглАналитикс и иметь свои конкретные данные.
Хочу показать вам некоторые сервисы по просмотру статистики:
-
— здесь можно посмотреть данные по каждому месяцу, отследить тенденции. Кроме непосредственно браузеров и их версий можно посмотреть данные по использованию ОС, по разрешениям экрана и мобильным платформам; — здесь собрана статистика по отдельным странам или сторонам света (Азия, Европа, Океания); — на этом сервисе можно самому составить список из интересующих Вас браузеров и их версий; — на Гугл Аналитикс можно будет посмотреть свою собственную статистику.
Как проводить кроссбраузерное тестирование
Тут на помощь приходят эмуляторы. Их тоже существует немало. С помощью одних, например, Browsershots, можно получить скриншоты реальных пользователей с нужных нам браузеров и их версий. С помощью других можно самому выполнять нужные нам действия в самом эмуляторе.
Я хочу рассказать про два из них, которые лично использовала в ходе своей работы.
Например, эмулятор IETester, разработанный специально под этот браузер. В соседних окнах эмулятора можно открыть одну и ту же страницу разными версиями браузера. Это очень удобно и наглядно. Путем сравнения двух соседних вкладок можно легко увидеть несоответствия в отображении. В моей практике эта программа меня не подводила. И вдогонку, еще один её несомненный плюс — программа полностью бесплатна и занимает совсем немного места.
Однако, есть мнения, что отображение в этом эмуляторе не соответствует действительности. Как быть в этой ситуации? Есть решение! Проверить в самом браузере. Если какой-то момент “прям смущает-смущает”, открывайте реальный браузер и смотрите.
Если, например, надо проверить в IE 10, а на компьютере уже есть IE 11? Удалять, переустанавливать, проверять — это неверное решение. Тут на помощь приходят виртуальные машины. Это как компьютер в компьютере.
Например, можно воспользоваться Vmware workstation. И иметь на рабочем компьютере одни версии браузеров, а на виртуальной машине — другие. Можно даже установить несколько таких машин на один компьютер, и после этого иметь под рукой много разного софта. Стоит заметить, что виртуальные машины тоже различаются:
-
— поддерживает работу с Windows и Linux; — только для Windows; — готова к установке Windows, Linux и MAC OS.
Другой эмулятор — Spoon. Им также можно пользоваться абсолютно бесплатно. Он включает в себя широкий выбор браузеров: Firefox, Chrome, Opera, Safari и их разные версии. Тоже довольно удобная программа, которая позволяет в разных окошках на одной странице сравнить разные браузеры.
Разнообразие инструментов для тестирования кроссбраузерности
Конечно, этими двумя программами выбор эмуляторов не ограничивается:
- есть платные Multibrowser и CrossBrowserTesting;
- есть бесплатные — например, Lunascape;
- есть с бесплатным пробным периодом — Browsera.
Каждый тестировщик знает и любит какие-то свои программки.
- делать скриншоты;
- тестировать в разных браузерах и ОС;
- записывать тесты и позже прогонять их на других нужных браузерах.
Кроме записи данный сервис может похвастаться полноценной работой в ОС: т.е., можно в рамках одного теста переключаться между браузерами, задавать разные адреса и даже открывать инструмент разработки.
На что важно обращать внимание при кроссбраузерном тестировании
А зачем вообще тестировщики проводят такое тестирование, что именно они хотят проверить? Как я уже говорила, браузеры — разные, движки, на которых они работают, тоже разные. А это значит, что одни и те же элементы могут отображаться по-разному. Ведь разработчикам во время написания приложения довольно сложно подстроиться сразу под все браузеры и учесть все их особенности.
WEB-приложения по-другому называют клиент-серверные приложения. Здесь клиентом выступает браузер, а сервером — веб-сервер. Браузер принимает от пользователя запрос, отправляет его на сервер. WEB-сервер обрабатывает запрос и передает ответ обратно в виде HTML-страницы. Браузер отрисовывает полученный код в страницу, которую мы с Вами в итоге и видим. То есть, непосредственно от браузера будет зависеть то, какой мы увидим страницу.
Тестировщики при таком виде проверок отслеживают отображение форм, полей, чекбоксов, шрифтов, но наибольшее внимание, конечно же, уделяется интерфейсу: ведь это то, что в первую очередь оценивают пользователи вашего приложения.
Сегодня узнаем, как выбрать браузер для тестирования, рассмотрим алгоритм, на который можно опираться, и определим самые популярные кроссбраузерные баги.
В предыдущей статье мы изучили, почему важно кроссбраузерное тестирование, его особенности и причины возникновения ошибок.
Самое главное и опасное отличие WEB-приложений от десктопных — это то, что мы не можем знать заранее, в каком браузере, и уж тем более — в какой версии этого браузера пользователь откроет наше приложение. Именно поэтому кроссбраузерное тестирование требует особого подхода к выбору браузеров.
Как выбрать браузеры для тестирования
Чаще всего заказчик сам определяет, под какие именно браузеры предназначено его ПО. Но также разработчик и тестировщик могут подсказать клиенту, какой браузер будет основным. Для этого следует изучить статистику заходов в аналогичные приложения и определить, какими браузерами пользуется целевая аудитория.
Как проводить. С чего начать.
Приведу универсальный список, который можно использовать как точку отсчета. Но нужно отметить, что он ни в коем случае не является исчерпывающим.
Элементы интерфейса
Начните с них. Кнопки, поля, текстовая область, шрифты, фон, панели — все должно выглядеть одинаково во всех браузерах.
Например, одна и та же форма в разных браузерах, на первый взгляд, все выглядит идентично, но стоит присмотреться и заметно небольшое отличие (разный чекбокс около “Запомнить”).
Размер окна
Попробуйте свернуть окно и убедитесь, что все элементы можно использовать вне зависимости от доступной области экрана.
Разрешение экрана
Убедитесь, что все элементы верно отображаются и на экранах с высоким разрешением, и на экранах с низким.
Курсоры
Если вид курсора должен меняться (на руку, прицел, и т.д.), убедитесь, что изменения происходят при наведении на нужный объект и своевременно.
Скролл
Проверьте, можете ли вы проскроллить экран вверх и вниз, вправо и влево (где это предусмотрено), не вызывает ли это наложения элементов? Не забудьте протестировать тачпад, тач-кнопка, указатель мыши, колесо мыши, кнопки вверх/вниз – то есть все, что должно заставлять приложение скроллиться.
Масштабирование
При увеличении/уменьшении масштаба страницы все элементы должны оставаться на своем месте и быть доступны в рабочей зоне. Если используется «отзывчивый» дизайн, элементы должны изменить свои размеры.
Также обращайте внимание на частные ошибки Javascript, связанные с поведением приложения в браузере. Это поведение может меняться в зависимости от наличия открытых инструментов разработчика в процессе тестирования. Протестируйте приложение как с открытыми, так и с закрытыми инструментами.
Преимущества кроссбраузерного тестирования
Приложение, прошедшее кроссбраузерное тестирование и пригодное к использованию на широком спектре устройств, имеет более долгий жизненный цикл и быстрее достигает пользовательского доверия.
По завершению тестирования вы убедитесь, что сайт корректно отображается во всех предусмотренных пользовательских конфигурациях и на экранах разных размеров и разрешения.
У каждого из нас случалось, что при открытии приложения в определенном браузере, текст смещался или таблицы уходили за пределы страницы. Это происходит потому что все браузеры отличаются не только внешне, но и внутренне. И у каждого свои нормы того, как он должен работать, что поддерживать и как развиваться.
Кроссбраузерное тестирование как раз позволяет сгладить эти различия, сделав разработку более или менее универсальной.
Кроссбраузерность является одним из важнейших факторов эффективной работы, поскольку аудитория пользуется разными браузерами. И если ваш сайт некорректно отображается хоть на одном из них, к примеру, текст наезжает на картинку, а шрифт слишком мелкий, то есть риск потерять сразу ощутимый процент пользователей.
Именно поэтому необходимо кроссбраузерное тестирование, которое поможет убедиться, что ваш сайт выглядит и работает корректно во всех браузерах.
Определение кроссбраузерного тестирования.
Кроссбраузерное тестирование — вид тестирования, направленный на поддержку и правильное отображение продукта в разных браузерах на экранах различного разрешения, в том числе мобильных устройств и планшетов.
Другими словами, кроссбраузерность — это способность сайта выглядеть во всех браузерах одинаково (или одинаково хорошо).
Какие есть стандарты для браузеров.
Мы привыкли оценивать браузеры по таким параметрам как:
— Скорость загрузки страниц;
— Скорость запуска;
— Потребление оперативной памяти;
— Доступные дополнения и расширения;
— Приватность и так далее.
Это ключевые значения, по которым пользователь выбирает для себя тот или иной продукт.
Сайт – это адрес, расположенный в интернете, на котором находится какая-либо информация (текст, видео, фотографии, документы, музыка и прочее). Поэтому для отображения сайтов в разных браузерах были придуманы такие понятия, как язык разметки и протоколы, которые объединяют все разнообразные браузеры и заставляют их соответствовать общепринятым нормам.
В браузере за отображение информации отвечает так называемый движок, который преобразует HTML (гипертекстовую разметку) и CSS (каскадные таблицы стилей, отвечающие за внешний вид сайта) в видимую на экране картинку. Любой уважающий себя и своих потенциальных пользователей поставщик браузеров будет соблюдать эти правила и сделает продукт, адаптированным под стандарты.
Также стоит отметить, что количество браузеров во много раз превосходит количество существующих движков, поэтому многие браузеры имеют одинаковые движки и, как следствие, одинаковые особенности и баги (проблемы).
Так, движок Chromium, который стал стандартом для современных браузеров (используется в Google Chrome, Opera и многих других), при всех своих достоинствах имеет и недостатки, например, замедляет работу при множестве открытых вкладок, и потребляет много памяти.
Почему возникают кроссбраузерные ошибки.
Конкуренция между поставщиками заставляет их искать новые технические подходы и по-разному внедрять различные функции. Например, большое количество расширений в браузере (микропрограммы, предназначенные для увеличения функциональности и удобства браузера) способно негативно повлиять на скорость работы.
В связи с тем, что любой из браузеров имеет собственные надстройки и плагины, приложения в них могут вести себя по-разному. В определенных браузерах некоторые страницы могут децентрализоваться (смещаться).
Возможен различный уровень поддержки технологических функций. В некоторых браузерах для повышения скорости загрузки страниц по умолчанию отключен JavaScript. И в таком случае, если в верстке сайта JavaScript берет на себя критические функции, то у пользователя могут возникнуть серьезные проблемы.
Некоторые браузеры могут содержать ограничения, которые способны заставить продукт работать медленно или некорректно. Например, технология, которую может не поддерживать браузер – это Flash-анимация. И, соответственно, если сайт содержит такие элементы, то в браузере они могут отображаться некорректно.
Особенности тестирования.
Важно помнить, что приступать к тестированию кроссбраузерности следует только после того, как функционал ПО будет проверен на дефекты другими видами тестирования. В этом случае можно быть уверенным, что выявленные проблемы имеют отношение именно к особенностям браузера, а не являются следствием ошибок, пропущенных на других стадиях. Также необходимо обращать внимание на сочетание операционной системы и браузера, выбирая наиболее распространенные из них.
В основном при тестировании ПО в разных браузерах, проверке подлежит вёрстка (цвет, шрифты, расположение графических картинок и динамических элементов) и JavaScript.
Для оперативного тестирования существуют удобные онлайн-сервисы и утилиты. В результате такой проверки вы получаете результат отображения вашего сайта в разных браузерах, на основании чего можно сделать выводы и заключения.
PS: автор цикла статей о кроссбраузерном тестировании Анна Вихрова (один из наших преподавателей).
Читайте также: