▷ Как проверить отображение сайта во всех браузерах: что такое кроссбраузерность?

81854 2 1

Прочитать позже

ЧЕК-ЛИСТ: ТЕХНИЧЕСКАЯ ЧАСТЬ — КОД СТРАНИЦ

Инструкцию одобрил
SEO-специалист в Luxeo

Илья Беланенко

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

Содержание:

1. Что такое кроссбраузерность
2. Проверка кроссбраузерности сайта
3. Заключение

Что такое кроссбраузерность

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

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

• ПК;
• мобильных устройствах;
• планшетах и прочем.

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

Влияние кроссбраузерности на SEO-продвижение связано с юзабилити для пользователя. Хорошее юзабилити положительно воздействует на поведенческие факторы, которые добавляют вес в SERP, а также повышают позиции сайта в поиске.

Проверка кроссбраузерности сайта

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

• Google Chrome;
• Safari;
• Opera;
• Mozilla Firefox;
• Internet Explorer / Microsoft Edge.

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

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

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

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

Browsershots

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

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

Перейдите по ссылке, чтобы выполнить тест:

В активном поле следует указать гиперссылку на тестируемый веб-сайт, затем нажмите кнопку «Submit», как на скриншоте:

Когда система завершит проверку, вы узнаете кроссбраузерность сайта и увидите скриншоты:

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

CrossBrowserTesting

CrossBrowserTesting — платный инструмент с триал-доступом на 7 дней. Для разовой проверки этого достаточно. Сервис совершает проверку через более чем 1500 десктопных и мобильных браузеров. Проверки могут происходить автоматически через заданный период.

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

Укажите ссылку, нажмите «Run Test» и получите результат проверки.

Saucelabs

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

Далее в пункте «Live Testing» из левого верхнего меню откроется страница, где необходимо вставить скопированный заранее URL-адрес сайта и нажать кнопку «Start Session» в правом нижнем углу.

NetRenderer

NetRenderer — бесплатный инструмент. Позволяет проверить отображение сайта в Internet Explorer 11, 10, 9, 8, 7, 6 или 5. 5 версиях.

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

Через несколько секунд вы получите снимок своей веб-страницы.

Browsera

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

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

Инструмент платный, но с гарантией возврата средств в течение 30 дней.

Пример отчета с подсвеченными проблемными участками:

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

Хотите узнать, как с помощью Serpstat найти и исправить технические ошибки на сайте?

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

Заключение

Кроссбраузерность — это идентичность отображения веб-ресурса в разных браузерах и их версиях. Некорректный вид сайта отталкивает пользователей, что плохо для поведенческих факторов и SEO.

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

В данной статье мы рассмотрели несколько тестировщиков:

Browsershots.

CrossBrowserTesting.

Saucelabs.

NetRenderer.

Browsera.

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

Задавайте вопросы в комментариях или пишите в техподдержку.:) А также вступайте в чат любителей Серпстатить и подписывайтесь на наш канал в Telegram.

Serpstat — набор инструментов для поискового маркетинга!

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

Набор инструментов для экономии времени на выполнение SEO-задач.

7 дней бесплатно

Оцените статью по 5-бальной шкале

3.68 из 5 на основе 28 оценок

Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.

Рекомендуемые статьи

How-to

Анастасия Сотула

Покупка трафика: как купить трафик на сайт и где это сделать

SEO +1

Ilkhom Chakkanbaev

Как задать в robots. txt директивы для роботов Google

How-to

Denys Kondak

Как настроить мониторинг упоминаний бренда в сети

Кейсы, лайфхаки, исследования и полезные статьи

Не успеваешь следить за новостями? Не беда! Наш любимый редактор подберет материалы, которые точно помогут в работе. Только полезные статьи, реальные кейсы и новости Serpstat раз в неделю. Присоединяйся к уютному комьюнити 🙂

Нажимая кнопку, ты соглашаешься с нашей политикой конфиденциальности.

Поделитесь статьей с вашими друзьями

Вы уверены?

Спасибо, мы сохранили ваши новые настройки рассылок.

Сообщить об ошибке

Отменить

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

Кроссбраузерность — это важное свойство сайта, позволяющее ему идентично выполнять работу и правильно отображаться в любом браузере. Не должно быть места развалам верстки, весь материал должен оставаться одинаково читабельным. Сайт можно проверять в разных браузерах и системах десятками способов с помощью приложений, онлайн-сервисов и установив при этом одновременно несколько браузеров.

1. Browsera

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

2. Browser Stack

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

3. Browsershots

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

4. Browser Sandbox

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

5. IE Testers

Для тех, кто имеет проблемы с правильным отображением сайта в IE, предназначены такие инструменты как браузер Microsoft Edge, My Debugbar и Netrenderer. Более удобной платформой можно назвать Microsoft Edge, который даст возможность получения скриншота сайта в различных браузерах (даже мобильных).

6. CrossBrowserTesting

Характеризуется использованием реальных устройств для тестов и это даёт исчерпывающую информацию. Функционал огромен и инструмент точно будет стоить потраченных на него денег. Насчитывает около тысячи браузеров и операционных систем. Также он позволяет провести тестирование сайта в реальном времени, чтобы проверить как работают HTML-формы, Flash и т.д. Ещё можно сравнивать скриншоты и автоматизировать тесты.

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

Кросс-браузерное тестирование на совместимость помимо Chrome

Кросс-браузерное тестирование на совместимость в последние годы набирает обороты, и для этого есть причина. В то время как технологии развиваются быстро, люди — нет. Значительное количество людей сопротивляются изменениям, или, точнее, «отказываются от обновления своих технологий». В этом сценарии именно тестирование совместимости браузера позволяет компаниям гарантировать, что ни один клиент не останется позади или не получит нежелательного опыта. Таким образом, несмотря на то, что на рынке доминируют такие браузеры, как Google Chrome и Firefox, есть люди, использующие их старые версии или другие браузеры. И их число слишком велико, чтобы игнорировать его.

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

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

Как это повлияет на ваше приложение?

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

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

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

Поскольку невозможно протестировать все возможные комбинации браузера и устройства, вам необходимо составить список наиболее важных для тестирования вашего веб-приложения. По состоянию на ноябрь 2022 года наибольшее количество пользователей имеет Google Chrome. На ее долю приходится более 65 % рынка. Safari занимает второе место с долей рынка более 18%, за ним следуют Edge (4,45%) и Firefox (3,04%). В то время как другие, такие как Samsung Internet и Opera, имеют долю рынка примерно по 2-3% каждая, в то время как IE имеет менее 1% доли мирового рынка.

Бесплатная проверка кросс-браузерной совместимости

В то время как установленное понятие предполагает, что Google Chrome и Firefox имеют решающее значение для каждого бизнес-сайта. Тем не менее, такие браузеры, как Safari, Edge и Internet Explorer, также должны быть частью тестирования, и их подмножество может быть выбрано в зависимости от вашего трафика.

Источник: Statcounter

Достаточно ли объема и доли рынка, чтобы выбрать браузеры для тестирования?

Ответ: нет. Во-первых, решение, основанное исключительно на объеме, не учитывает ряд браузеров на рынке. Ваш целевой рынок также следует учитывать. Например, Windows XP по-прежнему используется миллионами людей, и эти пользователи, скорее всего, будут использовать Internet Explorer. Если ваш целевой рынок использует IE, ваш веб-сайт должен быть совместим с IE.

Другими важными факторами, влияющими на это решение, могут быть бизнес-показатели и добавленная стоимость. Safari — второй по популярности браузер, большинство пользователей используют его на устройствах Apple, что является разумным показателем высокой покупательной способности. Эти факторы делают Safari важным браузером для тестирования, несмотря на то, что его количество пользователей относительно меньше, чем у Chrome.

Кроме того, поскольку 60% трафика веб-сайтов приходится на мобильные устройства, очевидно, что пользователи заходят на веб-сайты со своих смартфонов. Следовательно, для обеспечения совместимости веб-сайтов с мобильными устройствами тестирование веб-сайтов в мобильных браузерах, таких как Samsung Internet, необходимо для расширения охвата. Даже традиционные браузеры, такие как Chrome и Safari, должны быть протестированы на мобильные версии, чтобы пользователи могли беспрепятственно получать доступ к веб-сайтам из этих мобильных браузеров.

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

Являются ли такие браузеры, как Edge, Safari, Samsung Internet и IE, по-прежнему актуальными для межбраузерной совместимости?

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

Safari в основном используется пользователями Apple iPhone, Mac и iPad, которые могут тратить значительно больше, чем пользователи других устройств. Например, это может относиться к люксовым брендам.

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

Учитывая тот факт, что Edge был запущен с Windows 10, многие люди, использующие предыдущие версии Windows, по-прежнему используют IE, несмотря на отсутствие производительности и функций. Edge еще не появился с точки зрения доли рынка с более новыми версиями ОС Windows.

Поскольку Samsung является широко используемым устройством Android, Samsung Internet владеет 2,68% долей мирового рынка браузеров, что очень близко к доле Firefox, что делает его важным браузером для тестирования вашего веб-сайта.

Давайте посмотрим на конкретные рынки, такие как Германия, Великобритания и США, чтобы определить, имеют ли такие браузеры, как Safari, IE и Edge, большее значение, чем мы думаем.

Модель использования браузеров в Германии

Доля Германии на рынке веб-браузеров в 2021 году показывает, что Google Chrome является наиболее используемым веб-браузером, за ним следуют Safari и Firefox. Edge также занимает значительную долю рынка — 6,78%. Samsung Internet используют 4,82%, а Opera — 4,06% пользователей для доступа к веб-сайтам.

Интересно, что интернет-браузер Samsung занимает 5-е место в Германии с чуть большей долей рынка, чем Opera. Для предприятий, имеющих рынок в Германии, будет важна совместимость с этими браузерами. И, следовательно, следует планировать кросс-браузерное тестирование, помня об этом.

Источник: Statista. Но Safari также владеет значительной долей 33,72% и Edge занимает 6,58% превосходя Firefox с точки зрения доли рынка веб-браузеров. В то время как Safari лидирует на рынке мобильных браузеров в Великобритании с 51% , за ним следует Chrome с 39,25% и Samsung Internet с 7,92% . Далее показано, как игнорирование определенных браузеров на основе доли мирового рынка может повлиять на итоговый результат для компаний, работающих в разных регионах.

Шаблон использования браузера в США

Прибыв в США, Chrome, Safari, Edge и Firefox заслуживают внимания.

Источник: Statcounter

После анализа доли рынка браузеров по регионам становится ясно, что Edge, Safari и Samsung Internet важны для кросс-браузерной совместимости помимо Chrome и Firefox, в дополнение к мобильной версии этих браузеров. Это сводится к целевой аудитории вашего бизнеса. Политика компании также может влиять на выбор браузеров. В то время как частные организации могут выбирать, какие браузеры они поддерживают, правительство. порталы нет. Они должны быть совместимы с каждым браузером, чтобы каждый в открытом доступе имел доступ к информации и услугам.

Попробуйте бесплатное тестирование на кросс-браузерную совместимость

Поиск правильного баланса

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

Как выполнить тестирование на кросс-браузерную совместимость с учетом осуществимости?

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

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

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

Несколько передовых практик, которые следует учитывать при кроссбраузерном тестировании на совместимость

1. Изучите свою аудиторию:
   Очень важно провести исследование рынка для целевой аудитории, прежде чем непосредственно начинать кроссбраузерное тестирование случайным образом. Это помогает анализировать правильный набор браузеров, используемых аудиторией в определенных регионах.
2. Подготовьте матрицу браузеров:
   Этот шаг включает подготовку списка браузеров, для которых необходимо протестировать приложение. Это помогает ограничить усилия по разработке и тестированию определенным набором браузеров и устройств.
   Ограничение количества поддерживаемых браузеров помогает командам сосредоточиться на самых популярных, релевантных их целевой аудитории. Это также помогает уменьшить подверженность веб-сайта кросс-браузерным ошибкам. Узнайте больше о матрице совместимости браузеров.
3. Выберите правильный инструмент автоматизации:
   Тестирование кросс-браузерной совместимости — сложная задача, и для ее достижения необходима автоматизация. Следовательно, для команд также важно выбрать правильный набор инструментов и сред, которые помогут им быстрее достичь полного покрытия тестами. Ищите инструменты, которые просты в использовании и позволяют тестировать максимальное количество браузеров.
4. Тестирование в браузерах реальных устройств:
   Выполнение кросс-браузерных тестов на реальных устройствах помогает выявить ошибки, с которыми конечный пользователь может столкнуться в реальном мире. Эти ошибки можно не заметить при тестировании с использованием эмуляторов или симуляторов.

В двух словах

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

Введение в кросс-браузерное тестирование — изучение веб-разработки

• Обзор: кросс-браузерное тестирование
• Следующий

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

Предпосылки:	Знание ядра HTML, CSS и Языки JavaScript.
Цель:	Чтобы получить представление о концепциях высокого уровня, связанных с кросс-браузерным тестированием.

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

• Различные браузеры, в том числе немного более старые, которые не поддерживают все последние функции JS/CSS.
• Различные устройства, от настольных компьютеров и ноутбуков до планшетов и смартфонов и смарт-телевизоров, с различными аппаратными возможностями.
• Люди с ограниченными возможностями, которые могут полагаться на вспомогательные технологии, такие как программы чтения с экрана, или использовать только клавиатуру.

Помните, что вы не являетесь вашими пользователями — то, что ваш сайт работает на вашем MacBook Pro или топовом Galaxy Nexus, не означает, что он будет работать для всех ваших пользователей!

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

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

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

Существует много разных причин, по которым возникают проблемы с разными браузерами, и обратите внимание, что здесь мы говорим о проблемах, из-за которых вещи ведут себя по-разному в разных браузерах/устройствах/предпочтениях просмотра. Еще до того, как вы приступите к кросс-браузерным проблемам, у вас уже должны быть исправлены ошибки в коде (см. Отладка HTML, Отладка CSS и Что пошло не так? Устранение неполадок JavaScript из предыдущих разделов, чтобы при необходимости освежить память).

Кроссбраузерные проблемы обычно возникают из-за того, что:

• иногда браузеры содержат ошибки или по-разному реализуют функции. Эта ситуация намного менее плоха, чем раньше; когда IE4 и Netscape 4 конкурировали за звание доминирующего браузера в 1990-х годах, браузерные компании сознательно реализовывали вещи по-разному, чтобы попытаться получить конкурентное преимущество, что превратило жизнь разработчиков в ад. В наши дни браузеры намного лучше следуют стандартам, но иногда все еще проскальзывают различия и ошибки.
• некоторые браузеры могут иметь разные уровни поддержки технологических функций, чем другие. Это неизбежно, когда вы имеете дело с передовыми функциями, которые браузеры только начинают реализовывать, или если вам нужно поддерживать очень старые браузеры, которые больше не разрабатываются, которые, возможно, были заморожены (т. ) задолго до того, как была изобретена новая функция. Например, если вы хотите использовать передовые функции JavaScript на своем сайте, они могут не работать в старых браузерах. Если вам нужно поддерживать старые браузеры, вам, возможно, придется не использовать их или преобразовать свой код в старомодный синтаксис, используя какой-либо кросс-компилятор, где это необходимо.
• некоторые устройства могут иметь ограничения, из-за которых веб-сайт работает медленно или плохо отображается. Например, если сайт был спроектирован так, чтобы хорошо выглядеть на настольном ПК, он, вероятно, будет выглядеть крошечным и его будет трудно читать на мобильном устройстве. Если ваш сайт включает в себя множество больших анимаций, это может быть нормально на планшете с высокими характеристиками, но может быть вялым или прерывистым на бюджетном устройстве.

…и другие причины.

В последующих статьях мы рассмотрим распространенные кроссбраузерные проблемы и рассмотрим их решения.

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

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

Рабочий процесс тестирования и исправления ошибок в проекте можно разбить примерно на следующие четыре этапа (это очень грубо — разные люди могут делать что-то совсем по-другому):

Начальное планирование > Разработка > Тестирование/обнаружение > Исправления/итерация

Шаги 2–4 повторяются столько раз, сколько необходимо для выполнения всей реализации. Мы рассмотрим различные части процесса тестирования более подробно в последующих статьях, а пока давайте просто подытожим, что может произойти на каждом этапе.

Первоначальное планирование

На начальном этапе планирования у вас, вероятно, будет несколько совещаний по планированию с владельцем сайта/клиентом (это может быть ваш начальник или кто-то из сторонней компании, для которой вы создаете сайт), на которых вы определите каким именно должен быть веб-сайт — какой контент и функциональность он должен иметь, как он должен выглядеть и т. д. На этом этапе вы также захотите узнать, сколько времени у вас есть на разработку сайта — каковы их сроки и сколько они собираются платить вам за вашу работу? Мы не будем вдаваться в подробности, но кроссбраузерность может серьезно повлиять на такое планирование.

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

Например, вы создаете сайт электронной коммерции, обслуживающий клиентов в Северной Америке. Сайт должен полностью работать в нескольких последних версиях самых популярных настольных и мобильных (iOS, Android, Windows phone) браузеров, включая Chrome (и Opera, поскольку он основан на том же движке рендеринга, что и Chrome), Firefox, IE. /Эдж и Сафари. Он также должен обеспечивать приемлемое взаимодействие с IE 8 и 9 и быть доступным в соответствии с WCAG AA.

Теперь, когда вы знаете свои целевые платформы для тестирования, вам следует вернуться назад и просмотреть требуемый набор функций и технологии, которые вы собираетесь использовать. Например, если владелец сайта электронной коммерции хочет, чтобы 3D-тур с поддержкой WebGL был встроен в страницы продуктов, ему нужно будет признать, что это просто не будет работать в версиях IE до 11. Вам придется согласиться. предоставить версию сайта без этой функции пользователям более старых версий IE.

Вам следует составить список потенциальных проблемных мест.

Примечание: Вы можете найти информацию о поддержке браузером технологий, просматривая различные функции на MDN — сайте, на котором вы находитесь! Вам также следует посетить сайт caniuse.com для получения дополнительной полезной информации.

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

Разработка

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

Существует несколько общих стратегий кросс-браузерной разработки, например:

• Максимально точно работайте со всеми функциями во всех целевых браузерах. Это может включать в себя написание различных путей кода, которые по-разному воспроизводят функциональные возможности, предназначенные для разных браузеров, или использование Polyfill для имитации любой отсутствующей поддержки с использованием JavaScript или других технологий, или использование библиотеки, которая позволяет вам написать один бит кода, а затем разные вещи в фоновом режиме в зависимости от того, что поддерживает браузер.
• Согласитесь с тем, что некоторые вещи не будут работать одинаково во всех браузерах, и предоставьте разные (приемлемые) решения в браузерах, которые не поддерживают полную функциональность. Иногда это неизбежно из-за ограничений устройства — широкоэкранный кинотеатр не будет давать такого же визуального восприятия, как 4-дюймовый мобильный экран, независимо от того, как вы программируете свой сайт.
• Примите тот факт, что ваш сайт просто не будет работать в некоторых старых браузерах, и двигайтесь дальше. Это нормально, если ваш клиент/пользовательская база согласны с этим.

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

Тестирование/обнаружение

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

1. Протестируйте ее в нескольких стабильных браузерах в вашей системе, таких как Firefox, Safari, Chrome или IE/Edge. .
2. Проведите некоторые тесты на доступность lo-fi, например, попытайтесь использовать свой сайт только с клавиатуры или используйте свой сайт с помощью программы чтения с экрана, чтобы проверить, доступна ли навигация по нему.
3. Протестируйте на мобильной платформе, такой как Android или iOS.

На этом этапе исправьте все проблемы, обнаруженные в новом коде.

Затем вам следует попробовать расширить список тестовых браузеров до полного списка браузеров целевой аудитории и начать концентрироваться на отсеивании кроссбраузерных проблем (дополнительную информацию об определении целевых браузеров см. в следующей статье). Например:

• Попробуйте протестировать последние изменения во всех доступных современных настольных браузерах, включая Firefox, Chrome, Opera, IE, Edge и Safari для настольных компьютеров (в идеале — Mac, Windows и Linux).
• Протестируйте его в распространенных браузерах телефонов и планшетов (например, iOS Safari на iPhone/iPad, Chrome и Firefox на iPhone/iPad/Android),
• Также выполните тесты в любых других браузерах, которые вы включили в свой целевой список.

Самый простой вариант — просто провести все возможные тесты самостоятельно (привлекая на помощь товарищей по команде, если вы работаете в команде). Вы должны попытаться протестировать его на реальных физических устройствах, где это возможно.

Если у вас нет средств для тестирования всех этих различных комбинаций браузеров, операционных систем и устройств на физическом оборудовании, вы также можете использовать эмуляторы (эмулировать устройство с помощью программного обеспечения на вашем настольном компьютере) и виртуальные машины (программное обеспечение). который позволяет вам эмулировать несколько комбинаций операционной системы и программного обеспечения на вашем настольном компьютере). Это очень популярный выбор, особенно в некоторых случаях — например, Windows не позволяет вам одновременно устанавливать несколько версий Windows на одном компьютере, поэтому использование нескольких виртуальных машин часто является единственным вариантом.

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

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

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

Если вы хотите вложить деньги в тестирование, существуют также коммерческие инструменты, которые могут автоматизировать большую часть настройки и тестирования (например, Sauce Labs и Browser Stack). Эти виды инструментов обычно обеспечивают непрерывный рабочий процесс интеграции, в котором изменения кода автоматически проверяются, прежде чем их разрешат отправить в ваш репозиторий кода.

Тестирование на предварительных версиях браузеров

Часто бывает полезно протестировать на предварительных версиях браузеров; см. следующие ссылки:

• Firefox Developer Edition
• Программа предварительной оценки Microsoft Edge
• Обзор технологии Safari
• Хром Канарейка
• Разработчик Opera

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

Исправления/итерации

Как только вы обнаружили ошибку, вам нужно попытаться ее исправить.

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

Возможно, это не ваша вина — если в браузере есть ошибка, мы надеемся, что поставщик быстро ее исправит. Возможно, она уже исправлена ​​— например, если ошибка присутствует в выпуске Firefox 49, но ее больше нет в Firefox Nightly (версия 52), значит, они исправили ее. Если это не исправлено, вы можете сообщить об ошибке (см. Сообщения об ошибках ниже).

Если это ваша вина, вам нужно это исправить! Для выяснения причины ошибки используется та же стратегия, что и для любой ошибки веб-разработки (опять же, см. Отладка HTML, Отладка CSS и Что пошло не так? Устранение неполадок JavaScript). Как только вы обнаружите, что вызывает вашу ошибку, вам нужно решить, как обойти ее в конкретном браузере, в котором она вызывает проблемы — вы не можете просто изменить код проблемы напрямую, так как это может нарушить код в других браузерах. . Общий подход обычно состоит в том, чтобы каким-то образом разветвить код, например, использовать код обнаружения функций JavaScript для обнаружения ситуаций, в которых проблемная функция не работает, и запускать какой-то другой код в тех случаях, когда это работает.

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

Повторим сказанное выше: если вы обнаружите ошибки в браузерах, вы должны сообщить о них:

• Firefox Bugzilla
• Средство отслеживания проблем EdgeHTML
• Сафари
• Хром
• Опера

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

This entry was posted in Популярное