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

  1. Что такое кросс-браузерное тестирование?
  2. Зачем тестировать сайт WordPress в разных браузерах?
  3. Как найти, какие браузеры используют посетители вашего сайта?
  4. Лучшие кросс-браузерные инструменты тестирования для WordPress
  5. 1. Обзорные снимки
  6. 2. CrossBrowserTesting
  7. 3. BrowserStack
  8. Как проанализировать скриншоты тестов кросс-браузер?

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

В этой статье мы покажем вам, как легко тестировать сайт WordPress в разных браузерах

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Обзорные снимки

Обзорные снимки

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

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

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

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

2. CrossBrowserTesting

CrossBrowserTesting

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

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

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

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

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

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

Ценообразование: начинается от 29 долларов в месяц, оплачивается ежегодно.

3. BrowserStack

BrowserStack

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

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

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

Ценообразование: начинается от 29 долларов в месяц, оплачивается ежегодно.

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

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

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

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

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

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

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

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

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

Что такое кросс-браузерное тестирование?
Зачем тестировать сайт WordPress в разных браузерах?
Как найти, какие браузеры используют посетители вашего сайта?
Хотите протестировать свой сайт WordPress в разных браузерах?
Что такое кросс-браузерное тестирование?
Зачем тестировать сайт WordPress в разных браузерах?
Как найти, какие браузеры используют посетители вашего сайта?
Как проанализировать скриншоты тестов кросс-браузер?