Как протестировать сайт 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

^

CrossBrowserTesting – это простой в использовании и очень мощный инструмент кросс-браузерного тестирования с функциями как живого тестирования, так и скриншотов. Это инструмент, который мы используем здесь в Awesome Motive для тестирования наших веб-сайтов, таких как WPTec и наших премиальных плагинов 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.