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

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

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

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

Не забудьте проверить Object Fit — свойство object-fit определяет, как содержимое элемента должно помещаться в доступном пространстве. Значение ‘contain’ уменьшает масштаб содержимого, чтобы оно поместилось в контейнер, при этом соблюдается соотношение сторон, а значение ‘fill’ увеличивает масштаб содержимого, чтобы заполнить контейнер, ценой потенциального искажения соотношения сторон.

Internet Explorer и Microsoft Edge

Согласно исследованию, опубликованному W3C, почти 4% конечных пользователей во всем мире используют Internet Explorer. IE является самым простым браузером для разработчиков, позволяющим им сосредоточиться на своем коде. IE 9 — IE 11 поддерживает почти все новейшие JavaScript и CSS фреймворки. Однако IE 8 — это совсем другая история. Часто используемые фреймворки, такие как Angular или Bootstrap, иногда не поддерживаются в IE 8. Исследование в Google analytics покажет, что IE 8 является одной из самых используемых версий. Если клиент упоминает в SRS количество браузеров и их версии, на которых приложение должно корректно отображаться, то это уже другой вопрос. В противном случае тестирование должно быть проведено должным образом и на IE8.

Частая проблема, с которой сталкиваются тестировщики и разработчики, заключается в том, что приложения часто не отображаются должным образом в IE 8. Текст может быть битым, кнопки могут не работать, а иногда страница может вообще не загружаться. Это происходит потому, что долго работающие скрипты отображаются в IE 8 исключительно медленно. Лучшим способом решения этой проблемы является сокращение рекурсии, циклов и манипуляций с объектной моделью документа. В CSS, если вместо классов использовать идентификаторы, загрузка страницы будет немного быстрее. Microsoft Edge — это совсем другая история. Он гораздо более оптимизирован, и сайты, которые нормально отображаются в других браузерах, таких как Chrome или Firefox, прекрасно работают в нем. Тем не менее, сообщается, что некоторые теги стилей bootstrap не работают должным образом в Edge, и они работают нормально, когда заменяются настроенным CSS. Следовательно, перед развертыванием необходимо провести тестирование.

Mozilla Firefox

Когда Firebug был представлен около 10 лет назад, он был лучшим интегрированным в браузер инструментом разработки, доступным в отрасли. Mozilla Firefox стал чрезвычайно популярным во всем мире. Хотя скорость работы его инструментов разработки превосходит Google Chrome, это по-прежнему надежный браузер, предлагающий индивидуальную настройку пользовательского интерфейса и обширный каталог плагинов. Чтобы преодолеть проблемы с производительностью, недавно была выпущена новая версия, использующая многопроцессную архитектуру. Статистика, опубликованная в июне 2018 года, показывает, что Firefox является предпочтительным браузером для 10% пользователей настольных компьютеров и 17% пользователей мобильных устройств. Перед развертыванием приложения необходимо провести надлежащее тестирование браузера и в Firefox.

Распространенные проблемы, возникающие при тестировании в Firefox, включают в себя отсутствие поддержки таких современных функций, как CSS-сетки, HTML5-видео или аудио, а также flexbox, функции css3, на которой полностью основан Bootstrap 4. Использование специфического для производителя префикса CSS, например -moz, позволяет избавиться от большинства тегов CSS3. Для поддержки Bootstrap, вместо CDN, разработчикам может понадобиться вручную загружать и использовать библиотеки Bootstrap в своем коде. Если для отображения какого-либо свойства CSS не найдено подходящего рабочего решения, разработчику может потребоваться изменить его и найти другой способ реализации функции.

Также проверьте события указателя — свойство CSS cursor, когда оно установлено в «none», позволяет элементам не получать события mouseover/mouseout, вместо этого событие будет происходить на всем, что находится за ним.

Google Chrome

С точки зрения инструментов для разработчиков, Google Chrome лидирует на рынке с почти 63% пользователей на настольных компьютерах, 55% на мобильных и почти 58% на планшетах. Это самый популярный браузер среди разработчиков благодаря широкому набору инструментов для отладки и разработки. Для повышения скорости работы разработчики chrome недавно внесли некоторые изменения, которые позволяют осуществлять рендеринг веб-страниц на мобильных устройствах, работающих в условиях плохого покрытия сети.

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

Проблемы с ориентацией изображений — еще одна распространенная проблема в Chrome. Изображения, которые в других браузерах отображаются правой стороной вверх, в Chrome могут отображаться вверх ногами. Это не ошибка. Это происходит только тогда, когда ориентация изображения в EXIF не совпадает с фактической ориентацией. Обработка изображений на стороне сервера решит эту проблему.

Эй, вы ищете Prefers Reduced Motion? Показанный медиазапрос соответствует предпочтениям пользователя в отношении уменьшения движения.

Safari

Поскольку большинство пользователей настольных компьютеров предпочитают Windows, Safari занимает всего 3% доли пользователей. Однако из-за широкого использования iPhone и iPad он занимает 17% доли использования на мобильных устройствах и 35% на планшетах и, следовательно, является важным браузером для проведения тестирования. Однако настольный и мобильный Safari следует рассматривать как разные браузеры, поскольку iPad и iPhone управляются с помощью прикосновений, а не нажатий. Мобильная версия Safari также оптимизирована для снижения нагрузки на процессор.

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

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

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

Оцените статью
Procodings.ru
Добавить комментарий