Как протестировать WordPress-сайт в разных браузерах?

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

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

Почему важно тестировать сайт в разных браузерах?

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

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

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

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

Как проверить свой сайт WordPress в нескольких браузерах?

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

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

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

Browsershots

Начнем с более простого инструмента. Browsershots довольно простой своей работой и функциями. Он идеально подойдет для начала тестирования.

Чтобы использовать Browsershots, вам нужно посетить его домашнюю страницу и ввести URL вашего сайта в соответствующем поле. Затем необходимо выбрать браузеры, которые требуется протестировать.

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

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

Тут вы сможете внимательно просмотреть каждый скриншот.

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

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

CrossBrowserTesting

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

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

Отметим, что этот инструмент является платным. Самый дешевый план стоит $29 в месяц и включает в себя неограниченное тестирование для одного пользователя. Тем не менее, есть также 7-дневная бесплатная пробная версия, предлагающая 100 минут времени тестирования. Этого достаточно, чтобы протестировать небольшой сайт.

После регистрации на сайте сервиса вы получите доступ к панели мониторинга.

Вы можете использовать вкладку Screenshots, чтобы посмотреть или скопировать статические изображения вашего сайта, или ввести URL-адрес в поле Start A Live Test, чтобы выполнить полный тест. В самом конце следует выбрать устройство, операционную систему и разрешение экрана.

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

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

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

Если Вам понравилась статья — поделитесь с друзьями

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

Вы здесь: Главная — Софт — Софт для создания сайтов — Сервис проверки сайта в разных браузерах

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

Сервис называется http://browsershots.org/. Здесь огромный набор браузеров, причём в самых разнообразных операционных системах.

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

Однако, в бочке мёда всегда есть ложка дёгтя. А тут даже не одна ложка, а несколько. Во-первых, это большое время ожидания. То есть в среднем, Вы будете ждать одну проверку при конкретном разрешении в конкретной версии браузера порядка 5-ти минут. А Вам нужно проверить достаточно много. Вдобавок, имеется общее количество ограничений на проверки. Могу ошибаться, но это порядка 50-ти штук в сутки. То есть 50 различных проверок и на сутки Ваш доступ будет закрыт. И последний недостаток — время от времени по неизвестным причинам возникают проблемы с прорисовкой скриншотов, по которым Вы и оцениваете, как выглядит Ваш сайт в определённом браузере. Из-за каких-либо ошибок самого сервиса, Вы можете просто увидеть чистый лист, на котором абсолютно ничего не будет.

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

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

• Создано 21.02.2011 16:49:15
• Михаил Русаков

Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.

Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

   Она выглядит вот так:

2. Текстовая ссылка:
   <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>
   Она выглядит вот так: Как создать свой сайт

3. BB-код ссылки для форумов (например, можете поставить её в подписи):
   [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

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

Серёжа СыроежкинКопирайтер

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

Долгое время для того, чтобы проверить свой сайт в нескольких браузерах, да еще и в различных их версиях, разработчикам приходилось держать все эти версии у себя на компьютере. К тому же, «подружить» несколько версий именно Internet Explorer — задача не из легких: приходилось поднимать несколько виртуальных машин ради проверки кроссбраузерности. Этому пути следуют некоторые профессиональные верстальщики и сейчас: ведь нет лучшего способа протестировать свой сайт в нужной версии нужного браузера, кроме как самому «пощупать». Более того, по скриншотам, которые предоставляют различные веб-сервисы типа Browsershots, вы не сможете проверить корректность работы JavaScript на страницах вашего сайта.

Разработчики сайтов долго просили Microsoft как-то решить эту проблему, и эта проблема была решена в браузерах Internet Explorer, начиная с версии IE 9. Решена она была путям добавления пункта Режим браузера в меню Средства разработчика (кнопка F12). С помощью данной опции можно переключить браузер с текущей версии на нужную и проверить отображение сайта в разных версиях IE.

Данный способ позовляет досконально проверить сайт на ошибки в отображении, верстке, анимации.

Если вам нужно сделать скриншот страницы в старых версиях Internet Explorer, чтобы быстро визуально оценить внешний вид, или показать коллегам, заказчику, то можно воспользоваться веб-сервисом NetRenderer. Он позволяет быстро оценить грубые ошибки в верстке сайта при отображении в старых версиях IE.

На данный момент рекомендуется адаптировать сайты для версий Internet Explorer, начиная с IE 8.

Смотрите также:

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

Меняя новый шаблон (тему) вашему сайту (блогу), часто мы забываем про один очень важный фактор — кроссбраузерность. Чтобы объяснить, о чём же пойдёт речь в этой статье, я приведу цитату из Википедии:

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

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

А часто ли вы проверяете свой сайт в разных браузерах?

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

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

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

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

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

Это можно сделать различными способами. Я расскажу как, а выбирать наиболее удобный только Вам.

Способ 1.

Вы можете установить на свой компьютер огромное множество браузеров: Оперу, Хром, Огненного Лиса. IE можно не устанавливать, если у Вас ОС Windows. В ней он установлен по-умолчанию.

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

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

Способ 2.

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

Способ 3.

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

Итак, нужно зайти на сайт browsershots.org, где Вам будет представлен огромный список браузеров. Не обязательно выбирать все. Достаточно выбрать несколько — самые популярные.

Сервис browsershots.org предлагает для этого удобное меню в нижней части списка:

Кроме нужных браузеров вы можете выбрать следущие параметры:

• разрешение экрана;
• количество цветов;
• версия JavaScript;
• наличие Java;
• наличие Flash плеера и его версию.

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

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

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

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

Задача

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

Решение

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

Варианты

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

Онлайн-сервисы, которые сделают снимок экрана в нужном браузере

browsershots.org

http://browsershots.org/ — «Browsershots делает скриншоты вашего сайта в разных браузерах. Это бесплатный open-source сервис, созданный Johann C. Rocholl. Когда вы отправляете нам адрес свого сайта, он добавляется в очередь. Несколько различных компьютеров откроют ваш сайт в своих браузерах. Затем они сделают скриншоты и загрузят их на центральный сервер.»

Устанавливает срок действия запроса 30 минут и требует постоянного продления этого срока. То есть нужно постоянно следить за страницей, где должны появиться скриншоты. В моём случае они так и не появились.
Сервис базируется на работе добровольцев и видимо не имеет большой мощности.

iecapture.com

http://www.iecapture.com/ — «Устали от установки бета ПО? Может быть вы работаете в «альтернативной» ОС типа Линукс или Mac OS X. В любом случае этот сайт существует для того, чтобы показать вам снимок экрана вашего сайта в Internet Explorer версия 8 Beta 1, которая выпущена 10 марта 2008, установленая в Windows XP SP2.»

browsercam

http://www.browsercam.com/ — «Смотрите ваш веб-дизайн в любом браузере и любой операционной системе. Проверяйте javascripts, DHTML, формы и другой динамический функционал на любой платформе. Не только на своей. Используйте наш банк машин для тестирования, чтобы удалённо тестировать ваш сайт.»

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

BrowserPool

http://www.browserpool.de/kc/wob/portal.jsp — платный сервис BrowserPool, умеет делать скриншоты во многих ОС и браузерах. Стоимость составляет 29.99 евро в месяц. Можно получить бесплатный тестовый аккаунт.

IE NetRenderer

http://ipinfo.info/netrenderer/ — Он умеет делать скриншоты в различных версиях Интернет Эксплорера (от 5.5 до восьмой беты), работает очень быстро и даже умеет совмещать скриншоты, сделанные в версиях 6 и 7, благодаря чему хорошо видны различия. Сервис бесплатен.

Browsrcamp

http://www.browsrcamp.com/ — делает скриншоты только под браузерами Mac OS X. Причем, бесплатно можно протестировать только Сафари.

Выводы

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

Локальная установка разных браузеров

Если у вас нет нужного браузера, то вы можете найти практически любой на
сайте browsers.evolt.org.

Кроме того, можно загрузить инсталлер, который сразу может установить IE3, IE4.01, IE5, IE5.5 и IE6: Install multiple versions of IE on your PC. Скачать инсталлер (около 10Мб) можно на странице проекта.

Есть ещё один инструмент: IETester — бесплатный браузер, который позволяет тестировать страницы в IE8 beta 1, IE7 IE 6 и IE5.5 на Vista и XP. Скачать IETester (23.8MB) можно на сайте проекта .

Полная версия статьи на Drupal CookBook.ru: Проверить отображение сайта в разных браузерах.