Содержание

Быстрый способ протестировать сайт в разных десктопных браузерах / Хабр

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

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

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

Самый надёжный способ — поднять несколько виртуальных машин, где всё можно будет досконально протестировать (в том числе потаскать границу окна, поскроллить и уж тем более посмотреть, как работает JS). Но ведь часто требуется просто взглянуть на сайт и понять, всё ли с ним в порядке в целом. Либо предоставить такую возможность заказчику.

Классикой жанра для решения поставленной задачи является веб-сервис:

Универсальный, но долгий browsershots.org

Он позволяет получить скриншот не только из конкретного браузера, но и выбрать его версию и ОС, в которой браузер запущен.

Недостаток один — очередь. Скриншотов нужной страницы можно прождать полчаса и даже больше.

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

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

Многоцелевой www.thumbalizr.com и его IE7

Этот сервис вообще-то создан для создания «превьюшек» сайтов и даже снабжён соответствующим API, но если отправить его делать скриншот такой хитрой страницы, как inet.ya.ru, то становится ясно, что в качестве движка для рендеринга скриншотов на сервисе трудится IE7. И он пригодится любому, кто обновил IE до восьмого, либо не пользуется Windows совсем.
Оптимальный ipinfo.info/netrenderer

Сервис умеет делать скриншоты в IE 5.5 (для некрофилов), IE 6, 7 и 8. То есть отлично подходит для тестирования. Также имеется режим, где на одном скриншоте показываются различия в вёрстке между IE6 и IE7. Удобно, но, надеюсь, в будущем можно будет сравнивать и с восьмым IE сразу.
Удобный browserling.com с возможностью поскроллить и покликать

Про сервис рассказали в комментариях. Он хорош, потому что единственный из перечисленных позволяет покликать, поскроллить, потестировать JS (вы получаете что-то вроде VNC-доступа к удалённому окошку с нужным браузером). Недостаток для такого шикарного сервиса предсказуем — очередь желающих. Хотя визуализирована она на славу:

Browserling предоставляет в ваше распоряжение любой IE от 5.5 до 9, а также последние версии Opera, Chrome, Safari и Firefox. Очередь при этом общая, вне зависимости от того, на какой браузер вы записывались. Из-за этого лично мне откровенно хочется отшлёпать тех, кто занимает очередь с целью погонять доступный на всех платформах Firefox.

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

Ваша версия

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

13 сервисов для тестирования сайта в разных браузерах

Тестирование сайта в разных браузерах и устройствах

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

» Кроссбраузерность — свойство сайта отображаться и работать во всех популярных браузерах идентично. Под идентичностью понимается отсутствие развалов верстки и способность отображать материал с одинаковой степенью читабельности. Понятие «кроссбраузерность» очень часто путают с попиксельным соответствием, что на самом деле является разными понятиями «. (Википедия)

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

1. Browsershots (бесплатно/платно)

Browsershots — это веб-сервис, который делает скриншоты вашего сайта в разных операционных системах и браузерах ( всего доступно более 130+ браузеров и платформы: Linux, Windows, Mac OS, Gecko, KHTML/WebKit). Причем, можно, дополнительно выставлять некоторые опции: разрешение экрана, глубину цвета, включить или выключить Javascript, Java, Flash.  Это удобный, хоть и довольно медленный способ проверить свой сайт сразу во многих браузерах. Когда вы вводите адрес вашего сайта  в строку для проверки, он ставится в очередь на тестирование. После этого скриншоты будут появляться на итоговой странице по очереди. Это может занять от 5 минут до 2 часов.  В бесплатной версии все происходит довольно медленно. Кроме того, одна сессия (запрос) может длиться только 30 минут.

Следует обратить внимание, что данный сайт имеет многоязычный интерфейс (в том числе — русский и украинский.)

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

. За 29.95 у.е. в месяц вы получите так называемую «приоритетную обработку«: скриншоты будут появляться намного быстрее, чем в бесплатной версии, сможете получить от 30 до 50 скриншотов всего за  5 минут. Кроме того, ваши скриншоты будете видеть только вы, тогда как в бесплатной версии они в итоге выкладываются в общую ленту.

2. Adobe

До марта 2013 года у Adobe был отличный бесплатный сревис Adobe BrowserLab для тестирования сайта в разных браузерах и ситемах. Но теперь он закрыт и вместо этого представлен новый сервис Adobe Edge Inspect CC.

Adobe Edge Inspect CC — это продукт, входящий в принципиально новую организацию Adobe продуктов — в облако

Adobe Creative Cloud.  Получить аккаунт в данном облаке можно по нескольким пакетам, все они платные. Средний стоит 49,99 у.е. в месяц. Бесплатно Adobe Creative Cloud можно попробовать 30 дней.

3. IE NetRenderer (бесплатно)

IE NetRenderer — бесплатный онлайн-сервис только для браузера Internet Explorer, который дает возможность проверить ваш сайт под браузером Internet Explorer версий: 9, 8, 7, 6, 5.5.

Тут все просто:  вводите адрес своего сайта, выбираете версию IE и тут же получаете скриншот.

4. IE Tester (бесплатно)

IETester — это абсолютно бесплатное приложение только для браузера Internet Explorer, которое позволяет локально на вашем компьютере просматривать сайт в разных версиях Internet Exlporer (версии:  10, 9, 8, 7, 6, 5.5) под операционными системами Windows 7, Vista и XP.

Для этого нужно скачать IE Tester и установить у себя на компьютере. Найти последнюю версию IE Tester можно тут: http://www.my-debugbar.com/wiki/IETester/HomePage.

5. BrowserСam (платно)

BrowserСam — очень мощный платный  онлайн-сервис для тестирования сайтов под

любым браузером и любой платформой. Одна из главных «фишек» данного сервиса в том, что на нем предоставляется удаленный доступ (через VNC) к компьютерам с уже установленными ОС и браузерами, в которых вы можете тестировать свой сайт.  Кроме того есть такая важная опция как тестирование под iPhone OS, Android, Blackberry, Windows Mobile. Можно также тестировать е-мейлы на разных устройствах, что очень важно для рассылочных компаний.

Цены стартуют от 19,95 у.е. в день в зависимости от функционала.

6. CrossBrowserTesting (платно)

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

100 вариантов проверок,  в том числе тестирование под Android, iPad, iPhone ) .

Ценовая политика выгодней и гибче, чем у предыдущего сервиса BrowserСam: базовая цена стартует от 29.95 у.е. в неделю. Кроме того, дается бесплатный тестовый триальный период в 7 дней на каждый из трех пакетов, правда с несколько с ограниченной квотой, нежели в платной версии.

7. Litmus (платно/бесплатно)

Litmus —  онлайн-сервис, который предоставляет возможность тестирования сайта на разных браузерах. Кроме предоставления скриншотов, заодно проверяет валидность html и css кода. Особенность его в том, что он в основном ориентирован на тестирование

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

Платная версия сервиса предполагает три пакета: базовый (49 у.е. в месяц), плюс (99 у.е. в месяц), премиум (299 у.е. в месяц.) Бесплатная триал-версия действует 7 дней.

8. СloudTesting (платно)

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

Cloud Testing будет выполнять этот сценарий в нескольких браузерах и операционных системах. Затем он предоставляет скриншоты.

Ценовая политика стартует от 99 у.е. в месяц.

9. Mogotest (платно)

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

Ценовая политика стартует от 15 у.е. в месяц для физических лиц.  При этом есть возможность бесплатно тестировать выбранный пакет (триальная версия) 14 дней.

10. Multi-Browser Viewer (платно)

Multi-Browser Viewer — платное приложение, которое работает с десктопными и мобильными браузерами и включает в себя 26 виртуализируемых браузеров, 5 мобильных браузеров (в том числе iPhone и IPad) и 61 скриншот-браузер (с их помощью можно видеть, как визуализируются страницы, но нельзя видеть результат взаимодействия пользователя с сайтом).

Ценовая политика Multi-Browser Viewer составляет 139,95 у.е. за однопользовательскую лицензию и включает один год использования продуктов и обновлений. Кроме того доступна бесплатная триал-версия программы (14 дней).

11. Sauce Labs (бесплатно/платно)

Sauce Labs — онлайн сервис, который предоставляет доступ ко множеству браузеров в разных ОС и устанавливает соединение вашего браузера с настроенной виртуальной машиной.

Сервис предоставляет платные пакеты (цены стартуют от 49 у.е. в месяц ), кроме того, есть бесплатная квота на тестирование: 200 минут в месяц и позволяет создавать тесты автоматизированного тестирования в браузерах (используется Selenium)

12. Spoon (бесплатно)

Spoon — это онлайн-сервис эмуляции программ. Предоставляется бесплатная возможность запуска Firefox, Chrome, Opera и Safari для пользователей Windows. Доступны разные версии браузеров Firefox, Chrome, Safari,  Opera. Технически, Spoon поддерживает виртуализацию IE, но эта возможность отключена по требованию Microsoft.

13. Browsera (бесплатно/платно)

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

Бесплатная версия включает в себя довольно ограниченное число браузеров и низкое разрешение. Платные пакеты стартуют  начиная от 39 у.е. за 14 дней и от 49 у.е. до 99 у.е. за месячную подписку.

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

Похожее

Проверка кроссбраузерности сайта — бесплатные инструменты для тестирования

Вы можете просматривать сайт, используя последнюю версию Firefox, и он будет выглядеть удивительно. А после этого на сайт может зайти посетитель, использующий Internet Explorer 9, и ресурс не только будет выглядеть ужасно, но еще и не будет работать должным образом. Угадайте, что тогда произойдет? Вы потеряете посетителя. Поэтому кроссбраузерность так важна:

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

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

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


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

Firefox, Internet Explorer, Safari, Chrome и Opera обычно можно без проблем загрузить и установить. Но если у вас нет такой возможности, то существует множество веб-инструментов, которые позволяют проверить кроссбраузерность сайта онлайн.

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

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


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

Spoon предлагает более основательный вариант проверки кроссбраузерности. Для Chrome, Firefox, Internet Explorer, Opera и Safari можно выбрать точную версию, которую нужно протестировать.

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


После выбора браузера он открывается в новом окне. Затем нужно ввести URL-адрес и протестировать страницу.

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

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


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

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

IE NetRenderer показывает тестируемый сайт только в Internet Explorer, но зато позволяет выбрать версию от IE 5.5 до IE 11. Это еще один простой инструмент, который подходит только для тестирования внешнего вида сайта:

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

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

Если на сайте будут обнаружены ошибки JavaScript, Browsera предоставит детальную информацию по ним, включая тип и версию браузера, страницы или элементы сайта, строку кода, содержащую ошибку, ее описание. Например, «недопустимое значение свойства«:


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

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

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

Spoon Browser Sandbox — единственный бесплатный инструмент из рассмотренных в этой статье, позволяющий провести полную проверку ресурса. Так что, если вы не хотите устанавливать все браузеры или платить за услугу, это лучший вариант для тестирования интерактивных элементов сайта.

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

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

Поделитесь своими мыслями в комментариях!

Данная публикация является переводом статьи «Ultimate Free Tools for Cross-Browser Testing» , подготовленная редакцией проекта.

Проверка кроссбраузерности сайта — бесплатные инструменты для тестирования

Вы можете просматривать сайт, используя последнюю версию Firefox, и он будет выглядеть удивительно. А после этого на сайт может зайти посетитель, использующий Internet Explorer 9, и ресурс не только будет выглядеть ужасно, но еще и не будет работать должным образом. Угадайте, что тогда произойдет? Вы потеряете посетителя. Поэтому кроссбраузерность так важна:

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

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

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


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

Firefox, Internet Explorer, Safari, Chrome и Opera обычно можно без проблем загрузить и установить. Но если у вас нет такой возможности, то существует множество веб-инструментов, которые позволяют проверить кроссбраузерность сайта онлайн.

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

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


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

Spoon предлагает более основательный вариант проверки кроссбраузерности. Для Chrome, Firefox, Internet Explorer, Opera и Safari можно выбрать точную версию, которую нужно протестировать.

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


После выбора браузера он открывается в новом окне. Затем нужно ввести URL-адрес и протестировать страницу.

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

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


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

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

IE NetRenderer показывает тестируемый сайт только в Internet Explorer, но зато позволяет выбрать версию от IE 5.5 до IE 11. Это еще один простой инструмент, который подходит только для тестирования внешнего вида сайта:

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

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

Если на сайте будут обнаружены ошибки JavaScript, Browsera предоставит детальную информацию по ним, включая тип и версию браузера, страницы или элементы сайта, строку кода, содержащую ошибку, ее описание. Например, «недопустимое значение свойства«:


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

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

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

Spoon Browser Sandbox — единственный бесплатный инструмент из рассмотренных в этой статье, позволяющий провести полную проверку ресурса. Так что, если вы не хотите устанавливать все браузеры или платить за услугу, это лучший вариант для тестирования интерактивных элементов сайта.

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

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

Поделитесь своими мыслями в комментариях!

Данная публикация является переводом статьи «Ultimate Free Tools for Cross-Browser Testing» , подготовленная редакцией проекта.

Как проверить сайт в разных браузерах: несколько методов – 1C-UMI

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

Кроссбраузерность — это правильное отображение элементов сайта во всех браузерах. То есть когда вы заходите на один и тот же ресурс с Google Chrome, Internet Explorer и других программ для серфинга по всемирной паутине, и этот сайт выглядит везде корректно. Нет поехавшей верстки, корявого дизайна, нечитабельных шрифтов, каких-либо разрывов и прочих изъянов.

Почему любой сайт обязан быть кроссбраузерным

Согласно проведенным исследованиям, за каждым веб-обозревателем стоит определенная целевая аудитория. Например, Яндекс.Браузером и Хромом пользуются в основном молодые люди, Internet Explorer и Opera — поколение постарше, кому за 35, Mozilla Firefox ― технари, Safari ― пользователи Mac OS.

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

Кроме того, если посетитель сайта проводит на нем меньше 15 секунд, поисковые машины рассматривают такое поведение, как отказ. А чем больше последних, тем ниже будут позиции сайта в том же Яндексе или Google, и клиентам будет сложно найти ресурс.

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

Почему некоторые люди до сих пор пользуются IE:

  • далеко не все в курсе, что существуют более быстрые и удобные обозреватели для серфинга по интернету;
  • отдельные пользователи просто привыкли к Internet Explorer и боятся попробовать что-то другое, полагая, что это может нарушить стабильность работы системы;
  • во многих компаниях установлена корпоративная защита от установки сторонних программ, поэтому приходится пользоваться тем обозревателем, что интегрирован в Windows по умолчанию;
  • попадаются также ярые фанаты продукции Microsoft, принципиально использующие только их софт и не желающие рассматривать альтернативы.

А теперь представьте, что ваш сайт выглядит в Internet Explorer так, будто в него выпустили торпеду. Конечно, если вы создавали или собираетесь создать сайт на конструкторе 1C-UMI, такого не будет гарантировано, так как у нас все шаблоны реализованы с учетом кроссбраузерности. Однако в иных случаях это не исключено.

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

Проверяем сайт в разных браузерах

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

Способ № 1

Нужно установить на свой компьютер все те браузеры, которые наиболее популярны у пользователей вашего сайта. Вероятно, вы зададитесь вопросом, а как узнать, какими обозревателями пользуются гости ресурса? Для этого нужно зайти в систему сбора статистики Google Analytics, в разделе «Браузер и ОС» изучить перечень браузеров и количество посещений из этих браузеров.

Важно: чтобы этот список показывался, сайт должен быть подключен к Google Analytics. Аналогичная статистика доступна и в Яндекс.Метрике.

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

Способ № 2

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

Один из наиболее известных бесплатных инструментов — Browsershots. Этот сайт поддерживает порядка 65 различных браузеров и операционных систем. Проверка может занять от 5 минут до 2 часов. Все зависит от того, насколько сервер загружен запросами.

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

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

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

Способ № 3

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

Как сделать сайт кроссбраузерным

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

Поэтому, если у вас есть желание, чтобы ваш сайт был кроссбраузерным, создайте его на конструкторе 1C-UMI! Ведь у нас абсолютно всем шаблонам присуща кроссбраузерность. Таким образом, вы будете спокойны за свой сайт и его отображение в разных браузерах.

Проверка кроссбраузерности сайта – видимость сайта в браузерах

Вступление

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

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

Видимость сайта в браузерах

Если вы «погуглите» список браузеров доступных для установки пользователям, то наверняка найдете список из 60± программ. Большинство из них будут модификациями Chromium и Firefox, однако общий список получится внушительный. (список тут)

Вручную проверить видимость сайта во всех браузерах задача, мягко сказать, бестолковая. Хотя можно установить у себя основные браузеры и очень быстро открыть свой сайт в основных браузерах Google Chrome, Яндекс Chrome, Firefox и Opera и тем самым перекрыть 90% возможных посетителей вашего сайта.

По данным статистики StatCounter, популярность браузеров в России на октябрь 2018 года выглядит так.

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

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

Browsershots.org

Сервис Browsershots дает вам бесплатную возможность сделать скиншоты проверяемой страницы сайта в основанных браузерах и их версиях. Бесплатно, проверка кроссбраузерности сайта, проводится для осей Linux и Windows. Для MAC и BSD придётся делать денежный взнос.

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

Более интересны 5 настроек: Screen Size, Color Depth, Javascript, Java, Flash. По умолчанию они выставлены на усмотрение сервиса.

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

Еще один момент. Значок копирайта внизу дает информацию, что сервис не обновлялся с 2015 года. Это подтверждают последние версии браузеров доступные для проверки. Например, последний «Opera» для проверок 15.0, а не 56.0.

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

результат проверок

Turbo.net (бывший Spoon)

Сервис turbo.net позволяет запустить онлайн на вашем рабочем столе или планшете браузеры IE, Chrome, Firefox. Далее вы вызываете свой сайт и изучаете его, сколько вам нужно.

На этом сайте инструмент проверок кроссбраузерности называется «Browser Sandbox» и воспользоваться им вы можете после простой регистрации на сайте.

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

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

Видимость сайта в Internet Explorer

Возвращаясь к статистике StatCounter, мы обнаруживаем, что, в мире, браузер Microsoft Internet Explorer, занимает третье место, по использованию. А это значит, что игнорировать это браузер со всеми его версиями нельзя.

Проверить видимость сайта в Internet Explorer можно очень просто. Есть специальный инструмент – проверка кроссбраузерности сайта во всех версиях Internet Explorer, сервис netrenderer.com. Далее его описание, позаимствованное с сайта сервиса.

IE NetRenderer позволяет вам проверять, как веб-сайт отображается многочисленными версиями Microsoft Internet Explorer. Особенно старые версии веб-браузеров Microsoft известны своим неожиданным поведением и несоблюдением интернет-стандартов W3C. Поэтому для каждого веб-дизайнера нужно обязательно регулярно проверять свои веб-сайты на совместимость с этими веб-браузерами. Просто введите URL-адрес проверяемой веб-страницы в поле и нажмите кнопку «Render». Через несколько секунд вы получите скриншот страницы. Попробуйте, это бесплатно!

Сервис IE NetRenderer работает быстро. В отличие от других служб скриншотов, мы можем обрабатывать большое количество захваченных заданий параллельно и в реальном времени. Скорость рендеринга должна быть сопоставимой, если не быстрее вашего локального браузера. Наши двигатели IE имеют гарантированную пропускную способность интернета в 200 Мбит/с.

Для чего подходит

Этот инструмент веб-рендеринга идеально подходит для веб-дизайнеров, работающих на рабочих платформах Apple iMac и Linux. Он позволяет проверять веб-проекты изначально на всех популярных версиях Internet Explorer, без необходимости выделять несколько физических или виртуальных ПК с Microsoft Windows для этой цели. Перед каждым заданием рендеринга мы очищаем кэш Internet Explorer. Это позволяет сразу увидеть эффект от всех изменений, внесенных во время веб-разработки.

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

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

Снимок экрана всегда соответствует 100% оригинального размера и точности картинки вплоть до пикселя. Пользователь отмечает максимальную ширину видимого просмотра на экранах 800×600 и 1024×768 с учетом ширины полосы прокрутки браузера.

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

Можете использовать его в качестве приблизительной оценки, скорости загрузки веб-сайта людьми в Центральной Европе. Вы также можете использовать IE NetRenderer для просмотра веб-сайтов анонимно. Посетив веб-сервер вы не оставите никаких следов ни о вашем IP-адресе, ОС, версии браузера, плагинах или файлах cookie.

Browserling.com

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

Сервис удобный, но на бесплатном тарифе ограничено время сессии проверки тремя минутами. Платный тариф с неограниченными проверками стоит 19$/месяц. Примечательно наличие проверок на Android (6 версий).

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

Browsera.com

Сервис browsera.com платный, однако в планах подписки имеется 30-дневная бесплатная пробная версия.

CrossBrowserTesting

Сервис CrossBrowserTesting позволит провести тестирование совместимости кросс-браузера в облачном сервере на 2000+ реальных браузерах Интернет.

В бесплатном тарифном плане, после регистрации, можно провести 60 минут проверочных сессий в месяц (6 сессий по 10 минут). Неограниченное использование сервиса стоит 15$/в месяц.

Browserstack.com

Данный сервис browserstack.com платный, от 29$. Он даст возможность проверить свой сайт в разных браузерах на различных физических и мобильных устройствах Android и iOS для получения наиболее точных результатов.

Saucelabs.com

На сайте мощный набор различных платных инструментов, среди которых есть тест кроссбраузерности, от 19$. ссылка.

Зачем нужно время для проверок

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

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

Вывод

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

©www.wordpress-abc

Похожие посты:

Похожее

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

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

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

1. Browsershots (бесплатно/платно)

Browsershots — это веб-сервис, который делает скриншоты вашего сайта в разных операционных системах и браузерах ( всего доступно 65 браузеров). Это удобный, хоть и довольно медленный способ проверить свой сайт сразу во многих браузерах. Когда вы вводите адрес вашего сайта в строку для проверки, он ставится в очередь на тестирование. После этого скриншоты будут появляться на итоговой странице по очереди. Это может занять от 5 минут до 2 часов. В бесплатной версии все происходит довольно медленно. Кроме того, одна сессия (запрос) может длиться только 30 минут.

Следует обратить внимание, что данный сайт имеет многоязычный интерфейс (в том числе — русский и украинский.)

Однако, хоть данный сервис заявлен как бесплатный, в нем есть и платные услуги. За 29.95 у.е. в месяц вы получите так называемую «приоритетную обработку«: скриншоты будут появляться намного быстрее, чем в бесплатной версии, сможете получить от 30 до 50 скриншотов всего за 5 минут. Кроме того, ваши скриншоты будете видеть только вы, тогда как в бесплатной версии они в итоге выкладываются в общую ленту.

2. Adobe

До марта 2013 года у Adobe был отличный бесплатный сревис Adobe BrowserLab для тестирования сайта в разных браузерах и ситемах. Но теперь он закрыт и вместо этого представлен новый сервис Adobe Edge Inspect CC.+

Adobe Edge Inspect CC — это продукт, входящий в принципиально новую организацию Adobe продуктов — в облако Adobe Creative Cloud. Получить аккаунт в данном облаке можно по нескольким пакетам, все они платные. Средний стоит 49,99 у.е. в месяц. Бесплатно Adobe Creative Cloud можно попробовать 30 дней.

3. IE NetRenderer (бесплатно)

IE NetRenderer — бесплатный онлайн-сервис только для браузера Internet Explorer, который дает возможность проверить ваш сайт под браузером Internet Explorer версий: 9, 8, 7, 6, 5.5.

Тут все просто: вводите адрес своего сайта, выбираете версию IE и тут же получаете скриншот.

4. IE Tester (бесплатно)

IETester — это абсолютно бесплатное приложение только для браузера Internet Explorer, которое позволяет локально на вашем компьютере просматривать сайт в разных версиях Internet Exlporer (версии: 10, 9, 8, 7, 6, 5.5) под операционными системами Windows 7, Vista и XP.

Для этого нужно скачать IE Tester и установить у себя на компьютере.

5. BrowserСam (платно)

BrowserСam — очень мощный платный онлайн-сервис для тестирования сайтов под любым браузером и любой платформой. Одна из главных «фишек» данного сервиса в том, что на нем предоставляется удаленный доступ (через VNC) к компьютерам с уже установленными ОС и браузерами, в которых вы можете тестировать свой сайт. Кроме того есть такая важная опция как тестирование под iPhone OS, Android, Blackberry, Windows Mobile. Можно также тестировать е-мейлы на разных устройствах, что очень важно для рассылочных компаний.

Цены стартуют от 19,95 у.е. в день в зависимости от функционала.

6. CrossBrowserTesting (платно)

CrossBrowserTesting — также очень функциональный платный сервис, где вы можете проверить за несколько минут сайт в разных браузерах, в разных операционных системах, на разных устройствах (поддерживается более 100 вариантов проверок, в том числе тестирование под Android, iPad, iPhone ) .

Ценовая политика выгодней и гибче, чем у предыдущего сервиса BrowserСam: базовая цена стартует от 29.95 у.е. в неделю. Кроме того, дается бесплатный тестовый триальный период в 7 дней на каждый из трех пакетов, правда с несколько с ограниченной квотой, нежели в платной версии.

7. Litmus (платно/бесплатно)

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

Платная версия сервиса предполагает три пакета: базовый (49 у.е. в месяц), плюс (99 у.е. в месяц), премиум (299 у.е. в месяц.) Бесплатная триал-версия действует 7 дней.

8. СloudTesting (платно)

CloudTesting — платный онлайн-сервис, который предоставляет возможность функционального тестирования кроссбраузерности сайта. Вы записываете сценарий поведения пользователя с вашим браузером и Selenium IDE, загружаете его, после чего Cloud Testing будет выполнять этот сценарий в нескольких браузерах и операционных системах. Затем он предоставляет скриншоты.

Ценовая политика стартует от 99 у.е. в месяц.

9. Mogotest (платно)

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

Ценовая политика стартует от 15 у.е. в месяц для физических лиц. При этом есть возможность бесплатно тестировать выбранный пакет (триальная версия) 14 дней.

10. Multi-Browser Viewer (платно)

Multi-Browser Viewer — платное приложение, которое работает с десктопными и мобильными браузерами и включает в себя 26 виртуализируемых браузеров, 5 мобильных браузеров (в том числе iPhone и IPad) и 61 скриншот-браузер (с их помощью можно видеть, как визуализируются страницы, но нельзя видеть результат взаимодействия пользователя с сайтом).

Ценовая политика Multi-Browser Viewer составляет 139,95 у.е. за однопользовательскую лицензию и включает один год использования продуктов и обновлений. Кроме того доступна бесплатная триал-версия программы (14 дней).

11. Sauce Labs (бесплатно/платно)

Sauce Labs — онлайн сервис, который предоставляет доступ ко множеству браузеров в разных ОС и устанавливает соединение вашего браузера с настроенной виртуальной машиной.

Сервис предоставляет платные пакеты (цены стартуют от 49 у.е. в месяц ), кроме того, есть бесплатная квота на тестирование: 200 минут в месяц и позволяет создавать тесты автоматизированного тестирования в браузерах (используется Selenium).

12. Spoon (бесплатно)

Spoon — это онлайн-сервис эмуляции программ. Предоставляется бесплатная возможность запуска Firefox, Chrome, Opera и Safari для пользователей Windows. Доступны разные версии браузеров Firefox, Chrome, Safari, Opera. Технически, Spoon поддерживает виртуализацию IE, но эта возможность отключена по требованию Microsoft.

13. Browsera (бесплатно/платно)

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

Бесплатная версия включает в себя довольно ограниченное число браузеров и низкое разрешение. Платные пакеты стартуют начиная от 39 у.е. за 14 дней и от 49 у.е. до 99 у.е. за месячную подписку.

О компании Browserling Inc.

Компания

Основана в 2010 году и основана в 2011 году Питером Круминсом (генеральным директором) и Джеймсом Халлидеем. Расположен в Окленде, штат Калифорния. Мы первая компания в ускорителе стартапов Hackers & Founders, и мы любим решать проблемы кросс-браузерного тестирования!

Инвесторы

Дэвид Уикли

Ребекка Еженедельник

Ульрих Галл

Майк Цао

Ник Хейман

Что говорят о нас наши инвесторы?

«Эти ребята великолепны и создали невероятно полезный продукт, который было сложно построить.»(Дэвид Уикли)

Советники

Дэвид Уикли

Адам Рифкин

Джонатан Нельсон

Лаура Нельсон

Что говорят о нас наши консультанты?

«Джеймс и Петерис умны, прагматичны и трудолюбивы.Они также входят в число лучших экспертов по node.js. Их технологии являются передовыми, и их клиенты любят их ». (Адам Рифкин)

«Джеймс и Петерис — двое из самых удивительных разработчиков, которых я видел за долгое время. Они отгружают и отправляют, и отправляют, и отправляют». (Джонатан Нельсон)

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

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

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

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

Инструменты этой категории помогают при кроссбраузерном тестировании вашего сайта в Chrome, Firefox, IE, Edge, Safari и других браузерах.

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

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

  • Проверка кода: сообщают ли некоторые браузеры об ошибках кода?
  • Производительность: сайт работает медленно или даже вызывает сбои?
  • Адаптивный дизайн: постоянно ли адаптируется дизайн?
  • Несоответствия пользовательского интерфейса: есть ли еще недостатки дизайна?
  • Другое странное поведение: что-то еще просто не работает?

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

  1. LambdaTest
  2. Selenium
  3. Ghost Inspector
  4. Browsera
  5. Perfecto
  6. Experitest
  7. Sauce Labs
  8. Browserling
  9. Functionize
  10. Mabl

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

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

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

1. LambdaTest

2. Селен

3. Призрачный инспектор

4. Browsera

5. Perfecto

6. Experitest

7. Лаборатория соуса

8. Просмотр

9. Функционировать

10. Mabl

  1. EndTest
  2. TestingBot
  3. IE NetRenderer
  4. Вкладка IE
  5. Smartbear TestComplete
  6. Datadog
  7. Browsershots
  8. Ranorex Studio
  9. Turbo Browser Sandbox
  10. BrowserStack Live
  11. Applitools

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

    Введение в кроссбраузерное тестирование — Изучите веб-разработку

    В этой статье модуль начинается с обзора темы (кросс) браузерного тестирования и ответов на такие вопросы, как «что такое кроссбраузерное тестирование?», «С какими наиболее распространенными типами проблем вы можете столкнуться?», и «каковы основные подходы к тестированию, выявлению и устранению проблем?»

    Предварительные требования: Знакомство с основными языками HTML, CSS и JavaScript.
    Цель: Чтобы получить представление о высокоуровневых концепциях кроссбраузерного тестирования.

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

    • Различные браузеры, кроме одного или двух, которые вы регулярно используете на своих устройствах, в том числе немного более старые браузеры, которые некоторые люди могут все еще использовать, которые не поддерживают все последние, самые блестящие функции CSS и JavaScript.
    • Различные устройства с разными возможностями, от новейших лучших планшетов и смартфонов до смарт-телевизоров, вплоть до дешевых планшетов и даже более старых функциональных телефонов, на которых могут работать браузеры с ограниченными возможностями.
    • Люди с ограниченными возможностями, которые используют Интернет с помощью вспомогательных технологий, таких как программы чтения с экрана, или не используют мышь (некоторые люди используют только клавиатуру).

    Помните, что вы не являетесь вашими пользователями — просто потому, что ваш сайт работает на MacBook Pro или Galaxy Nexus высокого класса, это не значит, что он будет работать для всех ваших пользователей — предстоит еще много тестирования!

    Примечание : «Заставить Интернет работать для всех» дает более полезный обзор различных браузеров, которые используют люди, их доли на рынке и связанных с ними проблем кроссбраузерной совместимости.

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

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

    Во-вторых, когда мы говорим «через приемлемое количество веб-браузеров», мы не имеем в виду 100% браузеров в мире — это практически невозможно. Вы можете сделать несколько осознанных звонков относительно того, какие браузеры и устройства будут использовать ваши пользователи (это мы обсудим во второй статье серии — см. Нужно проверить их все?), Но вы не можете гарантировать все.Как веб-разработчик, вам необходимо согласовать с владельцем сайта ряд браузеров и устройств, над которыми обязательно должен работать код, но помимо этого, вам необходимо разработать защитный код, чтобы дать другим браузерам наилучшие шансы на то, чтобы используйте свой контент. Это одна из самых серьезных проблем веб-разработки.

    Примечание : Защитное кодирование мы также рассмотрим позже в этом модуле.

    Существует много разных причин, по которым возникают проблемы кроссбраузерности, и обратите внимание, что здесь мы говорим о проблемах, когда вещи ведут себя по-разному в разных браузерах / устройствах / предпочтениях просмотра.Прежде чем вы даже перейдете к кроссбраузерным проблемам, вы должны уже исправить ошибки в своем коде (см. Отладка HTML, Отладка CSS и Что пошло не так? Устранение неполадок JavaScript из предыдущих разделов, чтобы при необходимости освежить память).

    Проблемы с кроссбраузерностью обычно возникают по следующим причинам:

    • Иногда браузеры имеют ошибки или по-разному реализуют функции. Эта ситуация намного менее плохая, чем была раньше; назад, когда IE4 и Netscape 4 конкурировали за доминирующий браузер в 1990-х годах, компании-разработчики браузеров сознательно реализовывали разные вещи друг для друга, пытаясь получить конкурентное преимущество, что сделало жизнь разработчиков адом.В наши дни браузеры намного лучше следуют стандартам, но иногда все еще появляются различия и ошибки.
    • некоторые браузеры могут иметь разные уровни поддержки технологических функций, чем другие. Это неизбежно, когда вы имеете дело с передовыми функциями, которые браузеры только реализуют, или если вам нужно поддерживать действительно старые браузеры, которые больше не разрабатываются, которые, возможно, были заморожены (т.е. над ними больше не выполняется новая работа. ) задолго до того, как была изобретена новая функция.Например, если вы хотите использовать на своем сайте передовые функции JavaScript, они могут не работать в старых браузерах. Если вам нужно поддерживать старые браузеры, возможно, вам придется не использовать их или преобразовать код в старомодный синтаксис, используя при необходимости какой-то кросс-компилятор.
    • Некоторые устройства могут иметь ограничения, из-за которых веб-сайт работает медленно или плохо отображается. Например, если сайт был разработан так, чтобы хорошо смотреться на настольном ПК, он, вероятно, будет выглядеть крошечным и его будет трудно читать на мобильном устройстве.Если ваш сайт содержит множество больших анимаций, это может быть нормально для планшета с высокими характеристиками, но может быть вялым или прерывистым на устройстве низкого уровня.

    и другие причины.

    В следующих статьях мы рассмотрим типичные проблемы кроссбраузерности и рассмотрим их решения.

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

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

    Рабочий процесс тестирования и исправления ошибок в проекте можно разбить примерно на следующие четыре этапа (это очень грубо — разные люди могут действовать по-разному):

    Начальное планирование> Разработка> Тестирование / обнаружение> Исправления / итерация

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

    Первоначальное планирование

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

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

    Так, например, вы можете создать сайт электронной коммерции, который обслуживает клиентов в Северной Америке. Сайт должен полностью работать в последних нескольких версиях наиболее популярных браузеров для настольных и мобильных устройств (iOS, Android, Windows phone) — в их число должны входить Chrome (и Opera, поскольку он основан на том же механизме рендеринга, что и Chrome), Firefox, IE. / Edge и Safari.Он также должен обеспечивать приемлемый опыт работы с IE 8 и 9 и быть доступным с соблюдением требований WCAG AA.

    Теперь, когда вы знаете свои целевые платформы тестирования, вам следует вернуться и просмотреть требуемый набор функций и какие технологии вы собираетесь использовать. Например, если владелец сайта электронной коммерции хочет 3D-тур на основе WebGL по каждому продукту, встроенному в страницы продукта, он должен будет согласиться с тем, что это просто не будет работать в версиях IE до 11. Вам придется согласиться. чтобы предоставить версию сайта без этой функции пользователям старых версий IE.

    Вам следует составить список потенциальных проблемных областей.

    Примечание : Вы можете найти информацию о поддержке технологий браузером, просмотрев различные функции на MDN — сайте, на котором вы находитесь! Вы также должны проконсультироваться с caniuse.com для получения дополнительных полезных сведений.

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

    Разработка

    Теперь о разработке сайта. Вы должны разделить различные части разработки на модули, например, вы можете разделить различные области сайта вверх — домашнюю страницу, страницу продукта, корзину покупок, рабочий процесс оплаты и т. Д.Затем вы можете дополнительно разделить их: реализовать общий верхний и нижний колонтитулы сайта, реализовать подробный просмотр страницы продукта, реализовать постоянный виджет корзины покупок и т. Д.

    Существует несколько общих стратегий кроссбраузерной разработки, например:

    • Сделайте так, чтобы вся функциональность работала как можно точнее во всех целевых браузерах. Это может включать в себя написание разных путей кода, которые воспроизводят функциональность по-разному, нацеленные на разные браузеры, или использование Polyfill для имитации любой отсутствующей поддержки с использованием JavaScript или других технологий, или использование библиотеки, которая позволяет вам написать один бит кода, а затем выполняет разные вещи в фоновом режиме в зависимости от того, что поддерживает браузер.
    • Примите тот факт, что некоторые вещи не будут работать одинаково во всех браузерах, и предоставьте разные (приемлемые) решения в браузерах, которые не поддерживают полную функциональность. Иногда это неизбежно из-за ограничений устройства — широкоформатный кинотеатр не даст такого же визуального восприятия, как 4-дюймовый мобильный экран, независимо от того, как вы программируете свой сайт.
    • Примите тот факт, что ваш сайт просто не будет работать в некоторых старых браузерах, и двигайтесь дальше. Это нормально, если ваш клиент / пользовательская база согласны с этим.

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

    Тестирование / обнаружение

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

    1. Протестируйте его в паре стабильных браузеров в вашей системе, таких как Firefox, Safari, Chrome или IE / Edge.
    2. Проведите небольшое тестирование доступности, например, попробуйте использовать свой сайт только с клавиатурой или используйте свой сайт с помощью программы чтения с экрана, чтобы проверить, доступен ли он для навигации.
    3. Протестируйте на мобильной платформе, например Android или iOS.

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

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

    • Попробуйте протестировать последнее изменение во всех современных браузерах для настольных ПК, в том числе в Firefox, Chrome, Opera, IE, Edge и Safari для ПК (в идеале — Mac, Windows и Linux).
    • Протестируйте его в обычных браузерах телефонов и планшетов (например, iOS Safari на iPhone / iPad, Chrome и Firefox на iPhone / iPad / Android),
    • Также проведите тесты в любых других браузерах, которые вы включили в свой целевой список.

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

    Если у вас нет средств для тестирования всех этих различных комбинаций браузера, операционной системы и устройств на физическом оборудовании, вы также можете использовать эмуляторы (эмулировать устройство с помощью программного обеспечения на вашем настольном компьютере) и виртуальные машины (программное обеспечение, которое позволяет имитировать несколько комбинаций операционной системы / программного обеспечения на вашем настольном компьютере). Это очень популярный выбор, особенно в некоторых случаях — например, Windows не позволяет одновременно устанавливать несколько версий Windows на одном компьютере, поэтому использование нескольких виртуальных машин часто является единственным вариантом.

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

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

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

    Если хотите, можете пойти и дальше.Доступны коммерческие инструменты, такие как Browserling, Sauce Labs, Browser Stack, Endtest, LambdaTest, TestingBot и CrossBrowserTesting, которые делают это за вас, не беспокоясь о настройке, если вы хотите вложить немного денег в свою тестирование. Также можно настроить среду, которая автоматически запускает тесты для вас, а затем позволяет вам регистрировать свои изменения в центральном репозитории кода только в том случае, если тесты все еще проходят.

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

    Часто бывает полезно протестировать предварительные версии браузеров; см. следующие ссылки:

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

    Исправления / итерация

    Как только вы обнаружили ошибку, вам нужно попытаться исправить ее.

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

    Возможно, это не ваша вина — если в браузере есть ошибка, мы надеемся, что поставщик быстро ее исправит. Возможно, это уже было исправлено — например, если ошибка присутствует в Firefox версии 49, но ее больше нет в Firefox Nightly (версия 52), значит, они исправили ее. Если это не исправлено, вы можете сообщить об ошибке (см. Сообщение об ошибках ниже).

    Если это ваша вина, то нужно это исправить! Выявление причины ошибки включает ту же стратегию, что и любая ошибка веб-разработки (опять же, см. Разделы «Отладка HTML», «Отладка CSS» и «Что пошло не так? Устранение неполадок JavaScript»).После того, как вы обнаружили причину вашей ошибки, вам необходимо решить, как ее обойти в конкретном браузере, в котором она вызывает проблемы — вы не можете просто сразу изменить код проблемы, так как это может нарушить код в других браузерах. . Общий подход обычно заключается в том, чтобы каким-то образом разветвлять код, например, использовать код обнаружения функций JavaScript для обнаружения ситуаций, в которых проблемная функция не работает, и запускать другой код в тех случаях, которые действительно работают.

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

    Чтобы повторить то, что было сказано выше, если вы обнаружите ошибки в браузерах, вы должны сообщить о них:

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

    17 лучших инструментов кроссбраузерной проверки (для веб-разработчиков)

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

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

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

    10 самых распространенных типов веб-разработчиков
    10 самых распространенных типов веб-разработчиков

    Сколько разработчиков вы знаете в своей жизни? Если вы работаете с группой из них, вы … Читать дальше

    BrowserShots

    Один из первых сайтов для кроссбраузерного тестирования, он позволяет вам тестировать свой сайт в нескольких браузерах, в том числе в некоторых старых, таких как Lynx, Konqueror и Seamonkey.

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

    Песочница браузера

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

    Он предоставляет широкий спектр браузеров, включая некоторые старые версии Internet Explorer, а также версии браузеров Canary или Development.

    MultiBrowser

    Настольное приложение, объединяющее несколько браузеров из IE 7-11, Edge, Firefox, а также версий Chrome.Вы можете использовать его для тестирования своего сайта как для настольных компьютеров, так и для мобильных устройств с помощью эмулятора и с возможностью запуска теста вручную или автоматически.

    LambdaTest

    Онлайн-сервис, позволяющий запускать кросс-браузерные тесты для разных платформ. Вы можете, например, выбрать, тестировать ли ваш сайт в Firefox или Chrome, который работает в Windows, Linux или macOS.

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

    Кроссбраузерное тестирование Experitest

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

    BrowserStack

    Одно из выдающихся имен в кроссбраузерном тестировании и используемое некоторыми крупными проектами с открытым исходным кодом, такими как jQuery и React.js, BrowserStack перечисляет сотни браузеров, мобильных устройств и методов тестирования, чтобы гарантировать, что ваши веб-сайты работают в максимально большом количестве сред. насколько возможно.

    SauceLabs

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

    CrossBrowserTesting

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

    TestingBot

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

    Просмотр

    Если вам нужно быстро и легко протестировать сайт в Internet Explorer, BrowserLing может быть тем инструментом, который вам нужен.

    Легко и интерактивно тестируйте свой веб-сайт в некоторых браузерах, включая старые, такие как Internet Explorer 10 и 11, Safari 4 и 5.

    Сравнение

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

    Кукольник

    Puppeteer — это модуль Node.js, который предоставляет API для взаимодействия с браузерами Chrome и Firefox.

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

    Драматург

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

    Playwright поддерживает браузер на основе Chromium, Firefox и Webkit (например, Safari).

    Nightwatch.js

    NightWatch.js — модуль Node.js для сквозного тестирования. С помощью простого в использовании API вы можете проверить, содержит ли элемент определенный текст, является ли он видимым или скрытым, и даже проверить класс, идентификатор и свойства CSS.

    Кипарисовик

    Cypress — это набор для тестирования, который упрощает и упрощает сквозное тестирование и отладку современных веб-приложений.

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

    WebDriverIO

    Платформа автоматизации тестирования Node.js. Он поддерживает многие библиотеки JavaScript, такие как React.js, Vue и Angular, прямо из коробки.

    Поскольку он основан на W3C WebDriver и Chrome DevTools, стандартном и общепринятом протоколе, тест может выполняться локально или в облачной службе, такой как SauceLab, BrowserStack и TestingBot.

    Селен

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

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

    Онлайн-тестирование браузера | test IO

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

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

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

    При тестовом вводе-выводе наши профессиональные краудтестеры могут:

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

    В test IO работают тысячи краудтестеров по всему миру, которые протестируют ваш сайт в соответствии с вашими потребностями.С помощью тестовой платформы тестирования ввода-вывода вы можете легко настроить параметры тестирования. После этого наши опытные тестировщики будут использовать все доступные устройства для тестирования вашего веб-сайта или веб-приложения. Вы узнаете, как они воспринимали ваш веб-сайт в Chrome, Firefox, Safari, Internet Explorer и т. Д. Они могут протестировать ваш сайт на устройствах iOS, Android, Windows и Mac. Они могут следовать сценарию тестирования или выполнять исследовательское тестирование. Все, что вам нужно для кроссбраузерного тестирования, можно найти на тестовой платформе ввода-вывода.

    В дополнение к кроссбраузерному тестированию, test IO предлагает инструменты облачного тестирования для:

    бета-тестирования
    исследовательского тестирования
    тестирования удобства использования
    регрессионного тестирования
    функционального тестирования

    тестирование вашего веб-сайта или приложения.

    Познакомьтесь со всеми преимуществами и особенностями услуг тестирования Test IO сегодня.

    7 инструментов для кроссбраузерного тестирования, которые вам понадобятся в 2019 году

    Эта статья была создана в сотрудничестве с LambdaTest.Спасибо за поддержку партнеров, которые сделали возможным использование SitePoint.

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

    Во-первых, что такое кроссбраузерное тестирование?

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

    • Проверка кода: сообщают ли некоторые браузеры об ошибках кода?
    • Производительность: сайт работает медленно или даже вызывает сбои?
    • Адаптивный дизайн: постоянно ли адаптируется дизайн?
    • Несоответствия пользовательского интерфейса: есть ли другие недостатки дизайна?
    • Другое странное поведение: что-то еще просто не работает?

    Что произойдет, если я не пройду тест?

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

    Возьмем, к примеру, электронную коммерцию. 69,89% проверок прекращаются, и 17% из них связаны с ошибками и сбоями веб-сайта. Если предположить, что бизнес будет накапливать полмиллиона продаж в год, это 59 407 продаж, потерянных из-за ошибок и сбоев, которые можно было предотвратить с помощью кросс-браузерного тестирования.

    Поскольку Microsoft объявила, что откажется от собственных движков EdgeHTML и Chakra в пользу широко распространенных движков Blink и V8, это означает, что многие из основных браузеров сегодня предлагают аналогичные уровни совместимости кода. Хотя это шаг назад с точки зрения здоровой конкуренции, это означает, что если веб-сайт работает в Google Chrome, он, скорее всего, будет работать в Brave, Opera и Microsoft Edge. В сочетании с тем фактом, что даже Microsoft проинструктировала нас прекратить использование Internet Explorer, кроссбраузерное тестирование стало проще, чем когда-либо прежде: только Safari и Firefox используют свои собственные движки.

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

    • Хром: 61,75%
    • Safari: 15.12%
    • Firefox: 4,92%
    • UC: 4,22%
    • Opera: 3,15%
    • Internet Explorer: 2.8%
    • Samsung Интернет: 2,74%
    • Microsoft Edge: 2,15%

    * По состоянию на ноябрь 2018 г.

    Также имейте в виду, что существует несколько выпусков каждого веб-браузера для нескольких ОС. Звучит страшно? Не совсем, но — это чертовски скучно тестировать сайты на всех из них!

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

    Имея немедленный доступ к более чем 2000 веб-браузеров, работающих на реальных устройствах Android и iOS, хорошо известный BrowserStack позволяет разработчикам и другим заинтересованным сторонам участвовать в кроссбраузерном тестировании, будь то создание нескольких снимков экрана, отладка ошибок в реальном времени или собственно взаимодействуйте с браузером изначально и посмотрите, как выглядит макет при изменении размера окна.Нет необходимости идти на компромисс с симуляторами и эмуляторами, BrowserStack предлагает вам полный контроль, поскольку вы будете взаимодействовать с настоящими браузерами на удаленных машинах.

    Это не , как настоящая вещь, это — это настоящая вещь.

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

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

    CrossBrowserTesting от SmartBear предлагает как ручное, так и автоматическое тестирование с помощью Selenium, более 1500 удаленных браузеров на мобильных и настольных компьютерах и имеет такую ​​же настройку подписки, что и BrowserStack (за исключением их «плана для фрилансеров»). Благодаря полному доступу к расширениям браузера и инструментам разработчика, таким как Chrome Dev Tools и FireBug, возможности взаимодействовать с помощью движений пальцем и многому другому, и, наконец, средствам для отладки внешних ошибок, CrossBrowserTesting не сильно отличается от BrowserStack.

    CrossBrowserTesting и BrowserStack также позволяют пользователям сравнивать версии (в реальном времени или снимки экрана), запускать несколько тестов (или делать несколько снимков экрана) одновременно и даже делиться результатами.

    All-in-all, подходящая альтернатива BrowserStack, однако я бы выбрал BrowserStack, если для вас важно количество поддерживаемых браузеров (BrowserStack поддерживает еще 500).

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

    В качестве дополнительного бонуса все опции включают бесплатные минуты автоматизации; это если вы не выберете их мощную опцию автоматизации!

    Все опции также включают:

    • 2000+ собственных тестовых браузеров
    • Отслеживание проблем с помощью журналов тестирования
    • Функциональность локального тестирования
    • Автоматическое тестирование скриншотов
    • Адаптивное и визуальное сравнительное тестирование
    • Доступ к расширению WordPress и Chrome
    • Интеграция с Trello, Asana, Jira и Slack

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

    Несмотря на то, что это один из самых дешевых инструментов кроссбраузерного тестирования по цене 19 долларов в месяц (по стоимости уступает только Lambdatest), не позволяйте простому веб-сайту Browserling вводить вас в заблуждение. Если вашу команду не беспокоит автоматическое тестирование, то использование браузера является довольно экономичным вариантом.

    Кроме того, у них есть расширения для Chrome, Firefox, Opera и Safari!

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

    Что отличает инструменты кроссбраузерного тестирования Functionize от конкурентов, так это широкое использование искусственного интеллекта и тот факт, что если вы настроите тесты для одного браузера , нет необходимости перекодировать тесты для других, что может сэкономить немало денег. время. Все они посвящены автономному тестированию (с использованием технологии Adaptive Event Analytics ™), чтобы вы могли уделять больше времени анализу результатов.

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

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

    Несмотря на то, что Sauce Labs предлагает функциональность, аналогичную другим инструментам кроссбраузерного тестирования, начинается от 89 долларов в месяц (для тестирования на реальных устройствах).Однако они существуют довольно давно и заявляют, что имеют «самое большое в мире облако для непрерывного тестирования», поэтому, если у вас есть бюджет, стоит попробовать.

    Заключение

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

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

    Тестирование кроссбраузерной совместимости помимо Chrome

    Тестирование кроссбраузерной совместимости в последние годы набирает обороты, и для этого есть причина.В то время как технологии стремительно развиваются, люди — нет. Значительное количество людей сопротивляются изменениям, или, точнее говоря, «не хотят обновлять свои технологии». В этом сценарии тестирование совместимости браузера позволяет компаниям убедиться, что ни один клиент не останется без внимания и не получит нежелательный опыт. Таким образом, хотя браузеры, такие как Google Chrome и Firefox, доминируют на рынке, есть люди, использующие их более старые версии или другие браузеры. И их количество слишком велико, чтобы игнорировать его.

    Что такое тестирование кроссбраузерности?

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

    Как это повлияет на ваше приложение?

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

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

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

    Поскольку невозможно протестировать все возможные комбинации браузера и устройства, вам необходимо составить короткий список наиболее важных из них, на которых нужно протестировать свое веб-приложение.По состоянию на декабрь 2020 года у Google Chrome больше всего пользователей. На его долю приходится около 65,96% рынка. На втором месте Safari с долей рынка 10,43%, за ним следуют Firefox (8,39%) и Edge (7,43%). В то время как другие, такие как IE, Opera имеют долю рынка примерно по 2-3% каждая.

    Начать тестирование бесплатно

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

    Источник: Statista

    Необходимо проверить: Как тестировать веб-сайты в старых версиях браузера

    Достаточны ли объем и рыночная доля, чтобы выбрать браузеры для тестирования?

    Ответ — нет. Во-первых, принятие решения исключительно на основе объема приведет к тому, что ряд браузеров не будет присутствовать на рынке. Также следует учитывать ваш целевой рынок. Например, Windows XP все еще используется миллионами людей, и эти пользователи, скорее всего, будут использовать Internet Explorer.Если ваш целевой рынок использует IE, ваш веб-сайт должен быть совместим с IE.

    Другими решающими факторами, повлиявшими на это решение, могут быть бизнес-показатели и добавленная стоимость. Большинство пользователей Safari запускают его на устройствах Apple, что является разумным показателем высокой покупательной способности. Это делает Safari важным браузером для тестирования, несмотря на относительно небольшой объем пользователей (по сравнению с Chrome).

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

    Уместны ли браузеры Edge, Safari и IE для кросс-браузерной совместимости?

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

    Safari в основном используется пользователями Apple iPhone, Mac и iPad, которые могут тратить значительно больше, чем пользователи других устройств. Это может иметь отношение, например, к люксовым брендам.

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

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

    Рекомендуемое чтение: 3 простых способа сделать веб-сайты, совместимые с кроссбраузерностью

    Давайте поищем конкретные рынки, такие как Германия, Великобритания и США, чтобы определить, имеют ли такие браузеры, как Safari, IE и Edge, большее значение в других аспектах. чем мы думаем.

    Схема использования браузера в Германии

    Доля рынка веб-браузеров в Германии в 2018 году показывает, что Google Chrome является наиболее часто используемым веб-браузером, за ним следуют Safari и Firefox. IE также составляет значительную долю рынка в 5,7%. Однако Edge по-прежнему отстает с 4,04% и, как ожидается, со временем будет расти, поскольку IE устареет с более новыми версиями Windows.

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


    Источник: Statista
    Схема использования браузера в Великобритании

    В Великобритании Chrome остается на первом месте. Но Safari и IE превосходят Firefox, а Edge занимает пятое место по доле рынка. Далее показано, как игнорирование определенных браузеров, основанное на доле на мировом рынке, может повлиять на прибыль компаний, работающих в разных регионах.


    Источник: Statista
    Схема использования браузера в США

    В США заметны Chrome, Safari, Edge и Firefox.


    Источник: Statcounter

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

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

    Как найти правильный баланс

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

    Как проводить тестирование кроссбраузерной совместимости с учетом осуществимости?

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

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

    Несколько рекомендаций, которые следует учитывать при тестировании кроссбраузерной совместимости
    1. Изучите свою аудиторию:
      Очень важно провести исследование рынка для целевой аудитории, прежде чем напрямую запускать кроссбраузерное тестирование в случайном порядке.Это помогает проанализировать правильный набор браузеров, используемых аудиторией в определенных регионах.
    2. Подготовка матрицы браузера:
      Этот шаг включает подготовку списка браузеров, для которых необходимо протестировать приложение. Это помогает ограничить усилия по разработке и тестированию для определенного набора браузеров и устройств.
      Ограничение количества поддерживаемых браузеров помогает командам сосредоточиться на самых популярных из них, соответствующих их целевой аудитории. Это также помогает снизить подверженность веб-сайта кроссбраузерным ошибкам.Узнайте больше о матрице совместимости браузеров.
    3. Выберите правильный инструмент автоматизации:
      Тестирование кроссбраузерной совместимости — обширная задача, и для ее достижения автоматизация является обязательной. Следовательно, командам также важно выбрать правильный набор инструментов и фреймворков, которые помогут им быстрее достичь всестороннего тестирования.

      No related posts.