В этой статье модуль начинается с обзора темы (кросс) браузерного тестирования, ответов на такие вопросы, как «что такое кроссбраузерное тестирование?», «С какими наиболее распространенными типами проблем вы столкнетесь?» И «Каковы основные подходы к тестированию, выявлению и устранению проблем?»

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

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

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

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

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

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

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

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

Во-вторых, когда мы говорим «в приемлемом количестве веб-браузеров», мы не имеем в виду 100% браузеров в мире - это практически невозможно. Вы можете сделать несколько информированных звонков о том, какие браузеры и устройства будут использовать ваши пользователи (как мы обсудим во второй статье этой серии - см. Нужно проверить их все?), Но вы не можете гарантировать все. Как веб-разработчик, вам необходимо согласовать с владельцем сайта ряд браузеров и устройств, над которыми обязательно должен работать код, но помимо этого, вам необходимо разработать защитный код, чтобы дать другим браузерам наилучшие шансы на то, чтобы используйте свой контент. Это одна из самых серьезных проблем веб-разработки.

Примечание. Защитное кодирование мы также рассмотрим позже в этом модуле.

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

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

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

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

и другие причины кроме того.

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

Рабочие процессы для кроссбраузерного тестирования

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

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

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

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

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

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

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

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

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

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

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

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

Как только вы согласовали эти детали, вы можете приступить к разработке сайта.

Разработка

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

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

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

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

Тестирование / открытие

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

  1. Протестируйте его в паре стабильных браузеров в вашей системе, таких как Firefox, Safari, Chrome или IE / Edge.
  2. Проведите небольшое тестирование доступности, например, попробуйте использовать свой сайт только с клавиатурой или используйте свой сайт с помощью программы чтения с экрана, чтобы проверить, доступен ли он для навигации.
  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, Endtest, LambdaTest, TestingBot и CrossBrowserTesting, которые делают это за вас, не беспокоясь о настройке, если вы хотите вложить немного денег в свое тестирование. Также можно настроить среду, которая автоматически запускает тесты для вас, а затем позволяет вам регистрировать свои изменения в центральном репозитории кода только в том случае, если тесты все еще проходят.

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

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

  • Версия для разработчиков Firefox
  • Предварительный просмотр Edge Insider
  • Предварительный просмотр технологии Safari
  • Chrome Canary
  • Разработчик Opera

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

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

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

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

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

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

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

Сообщение об ошибках

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

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

Резюме

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

Источник: developer.mozilla.org