Кроссбраузерное тестирование - как запустить, кейсы, инструменты и распространенные проблемы

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

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

Важность тестирования в разных версиях браузера

Во-первых, не все люди используют один и тот же браузер.

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

Теперь давайте посмотрим на другие сценарии ...

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

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

Каждая часть HTML, CSS, JavaScript уникальна в разных браузерах; некоторые вещи могут поддерживаться в одном браузере, но не в другом. Выполняя этот тип тестирования, вы помогаете разработчику определить, в каком браузере и его версии возникают эти проблемы.

Какие функции анализируются в тесте браузера?

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

1. Базовая функциональность: чтобы гарантировать, что простые вещи работают в большинстве комбинаций браузера и ОС.

• Все поля ввода и их проверка
• Диалоговые окна и меню работают должным образом
• Сенсорный ввод на мобильных устройствах

2. Дизайн. Чтобы шрифты, стили, изображения и макеты соответствовали требованиям, присланным дизайнерами.

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

Как выбрать браузеры?

Есть два простых способа выбрать любой из множества браузеров.

1. На основе популярности: выбирайте браузеры, которые могут преодолеть 5-процентный барьер по глобальной статистике. Так, например, в 2020 году вы выберете Google Chrome, Safari, Mozilla Firefox, Microsoft Edge и IE. Что касается IE, это немного сложно, потому что существует множество версий этого браузера. Мы рекомендуем поддерживать только IE 10, потому что IE 8 и 9 слишком старые и их трудно поддерживать.

2. На основе анализа: если у вас есть инструменты аналитики (Google Analytics и т. Д.), Которые отслеживают всю статистику трафика, вы будете иметь полное представление о том, что используют ваши клиенты, и это будет легко принять решение. Если нет, вы можете попытаться лучше узнать своего клиента, создав несколько опросов и т. Д. Стоит ли поддерживать все версии разных браузеров? Это зависит от того, согласны ли вы с тем, что время разработки и тестирования каждый раз будет увеличиваться. В любом случае, в конечном итоге вам придется пожертвовать поддержкой старых версий.

Решение о том, какие браузеры и платформы выбрать, зависит от бизнес-команды и маркетинговой команды.

Как планировать и проводить тесты?

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

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

Когда вы планируете, не забудьте указать, кто будет отвечать за какую комбинацию браузера / платформы, и назначить тестовые примеры для выполнения ответственному лицу.

Инструменты для тестирования совместимости браузера

• Если у вас нет возможности иметь физические устройства в вашем проекте, вы можете использовать какой-нибудь эмулятор / симулятор / виртуальную машину. Для мобильных устройств рассмотрите следующие варианты:
  • Вы можете моделировать устройства с помощью инструментов разработчика, которые используются по умолчанию в Google Chrome или Mozilla Firefox.
  • Fiddler / Android studio / Xcode, если вам нужно отладить или воспроизвести проблему с вашим мобильным устройством.
• В качестве примера виртуальной машины вы можете использовать виртуальный ящик или что-нибудь подобное, что вам нравится.
• Для разных браузеров вы можете использовать некоторые платные облачные сервисы, которые предоставят вам целый ряд комбинаций браузера / платформы.

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

Ручное и автоматическое кроссбраузерное тестирование

Давайте поговорим о ручном и автоматическом исполнении.

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

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

В современном мире в большинстве проектов есть как ручные, так и автоматические тестеры в одном проекте. Ручные тестировщики проводят исследовательское тестирование, чтобы найти болевые точки в UX (то есть, если мы говорим только о части тестирования FE), а специалисты по автоматизации автоматизируют сценарии, которые выполняются каждый раз.

Распространенные проблемы при кроссбраузерном тестировании

1. Internet Explorer: Да, вы правильно прочитали! В отдельную категорию я выделил IE. Это самый сложный для тестирования браузер. Каждый тестировщик QA знает, что, открывая Internet Explorer, он обнаруживает пару ошибок. Здесь можно сломать все, что связано с передком. Об этом нужно помнить и не забывать проверять свое приложение в IE.

2. Макет: это самая заметная проблема, которую вы можете найти. По сути, все это связано с CSS, Canvas или DOM. Различные ошибки варьируются от неправильного положения текста или изображения до небольших проблем, таких как неправильный шрифт. Не забывайте и о негативном тестировании, например, о закрытии всплывающей формы, щелкнув где-нибудь за пределами формы.

3. Касания и щелчки. Не так просто манипулировать различными типами ввода, особенно сейчас, когда планшеты и телефоны генерируют прикосновения, которые могут или не могут действовать как щелчок мыши.

4. Наведение: если у вас есть меню, которое открывается при наведении на него мыши, не забудьте также проверить его. Иногда наведение никогда не заканчивается, иногда событие наведения указывает не на тот элемент, иногда оно не открывается вообще.

Нижняя граница

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