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


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

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

Ваша версия

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

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

  • Дом
  • Категории статей
    • Amazon и торговые площадки
    • Аналитика и данные
    • B2B
    • Преобразование
    • Дизайн и разработка
    • Менеджмент и финансы
    • Маркетинг и реклама
    • Торговый голос
    • SEO
    • Отгрузка и выполнение
  • Инструменты и другое
    • Вебинары
    • Подкасты
    • Справочник поставщиков
  • Реклама>
  • О компании
    • О нас
    • Условия использования
    • Свяжитесь с нами
    • Редакционная политика
    • Электронный бюллетень
    • Логотипы и руководство по бренду
    • Политика конфиденциальности
    • RSS-сводка
  • Категории
    • Amazon и торговые площадки
    • Аналитика и данные
    • B2B
    • Преобразование
    • Дизайн и разработка
    • Менеджмент и финансы
    • Маркетинг и реклама
    • Торговый голос
    • SEO
    • Отгрузка и выполнение
  • Вебинары
  • Продавцы
Зарегистрироваться

Электронная рассылка новостей
+ Бесплатная электронная книга

52 великих идеи электронной коммерции

политика конфиденциальности
.

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

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

Что такое кроссбраузерное тестирование?

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

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

Google Chrome - самый популярный веб-браузер в мире, занимающий 65% рынка настольных компьютеров и 57% мобильных устройств. Однако другие браузеры, такие как Firefox, Microsoft Edge, Safari и Opera, по-прежнему широко используются сотнями миллионов пользователей по всему миру.

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

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

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

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

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

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

Как узнать, какие браузеры используют посетители вашего веб-сайта?

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

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

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

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

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

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

Лучшие инструменты для кроссбраузерного тестирования WordPress

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

Ниже приведен список лучших инструментов кроссбраузерного тестирования для сайтов WordPress:

1. Browsershots

Browsershots - это инструмент с открытым исходным кодом, который позволяет вам тестировать свой веб-сайт в нескольких браузерах в разных операционных системах. Лучшее в этом инструменте - то, что он бесплатный. Обратной стороной является то, что он не включает Microsoft Edge или Internet Explorer.Он также не включает поддержку мобильных устройств.

Чтобы использовать Browsershots, просто введите URL-адрес своего веб-сайта и затем выберите браузеры, которые вы хотите протестировать. Браузеры перечислены в трех столбцах для Linux, Windows и Mac OS.

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

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

2. Кроссбраузерное тестирование

CrossBrowserTesting - это простой в использовании и очень мощный инструмент кроссбраузерного тестирования с функциями тестирования в реальном времени и создания снимков экрана. Это инструмент, который мы используем здесь, в Awesome Motive, для тестирования наших веб-сайтов, таких как WPBeginner, и наших премиальных плагинов WordPress.

Это платная услуга, но они предлагают бесплатную пробную учетную запись со 100 минутами для тестирования продукта.

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

Если вы хотите быстро получить сразу несколько снимков экрана, щелкните вкладку «Скриншоты» и запустите новый тест снимков экрана. Инструмент CrossBrowserTesting автоматически извлекает скриншоты на мобильных телефонах Mac, Windows, iPad и Nexus 6P, работающих под управлением браузеров Chrome, Firefox, Safari, Microsoft Edge.

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

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

Цена: От 29 долларов в месяц при ежегодной оплате.

3. BrowserStack

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

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

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

Цена: От 29 долларов в месяц при ежегодной оплате.

Как анализировать скриншоты кроссбраузерного теста?

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

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

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

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

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

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

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

Если вам понравилась эта статья, то подпишитесь на наш канал YouTube для видеоуроков по WordPress. Вы также можете найти нас в Twitter и Facebook.

.

Почему мой сайт выглядит по-разному в разных браузерах?

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

  • Как браузер интерпретирует страницу

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

http://browsershots.org

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

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

  • ОС посетителя (операционная система)

Если на вашем веб-сайте используются кнопки отправки, переключатели, флажки и поля редактирования, все они будут визуализированы в зависимости от ОС посетителя и ее стиля.Шрифты браузера также имеют тенденцию немного отличаться при визуализации на ПК, Mac или компьютере с Linux.

Одна область, где сайты почти всегда выглядят по-разному, - это страницы с формами. Различные операционные системы и браузеры совершенно по-разному отображают кнопки в формах и текстовых полях. На ПК кнопки отправки по умолчанию квадратные и довольно плоские, на Mac кнопки отправки по умолчанию представляют собой красиво закрашенные овалы с градиентом. Например, кнопка отправки может выглядеть как серый прямоугольник в вашей классической теме Windows и как овал, если вы используете стиль XP.В качестве обходного пути вы можете создать настраиваемые кнопки для своего веб-сайта.

Код обычной кнопки отправки выглядит так:

    

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

    
  • Разрешение экрана посетителя

Разрешение экрана сильно влияет на отображение веб-сайта.Например, если вы создаете свои страницы с разрешением 1024 × 768, они не поместятся на экране посетителя с разрешением экрана 800 × 600.

Чтобы исправить это, вы не должны использовать статические размеры для своего веб-сайта, т.е. вместо установки width = 1024px вы можете использовать width = 100%. Это не решит всех проблем, но, по крайней мере, поместит страницу в размер экрана.

.

html - Методы проверки внешнего вида веб-страницы в разных браузерах

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
  5. Реклама Обратитесь к разработчикам и технологам со всего мира
  6. О компании
.

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

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий