ПРОГРАММНЫЙ МОДУЛЬ АВТОМАТИЧЕСКОГО ОПРЕДЕЛЕНИЯ ЭЛЕМЕНТОВ ПОЛЬЗОВАТЕЛЬСКОГО ИНТЕРФЕЙСА ВЕБ-ПРИЛОЖЕНИЙ НА ОСНОВЕ YOLOV8

1. Введение

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

Доминирующие подходы к автоматизации UI-тестирования веб-приложений основаны на программном взаимодействии с Document Object Model (DOM) посредством инструментов Selenium, Playwright и Cypress. Ключевой проблемой данных подходов является хрупкость тестовых скриптов: изменения в структуре HTML, модификация CSS-классов или идентификаторов элементов приводят к массовому отказу тестов даже при неизменном визуальном представлении интерфейса. Эмпирическое исследование, проведённое на материале 453 версий пяти веб-приложений с открытым исходным кодом, выявило 1065 случаев поломок автоматизированных тестов, подавляющее большинство которых вызвано изменениями структурных характеристик элементов, не затрагивающими функциональность [1, с. 181].

Проблема усугубляется при применении современных фронтенд-фреймворков React, Vue.js, Angular, генерирующих динамические идентификаторы, а также при тестировании приложений на базе Canvas и WebGL, не предоставляющих доступ к DOM-дереву. Методы компьютерного зрения и глубокого обучения открывают принципиально новые возможности для преодоления указанных ограничений. Визуальная идентификация UI-элементов по скриншоту веб-страницы обеспечивает независимость от структуры DOM и устойчивость к рефакторингу кода. Целью настоящей работы является разработка программного модуля, реализующего данный подход, и его экспериментальная оценка.

2. Анализ существующих подходов

Визуальные методы тестирования интерфейсов исследуются начиная с работ T. Yeh, T.-H. Chang и R. Miller, где разработана система Sikuli, взаимодействующая с UI-элементами на основе визуального сопоставления образов [2, с. 184]. Ограниченность классических методов компьютерного зрения (шаблонное сопоставление, анализ контуров) преодолевается применением глубоких нейронных сетей.

Среди нейросетевых архитектур обнаружения объектов ключевыми направлениями являются двухэтапные детекторы семейства R-CNN, одноэтапные детекторы YOLO и трансформерные модели DETR / RT-DETR. Сравнительный анализ показал, что архитектуры YOLOv8 обеспечивают оптимальное сочетание точности, скорости инференса и зрелости экосистемы для задачи детектирования UI-элементов [3].

Для обучения моделей разработан ряд специализированных наборов данных: RICO (мобильные интерфейсы, 72 219 скриншотов) [4, с. 846], WebUI (веб-интерфейсы, 400 000 скриншотов) [5], VINS и UIBert. Анализ показал, что WebUI наиболее соответствует целевому домену, а VINS обеспечивает детальную классификацию типовых элементов интерфейса.

В промышленной сфере разработаны коммерческие решения Applitools Eyes, Functionize, Percy by BrowserStack, однако детали их реализации остаются закрытыми, что ограничивает возможность адаптации под специфические требования. Актуальной остаётся задача проектирования открытых модулей визуальной идентификации UI-элементов, совмещающих высокую точность, приемлемую производительность и интеграцию с существующими инструментами тестирования.

3. Архитектура программного модуля

Разработанный модуль реализован на языке Python 3.10 и организован по схеме src-layout с применением Poetry для управления зависимостями и Docker для контейнеризации. Ключевыми компонентами являются: DetectorAPI — основной интерфейс модуля; YOLODetector — обёртка над моделью YOLOv8m; OCREngine — модуль оптического распознавания текста на базе Tesseract OCR; DetectorConfig, UIElement, BBox, DetectionResult, ElementType — модели данных с валидацией посредством Pydantic.

Архитектура модуля формализована посредством структурно-функциональной схемы, диаграммы потоков данных и трёх UML-диаграмм (прецедентов, последовательности, классов). Обработка изображения включает следующие этапы: приём и предобработка входного изображения; инференс модели YOLOv8m с получением ограничивающих рамок и меток классов; опциональное применение OCR к областям текстовых элементов; формирование структурированного ответа DetectionResult.

Для обучения модели применена многоэтапная стратегия transfer learning. На первом этапе выполнялась доменная адаптация на наборе WebUI: предобученная на COCO модель YOLOv8m дообучалась на веб-скриншотах. На втором этапе производилось уточнение классификатора на наборе VINS с детальной аннотацией типовых UI-компонентов (кнопки, поля ввода, флажки, переключатели, выпадающие списки, иконки, текстовые блоки).

4. Экспериментальная оценка

Экспериментальное исследование проводилось на тестовом наборе размеченных скриншотов веб-страниц, не входивших в обучающую выборку. Оценка качества выполнялась по метрикам precision, recall и mean Average Precision (mAP@0.5). Результаты представлены в таблице 1.

Таблица 1.

Результаты экспериментальной оценки модуля

Применение многоэтапной стратегии transfer learning обеспечило существенный прирост качества детектирования по всем метрикам: значение mAP@0.5 возросло с 0,54 до 0,78, средняя точность — с 0,61 до 0,82, средняя полнота — с 0,52 до 0,75. Достигнутые показатели согласуются с уровнем, представленным в исследовательской литературе для близких задач детектирования UI-элементов [6, с. 251].

Среднее время обработки одного изображения составило 268 мс при включённом OCR и 70 мс при отключённом, что обеспечивает применимость модуля в условиях массового запуска тестовых сценариев.

Для интеграции с фреймворком Selenium WebDriver разработана обёртка SelfHealingLocator, реализующая концепцию самовосстанавливающихся тестов. При отказе DOM-локатора SelfHealingLocator автоматически обращается к модулю визуального детектирования, получает координаты элемента по его визуальным характеристикам и выполняет взаимодействие с ним. Работоспособность подхода подтверждена на демонстрационном сценарии с имитацией рефакторинга идентификаторов элементов.

5. Заключение

В работе разработан программный модуль автоматического определения UI-элементов веб-приложений на основе нейросетевой архитектуры YOLOv8m и методов компьютерного зрения. Применение многоэтапной стратегии transfer learning позволило достичь значения mAP@0.5 порядка 0,78 при средней точности 0,82 и полноте 0,75. Среднее время обработки составляет 70–268 мс в зависимости от режима.

Разработанная обёртка SelfHealingLocator обеспечивает интеграцию модуля с Selenium WebDriver, реализуя концепцию самовосстанавливающихся тестов. Практическая значимость: снижение трудозатрат на поддержку автоматизированных тестов, расширение области применимости автоматизации на приложения с нестандартной разметкой (Canvas, WebGL, Shadow DOM), повышение достоверности тестовых результатов за счёт визуальной верификации элементов интерфейса.

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

Список литературы:

1. Hammoudi M., Rothermel G., Tonella P. Why do record/replay tests of web applications break? // 2016 IEEE International Conference on Software Testing, Verification and Validation (ICST). — Chicago, 2016. — P. 180–190.
2. Yeh T., Chang T.-H., Miller R. C. Sikuli: Using GUI screenshots for search and automation // Proceedings of the 22nd Annual ACM Symposium on User Interface Software and Technology. — New York : ACM, 2009. — P. 183–192.
3. Jocher G., Qiu J., Chaurasia A. Ultralytics YOLOv8 [Электронный ресурс]. — 2023. — URL: https://github.com/ultralytics/ultralytics (дата обращения: 01.04.2026).
4. RICO: A mobile app dataset for building data-driven design applications / B. Deka, Z. Huang, C. Franzen [и др.] // Proceedings of the 30th Annual ACM Symposium on User Interface Software and Technology (UIST). — New York : ACM, 2017. — P. 845–854.
5. WebUI: A dataset for enhancing visual UI understanding with web semantics / J. Wu, X. Wang, W. Wang [и др.] // Proceedings of the 2023 CHI Conference on Human Factors in Computing Systems. — New York : ACM, 2023. — Art. 591. — 14 p.
6. Nguyen T. A., Csallner C. Reverse engineering mobile application user interfaces with REMAUI // Proceedings of the 30th IEEE/ACM International Conference on Automated Software Engineering (ASE). — Lincoln, 2015. — P. 248–259.