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

Всё больше достойных поводов находится у веб-разработчиков для того, чтобы отказаться от полнокровной поддержки 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 персон, но отмечу, что многие впереди «стоящие» — очередь бросали либо мучали сервис меньше доступных пяти минут). Справедливости ради надо сказать, что есть и платный вариант без очередей.

Ваша версия

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

▷ Как проверить отображение сайта во всех браузерах: что такое кроссбраузерность?

82031 2 1

How-to

– Читать 7 минут

Прочитать позже

ЧЕК-ЛИСТ: ТЕХНИЧЕСКАЯ ЧАСТЬ — КОД СТРАНИЦ

Инструкцию одобрил
SEO-специалист в Luxeo

Илья Беланенко

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

Содержание:

1. Что такое кроссбраузерность
2. Проверка кроссбраузерности сайта
   
3. Заключение

Что такое кроссбраузерность

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

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

• ПК;
  
• мобильных устройствах;
  
• планшетах и прочем.

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

Влияние кроссбраузерности на SEO-продвижение связано с юзабилити для пользователя. Хорошее юзабилити положительно воздействует на поведенческие факторы, которые добавляют вес в SERP, а также повышают позиции сайта в поиске.

Проверка кроссбраузерности сайта

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

• Google Chrome;
  
• Safari;
  
• Opera;
  
• Mozilla Firefox;
  
• Internet Explorer / Microsoft Edge.
  

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

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

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

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

Browsershots

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

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

Перейдите по ссылке, чтобы выполнить тест:

В активном поле следует указать гиперссылку на тестируемый веб-сайт, затем нажмите кнопку «Submit», как на скриншоте:

Когда система завершит проверку, вы узнаете кроссбраузерность сайта и увидите скриншоты:

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

CrossBrowserTesting

CrossBrowserTesting — платный инструмент с триал-доступом на 7 дней. Для разовой проверки этого достаточно. Сервис совершает проверку через более чем 1500 десктопных и мобильных браузеров. Проверки могут происходить автоматически через заданный период.

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

Укажите ссылку, нажмите «Run Test» и получите результат проверки.

Saucelabs

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

Далее в пункте «Live Testing» из левого верхнего меню откроется страница, где необходимо вставить скопированный заранее URL-адрес сайта и нажать кнопку «Start Session» в правом нижнем углу.

NetRenderer

NetRenderer — бесплатный инструмент. Позволяет проверить отображение сайта в Internet Explorer 11, 10, 9, 8, 7, 6 или 5. 5 версиях.

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

Через несколько секунд вы получите снимок своей веб-страницы.

Browsera

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

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

Инструмент платный, но с гарантией возврата средств в течение 30 дней.

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

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

Хотите узнать, как с помощью Serpstat найти и исправить технические ошибки на сайте?

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

Заказать бесплатную консультацию

Заключение

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

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

В данной статье мы рассмотрели несколько тестировщиков:

Browsershots.

CrossBrowserTesting.

Saucelabs.

NetRenderer.

Browsera.

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

Задавайте вопросы в комментариях или пишите в техподдержку.:) А также вступайте в чат любителей Серпстатить и подписывайтесь на наш канал в Telegram.

Serpstat — набор инструментов для поискового маркетинга!

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

Набор инструментов для экономии времени на выполнение SEO-задач.

7 дней бесплатно

Оцените статью по 5-бальной шкале

3.68 из 5 на основе 28 оценок

Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.

Рекомендуемые статьи

How-to

Анастасия Сотула

Покупка трафика: как купить трафик на сайт и где это сделать

SEO +1

Ilkhom Chakkanbaev

Как задать в robots. txt директивы для роботов Google

How-to

Denys Kondak

Как настроить мониторинг упоминаний бренда в сети

Кейсы, лайфхаки, исследования и полезные статьи

Не успеваешь следить за новостями? Не беда! Наш любимый редактор подберет материалы, которые точно помогут в работе. Только полезные статьи, реальные кейсы и новости Serpstat раз в неделю. Присоединяйся к уютному комьюнити 🙂

Нажимая кнопку, ты соглашаешься с нашей политикой конфиденциальности.

Поделитесь статьей с вашими друзьями

Вы уверены?

Спасибо, мы сохранили ваши новые настройки рассылок.

Сообщить об ошибке

Отменить

Browserling — Кроссбраузерное онлайн-тестирование

Browserling — Кроссбраузерное онлайн-тестирование

мы также создали:

Получите браузер и начните тестирование за 5 секунд!

Характеристики

Живые интерактивные сеансы

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

http://my-awesome-website.com

Загрузка…

My Awesome Website Logo

Настоящие браузеры, работающие на реальных компьютерах

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

Google Chrome

версия

34 49 52 66 последние

Internet Explorer

версия

7 8 9 10 11

Firefox

версия

32 41 58 60 107

Opera

версия

39 42 49 53 93

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

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

Скриншоты

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

Адаптивное тестирование

Измените разрешение экрана и размер браузеров для всех ваших потребностей в адаптивном тестировании.

Терминал

$ ssh

Терминал

$ ssh

Терминал

$ ssh

Туннели SSH для локального тестирования

Вы можете обратно проксировать свой локальный хост или локальный сервер в Browserling с помощью наших туннелей SSH. Руководство по местному тестированию.

Браузер

Безопасный https://browserling. com

Безопасный и анонимный просмотр

Все соединения между вами и Browserling зашифрованы SSL. Ваш просмотр полностью анонимен!

Безопасный просмотр

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

Flash, Java или плагины не требуются.

Работа в браузере основана на HTML5 и JavaScript. Вам не нужно ничего устанавливать. Это просто работает!

Расширение браузера для более быстрого тестирования

Расширения Browserling позволяют тестировать веб-сайты в разных браузерах одним щелчком мыши. Получите их за:

Закладки

IE 11 в Windows 7

Букмарклеты для более быстрого тестирования

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

Live API

Вы можете по запросу встраивать браузеры в свои собственные приложения и автоматизировать их с помощью удобного API.

Узнайте больше о Live API.

? ? ?

Запись видео сеансов просмотра

Скоро вы сможете записывать видео браузеров в формате GIF и MP4.

? ? ?

Демонстрируйте экран своим коллегам

Скоро вы сможете делиться своими сеансами просмотра с коллегами и друзьями для более быстрого решения проблем с разными браузерами.

? ? ?

Headless API

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

Цены

ежемесячно ежегодно

Бесплатный план попробуй перед покупкой

$ 0 / месяц

Ограниченные 3-минутные сеансы

только Internet Explorer 11

Только Windows 7
Только разрешение 1024×768

План разработчика однопользовательская лицензия

$ 19 / месяц

Нет ограничения по времени
Используйте столько, сколько хотите

Все доступные браузеры
Все доступные платформы ОС
Пользовательские разрешения экрана

Локальное тестирование через SSH-туннели
Скриншоты

Премиум-поддержка
1 пользователь

План разработчика войдите, чтобы продолжить заказ за $19 в месяц покупка завершена

План команды многопользовательская лицензия

$ 29+ / месяц

Нет ограничения по времени
Используйте столько, сколько хотите

Все доступные браузеры
Все доступные платформы ОС
Пользовательские разрешения экрана

Локальное тестирование через туннели SSH
Скриншоты

Премиум-поддержка
2+ пользователя

План команды войдите, чтобы продолжить заказ для 2 пользователей покупка завершена

Выберите размер команды 2 пользователя

2 3 4 5 6 7 8 9 10

Стоимость группового плана для 2 человек составляет $29

Нужно более 10 пользователей? Свяжитесь с нами по адресу sales@browserling. com или используйте контактную форму.

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

Вопросы о ценах и планах? Напишите нам по адресу [email protected] или используйте контактную форму.

Наши клиенты

… и более 10 000 пользователей бесплатного плана!

Testimonials

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

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

Д-р Алексей

Директор Bloomsbury Health – инновации в области здравоохранения NHS

Вы нужны каждому веб-агентству.

Гал Боренштейн

Генеральный директор Borenstein Group, Inc.

Мы полагаемся на Browserling и Testling как часть наших процессов развертывания и тестирования при публикации наших библиотек JavaScript для пользовательской базы PubNub JavaScript. Это отличный сервис для быстрого тестирования всех сред JavaScript.

Стивен Блюм

Технический директор, PubNub, Inc.

У вас есть абсолютно лучший инструмент, очень быстрый и отзывчивый.

Гораздо лучше, чем Sauce Labs!

Рэймонд Борхан

Технический директор, Knife Center, Inc.

Browserling помогает MergEye предоставлять нашим клиентам услуги высочайшего качества. Наш процесс контроля качества сильно зависит от тестирования Live API Browserling. Без Browserling нам пришлось бы поддерживать более 20 виртуальных машин для запуска наших тестов. Browser экономит нам 12 000 долларов в год на лицензировании и рабочей силе. Мы любим Browserling!

Дмитрий Калинин

Технический директор, MergEye, Inc.

Компания Browserling разработала специальное решение для кросс-браузерного тестирования для ECESIS Technologies.

Я очень рад видеть ваши технические возможности для немедленного решения и быстрого реагирования.

TK

Генеральный директор, ECESIS Technologies, Inc.

Онлайн-браузер от Browserling

Что такое онлайн-браузер?

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

Как работают онлайн-браузеры?

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

Какие онлайн-браузеры существуют?

В Browserling мы установили все самые популярные браузеры в нашем облаке онлайн-тестирования. У нас есть Chrome (все версии от 1 до последней), Firefox (все версии от 3 до последней), Opera (все версии от 10 до последней), Internet Explorer (версии 6, 7, 8, 9)., 10 и 11), Edge (последняя версия) и Safari (в настоящее время только версии для Windows). Также в ближайшее время планируем установить браузер Brave, браузер Яндекс и браузер Beaker.

Для чего можно использовать онлайн-браузер?

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

Попробуйте онлайн-браузер!

Вот небольшая демонстрация! Введите URL вашего любимого веб-сайта, и мы откроем его в Chrome 90 (последняя версия Chrome). Chrome будет создан на наших серверах, и мы отправим его вам:

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

Часто задаваемые вопросы об онлайн-браузерах

Какие онлайн-браузеры самые популярные?

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

Какие онлайн-браузеры наименее популярны?

Internet Explorer стал наименее популярным онлайн-браузером. Это связано с тем, что Microsoft заменила его более новым браузером Edge, а Internet Explorer больше не обновляется. У нас по-прежнему установлены все версии Internet Explorer, и вы можете в любое время получить онлайн-обозреватель Internet Explorer.

На каких операционных системах работают онлайн-браузеры?

Все онлайн-браузеры работают в различных системах Microsoft Windows. Наши облачные серверы работают под управлением Windows 10, Windows 8.1, Windows 8, Windows 7 и Windows XP.

Можно ли использовать мобильные браузеры в Интернете?

Да! Мы запускаем онлайн-версии Android и устанавливаем на них последнюю версию Chrome.