Основы
Все web-приложения могут работать в разных браузерах: Google Chrome, Mozilla Firefox, Internet Explorer, Safari и других. Несмотря на то, что все эти браузеры в большинстве случаев работают одинаково и придерживаются веб-стандартов, между ними есть отличия, которые могут серьезно влиять на работу приложения. Когда разрабатывается приложение, у разработчика не всегда есть возможность тщательно протестировать новую фичу в разных браузерах. В таких случаях, кросс-браузерное тестирование проводит тестировщик.
Тестировщик запускает веб-приложение во всех поддерживаемых браузерах и тестирует всю функциональность приложения в каждом из них. Если в каком-то браузере приложение работает или выглядит не так, как было задумано, то создается подробный баг-репорт, включающий в себя название и версию браузера. Это помогает программисту исправлять/изменять поведение приложение в браузерах, где что-то пошло не так.
Чеклист кроссбраузерного тестирования
Команда создает список требований с описанием функций, которые будут протестированы, и целевые платформы/браузеры.
Базовая функциональность
В базовом варианте, или при нехватке времени, QA-команда может ограничиться следующим:
- Поля ввода (их валидация)
- Диалоговые окна и меню
- Отдельно проверка срабатывания функций на экранах мобильных девайсов, как частое проблемное место
- Дизайн: шрифты, стили, рисунки и фотографии, и в целом проверка компоновки
- Дизайн должен оставаться целостным после изменения ориентации и разрешения в браузере
Полная
В более расширенном варианте, на крупных проектах и при наличии времени, список шире:
- Валидация CSS
- Валидация HTML
- Валидация с включенным/выключенным JS на страницах
- Проверка Ajax и JQuery
- Валидация размеров шрифтов
- Проверка компоновки в разных разрешениях
- Рисунки, их расположение и особенно их «обтекание»
- Проверка «шапок и подвалов»
- Выравнивания текстов (по центру, слева/справа, по ширине и т.п.)
- Кастомные стили страниц
- Проверка отображения спецсимволов и кодировок
- Срабатывание зума
Выбор браузеров
Распространенность
В целом есть смысл обращать внимание на браузеры, имеющие долю более 5% на рынке в данный момент (если речь идет о более-менее глобальных проектах). Популярность браузеров сильно зависит от региона и страны. В данное время абсолютная необходимость — Google Chrome; разумеется, не стоит забывать о Safari, как о браузере на самой заметной платформе, с финансовой точки зрения. В «третьей группе» по приоритетности — Firefox, Opera, и другие малопопулярные браузеры. Что касается Edge, с ним вопрос непростой из-за большого количества версий этого не слишком распространенного (но все же часто необходимого) браузера; что касается IE, то стоит обращать внимание только на 10-ю версию.
Таблицы распространенности девайсов/платформ/браузеров, по регионам и странам:
Анализ трафика
Изучая Google Analytics и аналогичный инструмент Яндекса, можно получить реальные (и предположить возможные) данные по трафику, включая браузеры пользователей. Эти инструменты обеспечат более или менее полное понимание будущей ситуации с браузерами на проекте. Если этого окажется недостаточно, имеет смысл попробовать опросить пользователей.
Стоит ли тестировать максимальное количество версий браузеров? Определяется масштабом проекта и ограничениями по времени, а также от мнения маркетингового отдела и стейкхолдеров.
Автоматизация — есть ли смысл (да, всегда)
Ручное тестирование по сценариям это занятие, из-за своей однообразности всегда создающее вероятность ошибок, со временем объем задач растет, нагрузка тоже, как и расходы. Автоматизация часто единственный способ как-то справиться с «разбуханием» проекта и уложиться в сроки. Вместе с тем, какие-то задачи останутся на контроле ручных тестировщиков, особенно касающиеся UX в браузерах.
Планирование
Перед тем как приступить к планированию и выполнению кроссбраузерного тестирования, следует обеспечить следующее:
- Тест-кейсы должны быть в готовом виде
- Дизайн и мокапы, соответствующие требованиям проекта
- Готовы тестовые инструменты (и девайсы)
Планирование предполагает вполне стандартные этапы — распределение задач с указанием членов команды, ответственных за отдельные браузеры и платформы, и т.п.
Выполнение автоматизированного кроссбраузерного тестирования более-менее полно освещено в соответствующем туториале. К этому можно добавить, что кроссбраузерное тестирование требует также проведения регрессионного тестирования, хотя бы один раз на каждый браузер, чтобы не допустить ошибок и улучшить свое понимание проблемных мест в продукте.
Типичные проблемы
- Разметка. То, что заметно сразу, и некорректно отображается в браузерах; чаще всего связано с CSS, Canvas, и DOM. Неверное расположение текста и рисунков, шрифты и т.п.
- При тестировании компоновки страницы не следует забывать о негативном тестировании — ибо пользователь всегда что-то сделает «не так».
- Мобильное тестирование, а именно тачскрины, не всегда корректно отрабатывают касания.
- Проверка наведения мыши (hovering), особенно меню, которые должны открываться при наведении мыши, но не открываются.
- Internet Explorer — он существует (еще), и приносит множество проблем тестировщикам. Всякий раз когда где-то открывается IE, возникает хотя бы пару ошибок на фронтенде.
Инструменты
В целом, для полноты и надежности всегда лучше реальные девайсы. Если же условия не так критичны, или на проекте нет такой возможности, всегда остаются эмуляторы/симуляторы/виртуальные машины.
- Можно симулировать девайсы через DevTools в Google Chrome и Firefox.
- Дебаг на мобильных девайсах доступен через Fiddler/Android Studio/Xcode.
- Существует огромное количество удобных облачных сервисов (платных).
- В не очень больших проектах вполне достаточно бесплатных инструментов
Далее примерный список из 16 актуальных инструментов кроссбраузерного тестирования, состоянием на начало 2023 г.
- TestComplete
- BitBar
- QA Wolf
- Katalon Platform
- HeadSpin
- Browsershots
- Turbo Browser Sandbox
- IE NetRenderer
- Browsera
- IETester
- BrowserStack Live
- Browserling
- Ranorex Studio
- Experitest
- Comparium
- LambdaTest
TestComplete
Чем хорош:
- Автоматизация функционального тестирования в облаке
- Параллельное выполнение в 2000+ окружениях
- Актуальные девайсы, разрешения и браузеры
- Поддерживает ЯПы Python и JS
- Есть запись и воспроизведение для создания UI-тестов по шаблону
BitBar
Функции:
- Облачное параллельное тестирование на всех платформах — веб/нативные/гибридные приложения
- Интеграция с CI-CD-инструментами
- Реальные хорошо настроенные тестовые окружения
- Применение Appium и Selenium в облаке
QA Wolf
Новый инструмент и уже по 3000 звезд на GitHub. Даже в бесплатном варианте неплохая функциональность.
Функции:
- Создание тестов в браузере, без утомительной настройки
- Без boilerplate-кода и изучения ЯПов — генерирует JS-код при навигации по сайту, затем по этому шаблону делаются другие тесты
- Отдельное выполнение проблемной части кода
- 100% параллельное выполнение
- Уведомления на Slack и мейл
- Воспроизведение в видеороликах, также удобные логи
- Повторный запуск и фикс тестов прямо в браузере, не ожидая следующего CI-билда
Katalon Platform
На платформе более 800 тысяч зарегистрированных тестировщиков.
Функции:
- Поддержка всех версий Chrome/Firefox/Edge
- Headless-выполнение в Chrome/Firefox
- Легкая миграция из Selenium Grid/Webdrive/IDE, и из Postman и SoapUI
- Беспроблемная работа с Page Object Model
- Функция автоматической коррекции тестов (Self-healing) при изменениях кода и UI приложения
- Встроенная отлаженная интеграция с CI/CD-инструментами Jenkins, AzureDevops, CircleCI, Bamboo, TeamCity, TravisCI
- Интеграция с другими инструментами к/б тестирования типа LambdaTest, BrowserStack, Perfecto, Kobiton, SauceLabs
- Продвинутая графическая часть для демонстрации менеджменту успехов QA-команды
- А также метрики, и интеграция со Slack, Git, Microsoft Teams
HeadSpin
- Колоссальная ферма из многих тысяч реальных девайсов
- Интеграция с Appium, Appium Inspector, и Selenium. Совместимость с десятками других QA-инструментов и технологий: Charles Proxy, Xcode, Android Studio, Flutter, Cucumber, Espresso Android, Experitest, WebPage Test, FitNesse, KIF, UI Automator, Junit, XCTest, Calabash, Unified Functional Testing, TestNG, Puppeteer, Playwright, Jira, Slack, Jenkins.
Browsershots
- Делает скриншоты
- Поддерживает любые платформы и ОС
- Около 200 версий браузеров
- Включая мало распространенные браузеры
- Настраиваемость (кастомизация)
- Этот инструмент — бесплатный
Turbo Browser Sandbox
- Поддерживает самые распространенные браузеры
- Раньше был бесплатным сервисом, а теперь вот так
- Но удобный и простой
IE NetRenderer
- Бесплатный инструмент проверки сайтов на совместимость с Internet Explorer всех версий.
- Снимает скриншоты
- Есть еще аддон для Firefox — IENetRenderer
Browsera
- Один из лучших инструментов в данном обзоре для поиска проблем с разметкой/компоновкой
- А также проблем с JS
- «Динамическое» тестирование страницы
- Умеет «заглядывать» на страницу, защищенную логином/паролем
- Не требует инсталляции
IETester
Еще один «тулз» тестирования совместимости с IE всех версий на ОС Windows.
BrowserStack Live
Известная платформа тестирования.
- Поддерживает более 2000 браузеров
- Android и iOS девайсы в облаке
- Не требует настройки
Browserling
- Интерактивное тестирование в своем браузере
- Поддерживает все последние версии браузеров
- Делает скриншоты
- Хорошо проверяет респонсивность
- Есть API
- Есть аддоны для Chrome и Firefox
Ranorex Studio
- All-in-one корпоративное решение, поддерживающее все веб-технологии
- В том числе сложные и редко применяемые, типа CEF и JxBrowser
- Идентификация объектов с динамическими ID
- Репозиторий объектов
- Поддержка Data-Driven и Keyword-Driven тестирования
- Кастомные репорты с видео без перезапуска теста
- Интеграция с Selenium Grid и WebDriver
- А также со всеми рабочими QA-инструментами типа Jira, Jenkins, TestRail, Git, TravisCI
Digital.ai (бывший Experitest)
- Все нужные браузеры
- Реалтайм-взаимодействие с приложением в браузере и его дебаг
- Параллельное выполнение до 100 тестов
- Интеграция с CI/CD
- Визуальное тестирование — проверка респонсивности интерфейса на разных разрешениях
- Яркие репорты с видео, скриншотами
Comparium
- Простой инструмент снятия скриншотов и их дальнейшей обработки
- Автоматическое определение и выделение визуальной разницы отображения в браузерах
- Не требует установки
LambdaTest
Мощная и очень известная платформа облачного тестирования.
- Ориентирована в первую очередь на Selenium (Grid)
- Скриншоты и проверка респонсивности
- SSH
- Поддерживает все важные инструменты типа Slack, Trello, GitHub, MS VSTS
***