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

/

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

Тестирование вашего сайта WordPress в разных браузерах

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Обзор технологии Google Analytics

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

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

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

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

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

1. Browsershots

Browsershots

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

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

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

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

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

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

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

Это платная услуга, но они предлагают бесплатную пробную учетную запись со 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.

Нужна помощь с WordPress? Свяжитесь сейчас
[email protected]

Это переведенная версия оригинальной статьи от wpbeginner, весь контент, изображения и авторство принадлежит автору

Как создать калькулятор автокредитования / оплаты автомобиля в WordPress

Хотите создать в WordPress калькулятор автокредита или оплаты автомобиля? Если вы работаете в автосалоне, то добавление калькулятора платежей по

Как сохранить данные контактной формы в базе данных WordPress

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

Как отображать описания категорий в WordPress

Вы хотите отображать описания категорий на своем сайте WordPress? Категории позволяют легко сортировать контент на вашем сайте. Они также помогают

Как установить WordPress на других языках

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