Одно из стандартных требований заказчика к разработке качественного веб-сайта — это кроссбраузерность и корректное отображение на многочисленных современных устройствах. Поэтому каждый веб-разработчик рано или поздно сталкивается с вопросом тестирования сделанного веб-сайта в разных браузерах.
» Кроссбраузерность - свойство сайта отображаться и работать во всех популярных браузерах идентично. Под идентичностью понимается отсутствие развалов верстки и способность отображать материал с одинаковой степенью читабельности. Понятие «кроссбраузерность» очень часто путают с попиксельным соответствием, что на самом деле является разными понятиями «. (Википедия)
Есть множество разных способов проверить ваш сайт в разных браузерах и в разных операционных системах. Например, онлайн-сервисы, локальные приложения, установка нескольких браузеров на свой компьютер и т.д. Есть платные и бесплатные сервисы. В данном обзоре мы обратим ваше внимание на наиболее оптимальные бесплатные и платные сервисы проверки вашего сайта в разных браузерах и на разных устройствах.
1. Browsershots (бесплатно/платно)
4. IE Tester (бесплатно)
5. BrowserСam (платно)
BrowserСam — очень мощный платный онлайн-сервис для тестирования сайтов под любым браузером и любой платформой . Одна из главных «фишек» данного сервиса в том, что на нем предоставляется удаленный доступ (через VNC) к компьютерам с уже установленными ОС и браузерами, в которых вы можете тестировать свой сайт. Кроме того есть такая важная опция как тестирование под iPhone OS, Android, Blackberry, Windows Mobile . Можно также тестировать е-мейлы на разных устройствах, что очень важно для рассылочных компаний.
Цены стартуют от 19,95 у.е . в день в зависимости от функционала.
6. CrossBrowserTesting (платно)
7. Litmus (платно/бесплатно)
8. СloudTesting (платно)
— платный онлайн-сервис, который предоставляет возможность функционального тестирования кроссбраузерности сайта. Вы записываете сценарий поведения пользователя с вашим браузером и Selenium IDE, загружаете его, после чего Cloud Testing будет выполнять этот сценарий в нескольких браузерах и операционных системах. Затем он предоставляет скриншоты.
Ценовая политика стартует от 99 у.е. в месяц .
9. 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 (бесплатно/платно)
12. Spoon (бесплатно)
13. Browsera (бесплатно/платно)
— это онлайн-сервис, который обеспечивает автоматизацию тестирования кроссбраузерности. Он автоматически определяет различия в отображении страниц браузерами, тем самым упрощая процесс тестирования.
Бесплатная версия включает в себя довольно ограниченное число браузеров и низкое разрешение. Платные пакеты стартуют начиная от 39 у.е. за 14 дней и от 49 у.е. до 99 у.е. за месячную подписку.
—
При использовании этого материала активная ссылка на обязательна.
Когда дело доходит до изучения просторов глобальной сети, у пользователей интернета есть весьма широкий выбор браузеров («просмотровщиков»). Наша обязанность, как дизайнеров и разработчиков веб-сайтов - обеспечить совместимость сайта со всеми видами браузеров, иными словами обеспечить кроссбраузерность сайта .
Но сразу возникает вопрос - какие браузеры используют пользователи? Сейчас самыми популярными «просмотровщиками» веб-страниц являются Internet Explorer 7 и 8, Mozilla Firefox, Google Chrome и Opera. Однако для каждого вида сайта, в зависимости от того к какой тематике он относится, процент посетителей с разными браузерами может сильно варьироваться. Поэтому, довольно часто, разработчики определяются, с какой аудиторией им предстоит работать и в зависимость от результатов «подготавливают» сайт только под определенные виды браузеров.
Конечно же, протестировать сайт на одной машине, даже установив несколько видов «просмотровщиков», практически невозможно. Но благодаря специальным инструментам и веб-сервисам можно легко определить, как выглядит сайт в том, или ином браузере на разных операционных системах.
В этой статье мы подготовили для вас ряд онлайн инструментов и сервисов, которые можно смело использовать при тестировании кроссбраузерности сайта.
- это самый популярный сервис для тестирования кроссбраузерности. Он делает скриншоты вашего сайта практически во всех видах браузеров. Благодаря тонкой настройке можно выбрать как виды движков (WebKit или Gecko), так и виды операционных систем (Linux, Windows, Mac OS X или BSD). Так же в настройках есть выбор разрешения экрана, присутствие установленного javascript, flash, java и другие виды параметров.
Благодаря этому онлайн инструменту можно бесплатно проверить кроссбраузерность сайта во всех версиях Internet Explorer (версии 5.5, 6, 7, 8, а так же 7-6 Mixed и 7-6 Difference). Из функционала стоит выделить отображение времени обработки и ограничение размера экрана в 1024px.
С помощью этого сервиса вы можете запускать страницы в разных браузерах, таких как IE, Firefox, Safari, Chrome и Opera непосредственно из своего браузера. Единственное отличие от других сервисов в обзоре - необходимость установки небольшого дополнения, которое обеспечивает дальнейшее тестирование.
Еще один популярный веб-сервис, который позволяет проверять отображение сайтов в разных браузерах и на разных ОС. Среди функционала есть такие полезные возможности как проверка сайта в разных разрешениях, настройка, редактирование и сохранение различных сочетаний браузеров для тестирования.
Платный онлайн сервис предназначенный для тестирования сайта в целом, а не только для проверки кроссбраузерности сайта. Большой набор всевозможных функций и настроек делает Browsera
мощным средством для отладки веб-сайта. Из возможностей отметим: анализатор ошибок сценариев на javascript; возможность тестирования всего сайта, а не только отдельных страниц; тестирование страниц с динамическим содержанием. У сервиса есть бесплатно-тестовая версия, которая позволяет отлаживать не более 25 страниц в месяц, а так же бесплатный 30-дневный пробный период.
Еще один платный сервис с большим количеством разнообразных функций, как мелких и довольно специфичных, так и крупных и очень полезных (чего стоит только возможность тестирования сайта на мобильных устройствах с Windows Mobile, Symbian или iPhone). О полном списке возможностей и разнообразных «плюсов» можно прочитать на страницах сервиса.
А какими сервисами и инструментами пользуетесь вы когда тестируете кроссбраузерность сайта?
Всё больше достойных поводов находится у веб-разработчиков для того, чтобы отказаться от полнокровной поддержки 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 персон, но отмечу, что многие впереди «стоящие» - очередь бросали либо мучали сервис меньше доступных пяти минут). Справедливости ради надо сказать, что есть и платный вариант без очередей.
Ваша версия
Очень жду в комментариях ссылок на аналогичные сервисы, но, предлагаю, придерживаться описанных выше критериев: сервис должен быть общедоступным без регистрации и бесплатным.Всем привет!
Сегодня мы поговорим о важнейшей теме, напрямую влияющей на поведенческие факторы (а значит, на посещаемость сайта и количество трафика с поисковых систем) – о том, как посмотреть отображение сайта в разных браузерах.
Все вы, наверное, знаете, что существует несколько популярнейших браузеров (Safari, Chrome, Opera, Mozilla и т.д.) различных версий. Версий браузеров очень много, потому что они постоянно обновляются, корректируются, улучшаются, и происходит это действительно часто. В итоге все приводит к тому, что существует более сотни программ для выхода в интернет. И плохо это тем, что они не согласованы между собой: каждый браузер воспринимает html-код (тот, на котором написаны сайты в интернете) по-своему.
Поэтому отображение сайта в различных браузерах получается разным . Из-за этого возникают различные неприятности: в каком-то браузере некрасиво отображаются таблицы, где-то съезжают сайдбары, где-то сайт не помещается в ширину (и появляется горизонтальный скроллинг).
Наверное, вы понимаете, что все это приведет к одному: посетитель закроет страницу браузера с таким сайтом и наверняка сюда больше не вернется. Поисковики будут трактовать это по-своему: «сайт неинтересен пользователям, зачем тогда на него отправлять посетителей?». В общем, это приведет к тому, что трафик с поисковых систем понизится, позиции сайта упадут. Проблема актуальная, и с ней надо бороться.
Проверка отображения сайта в разных браузерах
Существуют специальные сервисы, которые позволяют проверить отображение сайта в нескольких различных браузерах. Их пока немного, поэтому приходится довольствоваться тем, что есть.
Как избежать проблем с браузерами
Единственный способ избежать проблем с браузерами – использовать кроссбраузерную верстку. В этом случае исходный код сайта обрабатывается таким образом, чтобы он примерно одинаково выглядел во всех программах всех версий.
Самое главное правило в кроссбраузерной верстке – указывать вместо пикселей проценты везде, где требуется указать размеры блоков или частей сайта. Дело в том, что проценты – это относительная (динамическая) величина, которая не зависит от ширины экрана, его разрешения, типа браузера и т.д. А пиксели – статическая величина, которая может отображаться по-разному.
Проще всего не самому проводить кроссбраузерную верстку, а поручить это верстальщику, т.к. у него больше опыта, он сделает это быстрее, а вы во многом можете ошибиться. Я надеюсь, эта статья открыла вам глаза на эту важную тему.
Здравствуйте друзья! Тестирование открытия сайта в разных браузерах является важным мероприятием, это влияет на посещаемость сайта. В статье рассмотрена проверка сайта в браузерах.
Простая и бесплатная проверка сайта в браузерах
Что такое кроссбраузерность, узнал несколько дней назад, ранее сталкиваться с таким трудным словом не приходилось. Как Вы успели заметить, уважаемые читатели, на блоге сменилась тема и дизайн, и возник вопрос, а правильно ли открывается мой блог в различных браузерах? Естественно, потребовалась проверка сайта в браузерах, что я и сделал. Кстати, согласно Википедии, слово кроссбраузерность означает способность сайта одинаково отражаться во всех браузерах.
Способность сайта открываться во всех браузерах является очень важным моментом. Представьте себе, что Ваш сайт не открывается, например, в браузере Opera или любом другом браузере. Посетители с этих браузеров не смогут у себя просматривать Ваш сайт (блог), а значит никогда больше к Вам не придут, это снизит посещаемость сайта, снизит и количество подписчиков. Поэтому на кроссбраузерность надо обращать внимание.
В каком случае нужно проверять открываемость Вашего сайта в различных браузерах:
- если Вы только создали сайт;
- если Вы поменяли тему, шаблон сайта (взяли из Интернета);
- если Вы проводили реконструкцию сайта с помощью фрилансеров;
- периодически, скажем один раз в полгода, год.
Если после замены темы, дизайна, реконструкции сайта все понятно – проверка сайта в браузерах обязательна, то периодическую проверку нужно проводить в профилактических целях. Дело в том, что браузеры обновляются и после очередного обновления, Ваш сайт может отображаться некорректно в обновленном браузере. Бывает так, что после обновления браузер не открывает некоторые сайты.
Тестирование сайта в разных браузерах
Для тестирования сайта в разных браузерах имеется достаточно много различных сервисов:
- бесплатные;
- частично бесплатные, частично платные;
- платные.
Существуют следующие сервисы для тестирования сайта в разных браузерах:
- Browsershots (платно и бесплатно) – этим сервисом мы и будем пользоваться в этой статье, проведем бесплатное тестирование сайта в разных браузерах.
- IE NetRenderer — бесплатный сервис, выполняет тестирование сайта в браузере Internet Explorer в разных версиях. Сервис проверял, он рабочий и даёт хорошие результаты.
- IE Tester – бесплатно. Это не совсем сервис, это программа, которая выполняет тестирование сайта в браузере Internet Explorer. Вы скачиваете эту программу с этого сайта, устанавливаете и тестируете. Сам я эту программу не проверял, но на сайте был, там всё живое и рабочее.
- BrowserСam очень мощный платный сервис для тестирования сайта в разных браузерах, и любой платформой. Кроме того Вы можете тестировать открытие сайтов в любых мобильных устройствах, во многих операционных системах. Смотрел страницу данного сервиса, там все живое и рабочее, при желании, Вы можете зайти на сервис и посмотреть.
- CrossBrowserTesting платный сервис. Проверка сайта в браузерах делается достаточно быстро, поддерживается около 100 различных проверок, проверяется сайт практически во всех известных браузерах и мобильных устройствах. Оплата сервиса около 30$ в неделю, есть возможность бесплатной работы в сервисе 7 дней. Есть еще с десяток платных сервисов, перечислять их не буду, Вы можете самостоятельно их найти в Интернете.
Кроссбраузерность сайта онлайн
Итак, перейдем к практике, выполним тестирование сайта в разных браузерах с помощью бесплатного сервиса Browsershots, проведем, так сказать, кроссбраузерность сайта онлайн. Для начала заходим по этой ссылке http://browsershots.org/ на сервис.
Отмечаем те браузеры, в которых хотим проверить открываемость нашего сайта. В нижней части страницы выбираем размер экрана «Screen size», глубину цвета «Color depth»,
остальные настройки показаны в прилагаемом видео. После установки настроек, в верхнем поле «Enter URL Here» вводим домен проверяемого сайта и нажимаем кнопку «Submit».
В бесплатном режиме процесс проверки идет достаточно долго, от 20 минут до часа. В процессе проверки моего сайта я получил 133 скрина отображения моего сайта в различных браузерах, были отмечены галочками все браузеры. Теперь можно анализировать каждый скрин, на нем видно, как открывается Ваш сайт в том, или ином браузере. А далее делаете выводы, нужно дорабатывать блог или нет. Данный сервис проверяет основные браузеры, кроме Internet Explorer. Проверка сайта в браузере Internet Explorer делается с помощью другого сервиса, об этом говорилось выше.
Обратите внимание, что после таких проверок резко растет посещаемость на сайте, ведь роботы заходят на сайт от имени каждого браузера. Так что высокой посещаемости радоваться не надо.
Кстати, если Ваш блог нормально работает, Вы можете узнать, из каких браузеров к Вам заходят посетители. Для этого надо зайти в статистику счетчика от LiveInternet и в левой колонке выбрать «Браузеры». Будет показана таблица с отображением браузеров, с помощью которых заходят на Ваш сайт (смотрите скрин).
