В статье рассматриваются особенности предлагаемого подхода в процессе автоматизированного кроссбраузерного тестирования web-приложений.
Ключевые слова: кроссбраузерное тестирование , веб-приложение, cross-browser compatibility testing, image processing
Наиболее популярные подходы автоматизации кроссбраузерного тестирования интерфейса web-приложений используют идеи и инструментарий модульного тестирования. Рассматриваемый в статье подход к автоматизизации кроссбраузерного тестирования, основанный на сегментации и сравнении изображения, отражает также и особенности ручного кроссбраузерного тестирования.
Предлагаемый метод автоматизации кроссбраузерного тестирования состоит из четырех этапов.
Сначала делаются скриншоты веб-страницы в тестируемом браузере и в базовом браузере, где корректность рендеринга веб-страницы утверждается заранее.
Далее к полученным снимкам экрана применяется сегментация изображений, чтобы равномерно разделить их на области.
После этого применяется автоматического сопоставления и сравнения этих областей, извлеченных из тестируемого браузера и базового браузера.
И в конце применяются методы машинного обучения для классификации выявленных различий в приемлемые различия, основанные на попарных сравнениях выборок, проведенных реальными тестировщиками [4].
Вводная часть для этой фазы — это url-адрес тестируемой веб-страницы и конфигурации браузера, в которых предстоит провести тестирование. На выходе получается одно изображение всей отрисовки веб-страницы для каждой конфигурация браузера. Эти изображения используются для обнаружения несоответствий на более поздних этапах [1].
Рендеринг веб-страниц в различных конфигурациях требует больших вычислительных ресурсов. Поэтому предполагается запуск ряда виртуальных машин, которые воспроизведут каждую конфигурацию (эмулятор устройства, операционная система, настройки браузера). Для поддержки большого количество итерационных тестов, инструмент должен выдать результаты от нескольких секунд до нескольких минут. Для достижения этой цели применяется несколько оптимизаций. При этом загрузка и захват снимков экрана веб-страницы может занять до десятков секунд.
Чтобы получить результаты тестирования за секунды, необходимо распараллелить захват экрана. Это означает, что виртуальные машины, производящие скриншоты запускаются параллельно. Кроме того, для выполнения множества тестовых запросов от потенциально большого пула одновременно работающих пользователей, нужно добавить систему очередей. Например, использовать Resque — основанного на Redis, библиотеку Ruby для организации очередей и бэкэнд-обработки различных задач [3]. Разные рабочие (Ruby) процессы используются для различных задач: снимок экрана, изменение размера и сегментация изображения и сравнение регионов.
Такая архитектура делает систему асинхронный, что позволяет масштабировать систему по горизонтали.
Блок «Capture Worker» отвечает за создание снимков экрана (за открытие браузера, загрузку веб-страницы, настройку области просмотра браузера и снимаем скриншот). Worker захвата резервирует задание, опрашивая одну или несколько очередей, которые соответствуют установленным браузерам базовой операционной системы. Для каждой конфигурации есть специальный файл настроек, который включает точные координаты, область просмотра браузера. Когда Worker запускается впервые и когда настройки конфига для определенного конфигурации не найдены, размеры обрезки калибруются с помощью тестовой веб-страницы.
В течение этой процедуры определяется размер и положение области просмотра и его полос прокрутки, а также некоторые специфичные для браузера атрибуты измеряются и сохраняются в файле конфигурации. Затем эти параметры используются для захвата экрана.
Автоматизация процессора захвата браузера выполняется основе Selenium WebDriver, основанный на связи JSON между сервером WebDriver и клиентом. Это решение позволяет автоматизировать большинство манипуляций с браузером, за исключением того факта, что библиотека WebDriver не имеет полной поддержки конфигурации OSX Safari, поэтому для этой цели вместо Selenium WebDriver используется библиотека WatiR Ruby для автоматизации OSX Safari.
В процессе захвата используются два альтернативных метода для получения изображения на всю страницу.
Первый метод прокручивает веб-страницу и сшивает части изображения в полноразмерное изображение. Второй метод изменяет размер окна браузера, чтобы он соответствовал полному размеру веб-страницы, после которого изображение может быть сразу захвачено [2].
Второй способ намного быстрее и надежнее по сравнению с первым. Дополнительно, используя первый способ, элементы веб-страницы с фиксированным положением на экране могут появляться несколько раз на разных сегментах изображения при прокрутке страницы — и, следовательно, это дублирование необходимо обнаруживать и устранять при сшивании нескольких изображений вместе, что иногда может приводить к неточности в полученном скриншоте. Следовательно, второй метод используется только тогда, когда первый не поддерживается данной платформой (например, OS X вместе с WatiR не поддерживает изменение размера окна, а Windows API умеет это делать).
Чтобы уменьшить время загрузки веб-страницы, все виртуальные машины маршрутизируются через прокси-сервер. Для этого планиурется использовать вэб-кеш и прокси-сервер Squid с открытым исходным кодом. Это позволит снизить нагрузку на удаленный веб-сервер и увеличить скорость загрузки. Данные веб-страницы кэшируется в течение достаточного количества времени, чтобы все рабочие могли загружать веб-страницу напрямую из кеша.
Таким образом, суть предлагаемого метода заключается в сегментация и сравнении изображений. Цель сегментации — разделить изображение (будь то базовое изображение или тестируемое изображение) на более мелкие сопоставимые области интереса. Области, извлеченные из снимка экрана, сделанного в базовом браузере, сравниваются с областями, извлеченными из тестируемого браузера на основе характерных особенностей. При этом используется машинный обучающийся классификатор для определения, — должны ли быть различия между двумя совпадающими областями снимка. Полученные во время исследования оценки показывают, что предлагаемый метод тестирования превосходит современные кросс-браузерные инструменты тестирования, основанные только на основе DOM-анализа.
Литература:
- S. Alcic and S. Conrad, “A clustering-based approach to web image context Extraction» in MMEDIA 2011, The Third International Conferences on Advances in Multimedia, 2011, pp. 74–79
- C. Harris and M. Stephens, “A combined corner and edge detector,” in Alvey vision conference, 2018, vol. 15, p. 50.
- Resque [Электронный ресурс] https://github.com/resque/resque [Дата обращения 01–06–2021].
- N. Semenenko, «Accurate diagnosis of cross-browser compatibility issues via machine learning» Masters Thesis, University of Tartu, Tartu, Estonia, 2013.
