Кроссбраузерность — Введение в тестирование веб-приложений

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

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

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

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

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

Задача тестировщика — проверка сайта в разных браузерах и на разных устройствах. Разберем, на что обращает внимание тестировщик при тестировании кроссбраузерности.

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

За эти пункты отвечает язык CSS — таблица стилей, которая определяет, как правильно визуально должна выводиться информация. К этому относятся шрифт, размеры, цвета, расположение.

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

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

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

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

Не стоит гнаться за очень старыми версиями браузеров. Достаточна поддержка версий до года-двух, так как они обновляются в автоматическом режиме. Посмотрите на главную страницу Хекслета в браузере Internet Explorer 11, который вышел в 2013 году:

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

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

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

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

При тестировании кроссбраузерности проверяется:

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

Чтобы протестировать разные версии браузеров, используют следующие способы:

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