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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Однако правильная настройка Google Analytics может оказаться сложной задачей для многих владельцев сайтов.

Вот почему мы рекомендуем использовать MonsterInsights. Это лучшее аналитическое решение для WordPress, используемое более чем 3 миллионами веб-сайтов.

Для получения более подробной информации см. наше руководство для начинающих о том, как установить Google Analytics в WordPress.

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

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

Прокручивая страницу вниз, вы увидите раздел «Разбивка по устройствам», который показывает, какие устройства используют посетители для доступа к вашему сайту.

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

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

Вы также можете перейти на Мобильные » Устройства.

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

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

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

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

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

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

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

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

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

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

Если вы хотите быстро получить сразу несколько снимков экрана, перейдите на вкладку «Скриншоты» и запустите новый тест скриншотов.

Инструмент CrossBrowserTesting будет автоматически получать скриншоты на устройствах Mac, Windows, Android и iOS под управлением Chrome, Firefox, Safari, Microsoft Edge, Internet Explorer и сотен других веб-браузеров.

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

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

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

2. BrowserStack

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

Они также предлагают ограниченный бесплатный пробный аккаунт, который дает вам 30 минут интерактивного браузерного тестирования, 100 минут автоматизированного тестирования и 5000 скриншотов.

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

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

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

Ценообразование: Стоимость от $29 в месяц при ежегодном расчете и неограниченное количество минут тестирования и поддержка Windows и macOS.

3. LambdaTest

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

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

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

Затем LambdaTest автоматически предоставит вам результаты, основанные на типе теста, который вы проводите.

Просто нажмите на скриншот, и он откроется во всплывающем окне для просмотра.

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

Ценообразование: Стоимость начинается от $15 в месяц при ежегодном выставлении счета и предлагает поддержку неограниченного тестирования в реальном времени, скриншоты и отзывчивое тестирование.

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

4. WordPress Theme Customizer

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

После завершения настройки сайта вы можете просмотреть свои изменения и живой сайт на разных размерах экрана.

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

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

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

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

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

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

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

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

В большинстве кросс-браузерных тестов вы обнаружите проблемы с CSS в вашей теме.

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

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

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

Источник: www.wpbeginner.com