Эта статья была первоначально опубликована на LambdaTest . Спасибо за поддержку партнеров, которые делают возможным использование SitePoint.
Когда вы разрабатываете веб-сайт, жить как мечта становится реальностью. Но потом вы замечаете, что что-то идет не так после запуска, и это быстро превращается в кошмар. Мой друг был так взволнован, когда собирался запустить свой новый сайт. Но когда он наконец нажал на блестящую кнопку запуска, всплыли некоторые необычные и волнующие тенденции. Изучив детали в Google Analytics, он обнаружил, что у сайта очень высокий показатель отказов на мобильных устройствах.
Веб-сайт был беспорядочным на мобильных устройствах, все элементы остались на своих местах, а логотип даже не поместился на экране. Этот день преподал ему ценный урок, который он передал мне: « Пройдите контрольный список для кросс-браузерного тестирования, прежде чем начать работу ».
Кросс-браузерное тестирование очень необходимо в этом цифровом мире, где все просматривают Интернет на разных платформах, ОС, браузерах, и вы даже не можете об этом думать заранее. В этом вам может помочь разработка идеальной стратегии кросс-браузерного тестирования , но иногда даже после этого вам нужно быть готовым к некоторым нежелательным ошибкам. Тем не менее, правильный контрольный список может помочь вам избежать их или выяснить их раньше, чем кто-либо другой.
Несколько предварительных требований перед прохождением контрольного списка
Прежде чем перейти к контрольному списку, вам необходимо убедиться, что вы знаете, как выполнять кросс-браузерное тестирование.
- Если вы собираетесь выполнять кросс-браузерные тесты, вам нужно знать, на каких браузерах и устройствах вы собираетесь тестировать . Итак, сформулируйте правильную стратегию кросс-браузерного тестирования.
- Если у вас есть стратегия кросс-браузерного тестирования, убедитесь, что вы тестируете свой локально размещенный веб-сайт или сайт разработчика на инструментах кросс-браузерного тестирования, таких как LambdaTest, прежде чем начать работу. Платформа имеет функцию Lambda Tunnel, которая позволяет гибко подключать локальные веб-сайты или веб-приложения для тестирования в облаке для кросс-браузерного тестирования с использованием туннеля SSH. Кросс-браузерная совместимость и кросс-браузерная доступность также влияют на SEO вашего сайта, поэтому всегда важно тщательно его протестировать и идеально совместить для индексации сайтов в поисковых системах.
- Держите мобильные устройства под рукой, или вы также можете настроить эмуляторы или симуляторы. Или вы можете использовать платформу, которая может предоставить вам все необходимые вам устройства, например LambdaTest, которая предоставляет широкий спектр мобильных устройств на iOS и Android для тестирования.
После выполнения предварительных условий, следующий шаг — пройти контрольный список.
Окончательный контрольный список для кросс-браузерных тестов перед запуском
Этот полезный контрольный список поможет вам удостовериться, что вы поставили точки над своими «я», пересекли «свои» и протестировали все свои элементы перед тем, как начать работу в своей локальной среде.
Выравнивание элементов во всех браузерах
Убедитесь, что элементы находятся в правильном месте, в котором вы собираетесь их разместить.
Проверка SSL в разных браузерах
Если вы столкнулись с этой ошибкой, одной из причин может быть то, что SSL-сертификат вашего сайта не поддерживает некоторые версии браузера. Если ваш пользователь попытается получить доступ к вашему веб-сайту с этими версиями браузера, он может вообще не иметь к нему доступа. Итак, проверьте SSL-сертификаты вашего сайта во всех браузерах, прежде чем начать работу.
Рендеринг шрифта в разных браузерах
Кто не любит красивые шрифты на своем сайте, однако они могут вызвать грубые ошибки, если они не будут правильно отображаться. Рендеринг шрифтов сильно зависит от браузера, в котором просматривается ваш сайт. Итак, вы должны убедиться, что ваши шрифты отображаются одинаково в каждом веб-браузере.
Узнайте больше о совместимости шрифтов и браузеров .
Совместимость медиа-элементов с различными браузерами
Видео — самая любимая форма медиа в наши дни. Веб-дизайнеры и разработчики пользуются этим фактом, и вы можете легко найти либо демо-видео, либо обучающее видео на домашней странице сайта. Но совместимость браузера может вызвать проблемы, если вы используете неподдерживаемые элементы мультимедиа, и это касается не только видео, но и изображений. Поэтому, прежде чем начать работу, убедитесь, что вы используете те элементы, которые поддерживаются во всех браузерах, или у вас есть запасной вариант для неподдерживаемых элементов, чтобы ваши пользователи не столкнулись с этим!
Подробнее о совместимости мультимедиа с различными браузерами можно узнать здесь.
Ваши API подключены во всех браузерах?
Вызовы API также зависят от браузеров. Некоторые браузеры признают запросы API, в то время как другие могут этого избежать или выдать ошибку. Прежде чем начать работу, всегда будьте уверены, что используемые вами API подключены в каждом браузере. Потому что есть некоторые браузеры, такие как Opera Mini, которые не поддерживают такие API, как Websocket.
Кроме того, некоторые методы вызова API, такие как getUserMedia/StreamAPI-интерфейсы совместимы с браузером, прежде чем запускать их в другом месте, когда вы находитесь на общедоступном сервере. пользователи могут столкнуться с не связанными с мирами.
Убедитесь, что вы проверяете свой CSS и HTML
Открытые теги могут быть кошмаром для разработчиков и ужасать для пользователей, если они видят код вживую на экране. Поэтому необходимо убедиться, что код чистый и правильно проверен. У W3schools есть мягкий угол для того же самого. Вы можете легко проверить свои HTML, JS и CSS, прежде чем начать работу с такими инструментами, как служба проверки разметки W3C, Free Formatter или JS Formatter, служба проверки CSS W3C — J3 Jigsaw или служба проверки CSS.
Проблемы совместимости браузера могут быть обнаружены в большей степени с помощью этих инструментов, и вы можете продолжить их решение.
Узнайте больше о поиске проблем совместимости между браузерами в HTML и CSS .
После проверки всех основных проблем с совместимостью вам необходимо выполнить цикл кросс-браузерного тестирования, в общем, с учетом незначительных, но важных факторов, таких как:
- Выравнивание элементов: все элементы выровнены так, как вы хотите.
- Всплывающие окна: проверьте, правильно ли отображаются всплывающие окна и открываются ли они во всех браузерах.
- Выравнивание флажков: флажки могут вызвать проблемы во многих браузерах. Убедитесь, что ваши флажки выровнены и находятся в надлежащем рабочем состоянии.
- Выравнивание и функционирование кнопок. Кнопки играют важную роль, когда речь идет о CTA или любых других действиях, поэтому вам необходимо убедиться, что они выровнены и правильно работают в различных браузерах.
- Перенаправление URL-адресов с кнопок. Проверьте ссылки, на которые перенаправляются кнопки.
- Раскрывающиеся меню: убедитесь, что раскрывающиеся списки работают так, как ожидается во всех браузерах.
- Формы и API форм. Убедитесь, что формы принимают данные и данные передаются на конечную точку API сбора без изменений.
- Сетки / таблицы: Проверьте выравнивание и расположение таблиц и сеток, если таковые имеются в каждом браузере.
- Сеансы и файлы cookie. Если на вашем веб-сайте используются файлы cookie, убедитесь, что подсказка есть и она работает соответствующим образом.
- Даты: проверьте, форматируется ли дата в соответствии с определением в каждом браузере.
- Функция увеличения и уменьшения : проверьте, работает ли функция увеличения и уменьшения должным образом и не нарушает ли пользовательский интерфейс в действии.
- Внешний вид свитка: проверьте, присутствует ли свиток на горизонтальной и вертикальной полосах и работает ли он.
- Flash: убедитесь, что видео, анимация, RIA и приложения, поддерживаемые Flash, работают в разных браузерах.
- HTML-анимация: убедитесь, что ваша анимация загружается во всех браузерах.
- Наведение мыши: проверьте, соответствует ли мышь кнопке, текстовому полю, ссылке и пробелу соответственно.
- Выравнивание изображений: убедитесь, что все изображения выровнены и размещены в разных браузерах.
- Alt-тэги: Alt-тэги снова важны, и мы должны быть уверены, что они на месте.
И все остальное, что вы можете придумать в любой возможной комбинации браузера, ОС и устройства.
Как мы видим здесь, существуют различные вещи, которые необходимо протестировать в локальной среде на тысячах комбинаций, чтобы убедиться, что это не мешает работе пользователей после запуска веб-сайта. Итак, нам нужно убедиться, что мы тестируем все возможные комбинации, чтобы избежать дальнейших сюрпризов. Поскольку многие из следующих тестов повторяются и занимают много времени, поэтому мы можем использовать сетку Selnium для автоматизации кросс-браузерных тестов . С такой автоматизацией вы можете избежать повторяющихся и трудоемких задач и автоматизировать их с помощью простого сценария.
LambdaTest также предоставляет онлайн-сетку селена, на которой вы можете автоматизировать свои тесты как на общедоступных, так и на локальных серверах, а также тестировать на облачной сетке LambdaTest более 2000 устройств, браузеров, версий браузеров и комбинаций разрешений. Следовательно, вам нужно убедиться, что вы нашли лучший инструмент для кросс-браузерного тестирования, и тогда вы сможете выполнять тесты в своем контрольном списке, некоторые вручную, а другие с помощью автоматизации.
После того, как вы закончите тестирование этого кросс-браузерного контрольного списка, вы готовы начать работу и нажать зеленую кнопку. Я надеюсь, что вы не столкнетесь с ситуацией, как мой друг, потому что вы достаточно умны, чтобы не повторить ту же ошибку.
Дайте нам знать, если я пропустил что-то, что должно быть включено в контрольный список в разделе комментариев ниже!
До тех пор, удачного тестирования и всего наилучшего для запуска!