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

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

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

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 у.е. за месячную подписку.

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

Но сразу возникает вопрос - какие браузеры используют пользователи? Сейчас самыми популярными «просмотровщиками» веб-страниц являются 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

Оптимальный ipinfo.info/netrenderer

Удобный browserling.com с возможностью поскроллить и покликать

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

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

Ваша версия

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

Важность кроссбраузерности

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

1. Никто не останется на сайте, у которого блоки (div-ы) сбиты или наезжают друг на друга. Таким образом Вы теряете посетителей
2. Раз Вы теряете посетителей, Вы соответственно теряете прибыль с сайта, то особенно актуально для .
3. Правильное отображение сайта («пиксель в пиксель» как говорят веб-мастера) – это имидж Вашего ресурса и Вас лично как его владельца и разработчика.

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

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

Осуществить проверку кроссбраузерности можно:

• в различных системах (доступно Windows, Linux, Mac);
• в различных браузерах, начиная от таких экзотичных как SeaMonkey или Flock и заканчивая наиболее популярными (IE, Firefox, Opera);
• в различных версиях одного и того же браузера (от самых ранних до самых свежих);
• при различных разрешениях экрана;
• при различной глубине цвета экрана;
• и пр.

Как пользоваться Browsershots?

Всё что Вам необходимо для проверки кроссбраузерности – это ввести адрес Вашего сайта и отметить необходимые Вам опции для проверки:

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

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

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

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

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

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 у.е. за месячную подписку.

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