Смотрим на ваш сайт с разных браузеров

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

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

Browsershots — бесплатный сервис, существующий с далекого 2005 года. К сожалению, порой очень загружен из-за своей популярности. Будьте готовы подождать немного результатов тестирования вашего сайта. Большая поддержка разных браузеров для операционных систем Linux, Windows, Mac и BSD.

Для проверки просто вводите адрес сайта и нажимаете «Submit». Здесь же на сайте есть настройки: размер скриншотов, цвет скриншотов, поддержка JavaScript, Java или Flash.

Вывод: хороший сервис для тех, кто не хочет платить и не слишком торопиться при проверке сайтов.

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

Пользоваться сервисами или нет — решать только вам. Если вы занимаетесь профессиональной разработкой и тестированием сайтов, то существует также волшебный сервис Cross Browser Testing Tool, но он платный. Из преимуществ данного сервиса можно отметить его скорость работы, поддержку множества браузеров (свыше 1500+), различные тесты и дополнительный настройки. Увы, является довольно дорогим сервисом (от 29$ до 199$ в месяц).

Существует еще один бесплатный сервис IE NetRenderer, но он проверяет только Internet Explorer от 5.5 до 9 версий.

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

Спасибо за внимание, жду ваших комментариев.

Как проверить сайт в разных браузерах: несколько методов – 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! Ведь у нас абсолютно всем шаблонам присуща кроссбраузерность. Таким образом, вы будете спокойны за свой сайт и его отображение в разных браузерах.

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

Одна из самых больших проблем, с которой сталкиваются разработчики веб-сайтов – это отсутствие кроссбраузерности. Под кроссбраузерностью обычно понимают способность сайта отображаться одинаково хорошо, независимо от браузера, с которого посетитель просматривает его страницы. К примеру, при просмотре страниц интернет-ресурса с браузера Firefox последней версии все страницы могут отображаться без особых проблем. А при просмотре этого же сайта со старых версий InternetExplorer некоторые блоки начнут съезжать, криво отображаться.

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

1. Browsershots

При помощи данного сервиса можно сделать скриншоты страницы нужного сайта при его отображении в разных браузерах и в разных операционных системах. Доступны три основных ОС – Mac, Windows, а также Linux. Что касается браузеров, то их здесь целых 65 штук (разные версии IE, Opera, Chrome, Firefox и т.д.). Чтобы выбрать браузеры, в которых будет проводиться тест, нужно поставить галочку напротив них.

Кроме того, можно выбрать размер скриншота, глубину его цвета, можно включить или отключить JavaScript, Flash. При бесплатном использовании сервиса длительность проверки может достигать 2 часов. В платной версии (30 долларов в месяц) скорость проверки существенно возрастает (5-10 минут). Также при бесплатной проверке скриншоты вашего сайта будут доступны всем пользователям в разделе «WebDesignGallery».

2. IENetRenderer

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

3. CrossBrowserTesting

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

Данный сервис является платным. Стоимость базового пакета услуг составляет 30 долларов в неделю. Однако есть триальный период, длительность которого — 7 дней. При использовании триальной версии сервиса некоторые возможности будут недоступны.

4. Litmus

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

Кстати, рассылка может тестироваться сразу в 30 разных почтовых клиентах. Кроме того, при помощи данного сервиса можно проверить валидность CSS и HTML-кода сайта. Есть триальный период, длительность которого составляет 7 дней. Базовый платный пакет обойдется в 49 долларов за месяц.

5. CloudTesting

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

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

Проверяем качество сайта / Habr

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

Что мы будем тестить?

Тестить мы будем следующие моменты:

• Верстку
• Программировине
• Безопастность

Верстка

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

Ну и еще можно проверить в:

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

• http://browsershots.org/ — бесплатный сервис, куча браузеров. Вводите адрес сайта, и его ставят в очередь на проверку, ваша очередь придет примерно через час, но проверяется только одна страницы, и одно разрешение экрана, так что если хотите проверить все страницы при разных разрешениях – запаситесь терпением… нечеловеческим терпением… После проверки получите ссылки на ваши скриншоты.
• http://ipinfo.info/netrenderer/ — Проверяются только разные версии Internet explorer’a. Никакого ожидания, скрин выдается сразу. Сервис бесплатный.
• http://www.browsercam.com/ — Сервис довольно крутой. Можно проверять сразу 10 url’ов, можно указать до какого уровня вложенности страниц проверять, а можно проверить сайт целиком. Можно даже переход на поддомены указать. В общем у этого сервиса есть все, наверное потому он и не бесплатный (около 100 баксов в месяц).

Вообще, таких сервисов в сети куча, стоит только спросить у гугла…
2. Валидность верстки.
Сейчас много говорят, о том, нужна ли валидность верстки. В основном приводят в пример google, типа «Если уж гугл свой сайт сверстали забив на валидность, то что нам простым смертным остается…». Если присмотреться к коду google.com, то… знаете, я бы такого верстальщика на работу не взял… оформление и разметка – вперемешку, тип документа неуказан, таблица стилей не вынесена в отдельный файл…. На FrontPage’е они верстают что ли… В общем, это все со знаком минус, а на минусы ровняться не стоит. Про важность валидации можно говорить много, и можно привести кучу доводов показывающих важность валидации, и все эти доводы можно оспорить, кроме одного:
Профессиональный верстальщик никогда не позволит себе не валидный код, а хорошая студия не возьмет верстальшика, верстающего «как попало».
Проверить валидность верстки сайта можно тут:
http://validator.w3.org/

Программирование

Оценить работу программиста, программистом не являясь, мягко говоря, сложно, и все же я дам несколько советов, что бы вы могли иметь некое представление об уровне программера, работающего с вашим проектом.
1. ЧПУ
Или Человеку Понятный УРЛ. Посмотрите внимательно в адресную строку браузера, там не должно быть никаких «?», «=», “&” и прочей фигни, только буквы! То есть, например если у вас на сайте есть новости, то адрес на страничке новости должен быть не таким
ваш_сайт.ru/news.php?cat=last&id=451,
а что то вроде:
ваш_сайт.ru/news/last/451
Согласитесь, второй вариант, как минимум, приятнее для глаз, и я думаю любой хороший программист, если ему будет не лень (а раз мы ему платим, значит лень ему быть не должно), может и должен реализовать в вашем проекте ЧПУ. Кроме того, что это все приятно для наших с вами глаз, это приятно и для глаз поисковиков.
2. AJAX
Аякс, это красиво, удобно, популярно и современно. Но помните, перебарщивать AJAX’ом нельзя, его нужно использовать только там, где он действительно полезен. Впрочем, где использовать AJAX, а где нет, к программированию не относиться, зато к программированию относиться сама реализация… Я, как программист, скажу, что самый большой наш порок – это лень вкупе с пренебрежением к пользователям. Если в вашем проекте используется AJAX, убедитесь что при динамической подгрузке данных, пользователь информируется о том, что на сайте что то происходит. Может быть у вас в офисе и стоит десятимегабитная выделенка, но у многих пользователей интернет горзадо медленней, и при щелчке на ссылку, пользователь может и не понять, что что-то грузиться, надо бы ему об этом рассказать.
3. CMS
Если на сайте используеться система управления контентом, а так чаще всего и бывает, и если эту систему писал ваш программист, убедитесь, что вы понимаете, как работает система, и при необходимости, сможете работать с ней сами. Видел я одну cms, где странички создавались путем вбивания нужных значений в таблицу mysql через phpmyadmin. Управление вашими сайтами, должно быть для вас совершенно понятным, ибо программисты приходят и уходят, а сайт остнется.

Безопасность

Говорят, что только самые лучшие программисты, могут стать хакерами (ну или как принято говорить «Консультантами по IT безопасности»), так что не рассчитывайте, что сможете сами проверить сайт на уязвимости, прочитав эту статью, однако пару рекомендаций я вам дам.
1. SQL уязвимости
Пожалуй, самая распространенная ошибка программистов. Вечно мы забываем проверить переменную, перед тем, как использовать ее в sql запросе. Суть уязвимости в том, что бы изменить передаваемую скрипту переменную так, что бы sql запрос выдал не то что должен, а то что нужно хакеру. Проверить переменную на на безопасность довольно просто, достаточно вставить в нее символ «’».Допустим у вас url
ваш_сайт.ru/news/last/451
Попробуйте изменить его на:
ваш_сайт.ru/news/last/4’51/
И если вылетит ошибка типа
Warning: Supplied argument is not a valid MySQL result resource…
Или что нить в этом роде – урежте зарплату программисту, если вместо новости с идентификатором 451 вылезет новость с идентификатором 4, тоже ничего хорошего. Апострофы стоит повставлять не только в url’ы но так же и во все input и textarea поля на сайте, короче говоря, везде, куда пользователю разрешено вводить текст.
2. Загрузка файлов
Если пользователь может загружать на сайт файлы (фотографии, документы), нужно проверить, какие именно файлы разрешены к загрузки, и если тип загружаемого файла не проверяется, считайте что ваш сайт взломан.
3. Остальные
Хотел сейчас написать про xss уязвимости, и понял, что не могу выразить свои мысли словами, доступными людям, не разбирающимся в IT безопасности. Поэтому все же посоветую использовать для проверки сайта на уязвимости специального человека, или специальный софт. Я бы посоветовал XSpider (http://www.ptsecurity.ru), правда это обойдется вам от 9000р в год. Есть и бесплатные утилиты, менее надежные, но все-таки бесплатные.

Еще

Ну и так в бонус, есть неплохой сервис
http://webo.in/
Который скажет вам насколько ваш сайт быстро грузиться, и что можно предпринять для ускорения его загрузки… это так, если захочется наказать программиста…

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

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

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

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

Как посмотреть отображение сайта в разных браузерах!

Всем привет!

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

Все вы, наверное, знаете, что существует несколько популярнейших браузеров (Safari, Chrome, Opera, Mozilla и т.д.) различных версий. Версий браузеров очень много, потому что они постоянно обновляются, корректируются, улучшаются, и происходит это действительно часто. В итоге все приводит к тому, что существует более сотни программ для выхода в интернет. И плохо это тем, что они не согласованы между собой: каждый браузер воспринимает html-код (тот, на котором написаны сайты в интернете) по-своему.

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

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

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

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

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

Netrenderer.com — еще один бесплатный ресурс, позволяющий проверить отображение сайта в браузере Internet Exprorer различных версий. Скрины делаются мгновенно, сразу после того, как вы укажете проверяемую страницу и версию браузера. Вот, что у меня получилось:

Browsera.com – условно бесплатный сервис. Фри-аккаунт позволяет увидеть отображение сайта только в браузерах Firefox (3.6 и 7 версии) и Exprorer (7 и 8 версии). Однако платный аккаунт позволит проверить отображение сайта в значительно большем количестве разных браузеров. На скрине ниже указаны тарифы и их возможности:

Как избежать проблем с браузерами

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

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

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

Кросс-браузерное тестирование / Sandbox / Habr

Для кросс-браузерного тестирования можно использовать три подхода.
1) Если у вас есть все устройства, на которых вы хотите проверить свой сайт, то достаточно просто взять эти устройства и проверить. Возможно, воспользовавшись ПО для оптимизации этого процесса.
2) Если устройств нету, но необходимо проверить на достаточно ограниченном количестве браузеров и устройств, то можно поднять эмуляторы и просто последовательно пройтись по сайту на всех доступных браузерах.
3) Если нет устройств и хочется хорошего качества, то стоит поискать в интернете сервисы, которые могут предоставить реальные устройства с требуемыми браузерами в рездельное пользование.

Обо всех этих трех способах я и хотел сегодня вам поведать.
Итак:

1) ПО для управления тестами на реальных устройствах.
Если желаемые мобильные устройства у вас имеются в наличии, то существует пара инструментов для централизованного управления и отладки:
http://html.adobe.com/edge/inspect/
и
http://vanamco.com/ghostlab/
К сожалению, в моих условиях с устройствами беда и наличных устройств много меньше чем устройств, на которых необходимо обеспечить работоспособность нашего продукта, потому я не могу рассказать об упомянутых системах ничего кроме ссылок на их сайты.

2) Эмуляция
Тут и широко известный dosbox и чуть менее известные эмуляторы для мобильных:
Для эмуляции Андроид можно воспользоваться официальным эмулятором здесь:
http://developer.android.com/tools/help/emulator.html
Или легковесным условно открытым эмулятором от Genymotion:
https://cloud.genymotion.com/page/customer/login/?next=/
Для IOS все довольно грустно и приходится рассчитывать на iPadian.
Для Windows Phone наличествует официальный эмулятор
http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff402563(v=vs.105).aspx
Не трудно догадаться, что только для Windows.
Стоит отметить, что все конструкции с эмуляцией требуют достаточно хитрых извращений и, как правило, не поддаются хоть какой-то автоматизации. хотя с должным применением хитрости, упрямства и таланта, можно попытаться скрестить эмулированные ОС и устройства с ПО из первого пункта.
Также важно, что с эмуляцией никогда нельзя быть уверенным, что реальное устройство будет работать ровно так, как эмуляция.
Например, в IE 11 можно эмулировать IE 9, но поскольку эмуляция идет через консоль вы таким образом никогда не узнаете, что в IE 9 консоль по умолчанию не существует и создается только по факту её открытия, а следовательно, любые ваши console.log() в отсутствие спец. мер будут приводить к ошибкам и падениям скриптов.

И, наконец, третий вариант:
3) Сервисы, позволяющие провести кросс-браузерное тестирование.

http://deviceanywhere.com/
Предоставляет реальные устройства для тестирования чего бы то ни было в ручном режиме.
Имеется два вида бесплатного доступа и полномасштабный платный доступ.
Бесплатный доступ на общих основаниях позволяет удалённо пользоваться 11-ю мобильными устройствами сессиями по 10 минут.
Формально на них можно поставить что угодно, по факту же работает то самое ограничение в 10 минут. Изначальный набор установок базовый. Если вам нужно протестировать мобильный хром под андройд — вам его придется устанавливать.
Есть бесплатный пробный период в 7 дней. Для его использования придется установить “тестовый центр”. В пробном периоде ассортимент устройств сопоставим с бесплатным, однако ограничения на длину сессий уже нет.
Список устройств, доступных в платном варианте поистине впечатляет: www.keynotedeviceanywhere.com/test-center-developer/device_test.php
Расценки начинаются с 280 $ за 10 часов при использованом одном “пакете” устройств (всего имеется 13 “пакетов”).

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

http://browsershots.org/
Бесплатный сервис скриншотов. Позволяет запустить вашу страничку на внушительном количестве браузеров под Linux (84 браузера), Windows (87 браузеров) и MacOs (10 браузеров).
Скриншоты делаются весьма грамотно: для большинства браузеров при достаточно длинной страничке скриншоты на самом деле состоят из склейки нескольких скриншотов с прокруткой.
Заказать тесты можно достаточно быстро в несколько кликов, если, конечно, не требуется точно задать, например: FF8 — FF26 на Linux и Windows, тогда, конечно, придется муторно кликать по чекбоксам.
Стоит также отметить, что система открытая и любой может к ней присоединиться, предоставив свои вычислительные ресурсы. Более того, авторы даже предоставляют реализацию своего API на Python.

Достоинтсва — бесплатность, автоматичские скриншоты, получаемые в параллель на разных компьютерах, реальные устройства.
Недостатки — Только три ОС, при чем под общими именами могут быть какие угодно реальные ОС, конкретную версию вы узнаете только получив скриншоты. Так что проверяя FF 25 на Windows вы можете получить скриншот с любой Windows, какую только сумеете придумать. Можно получить с 7-ки, а можно с 8-ки, можно с XP. Как повезет. Нет “Живого доступа”. Вы получаете только мертвые скрины. При том не всегда понятно по какому признаку отрабатывает снятие скрина, бывает, что он берется слишком рано.

http://crossbrowsertesting.com/
Система для проведения кросс-браузерного тестирования. Имеет широкую базу и большое количество различных сочетаний браузер/ОС. Полный список доступных предложений здесь: crossbrowsertesting.com/browsers. Позволяет провести как скриншот тесты, так и “живые тесты”. Более того из результатов скриншотов можно попасть в “живой тест” одним кликом. Также как и переделать отдельный скрин.
Бесплатный доступ всего лишь на один час.
Платные расценки от 30$ за 2,5 часа.

Достоинства — удобный интерфейс, большая база браузеров, возможность точного назначения сочетания браузера и ОС, большинство тестов проводится на реальных устройствах.
Недостатки — некоторые тесты все же проводятся на эмуляторах (Android 2.2, 4.0), различия в пуле браузеров и операционных устройств доступных для автоматических скриншотов и для “живого теста” (последних больше).

http://www.browserstack.com/
Предоставляет богатый набор операционных систем и браузеров под них и богатый набор эмуляций мобильных устройств с родными браузерами на них.
Полный список можно посмотреть здесь: www.browserstack.com/list-of-browsers-and-platforms
А вот чем данный ресурс интересен, так это разнообразием возможностей. В разделе “Responsive” можно бесплатно посмотреть свой сайт на разных мобильных устройствах (их эмуляциях) но, увы, только на родных браузерах.
Раздел “Screenshots” предсказуемо предлагает массовый тест с получением скриншотов. Кроме того есть возможность указать таймаут до изготовления скриншота, что дает хоть какой-то контроль над этим тестом.
“Screenshots” и “Responsive” обслуживаются как единое целое, доступны 100 скриншотов бесплатно. Далее 39$ в месяц. План от 199$ дает доступ к API для автоматического получения скриншотов.
Раздел “Live” — возможность забраться на выбранную ОС и посмотреть сайт в желаемом браузере, или посмотреть эмуляцию желаемого мобильного устройства. Доступно 30 минут бесплатно, далее тарифы начинаются от 39$ в месяц.
И, собственно, что выделяет данный сервис из остальных — раздел “Automate”, где можно получить доступ к API, позволяющему реализовать тесты на Selenium на стороне сервиса в желаемых ОС и браузерах. Доступно 100 минут бесплатно. Тарифы начинаются от 99$ в месяц за максимум 8 (2 потока по 4) часов в день.

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

https://browserling.com/
Сервис, предоставляющий возможность живого доступа к заданным браузерам. Есть возможность неограниченного количества сессий по 3 минуты. За 20$ в месяц можно получить бесконечные сессии на одного разработчика, за 30 на бесконечное количество разработчиков. И да, на бесплатном плане из IE вам будет доступен только 9.0.

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

http://opendevicelab.com/
Сеть “открытых лабораторий” в которых по задумке авторов можно протестировать мобильные приложения и сайты на реальных устройствах. Однако, никакой возможности провести тестирование через сеть нет. Только вручную, только методом физического посещения. И, увы, по их карте ближайшие лаборатории расположены в Финляндии.

Литература и ссылки.
Вообще, на эту тему существует на удивление немного статей, особенно обзорных, претендующих хоть на какую-то полноту. Ближайшее, что мне удалось найти:
http://webuild.envato.com/blog/techniques-for-mobile-and-responsive-cross-browser-testing/
Часть материалов этой статьи и легла в основу представленного обзора.
Кроме того, что-то нашлось на хабре:
http://habrahabr.ru/post/73251/
Статья о сервисе, эмулирующем браузеры. Увы, очень старая. Хотя сервис все еще жив и продолжает работать.
И http://habrahabr.ru/post/111748/
чуть более новая, но некоторые описания там все же уже устарели.