interactive_test.html

Обзор файла

interactive_test.html — это веб-страница, предназначенная для проведения комплексного интерактивного UX/UI тестирования пользовательского интерфейса игры Elemental Arena. Основная задача файла — визуализировать результаты различных тестов интерфейса, предоставить кнопки управления для запуска автоматизированных тестов и переключения между встроенным и отдельным представлением игры. Страница также отображает сводную информацию о количестве пройденных, проваленных и предупреждающих тестов с подсчетом общего процента успешности.

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

Подробное описание структуры и функциональности

Основные компоненты страницы

• Заголовок и описание (.header)
  Отображает название теста и краткое описание.

• Панель управления тестами (.test-controls)
  Содержит кнопки для:

  • Открытия игры в отдельной вкладке (dev и prod версии).

  • Запуска автоматизированных тестов.

  • Включения/выключения встроенного iframe с игрой.

• Сводка результатов (.summary)
  Карточки, показывающие количество пройденных, проваленных и предупреждающих тестов, а также общий балл в процентах.

• Встроенный фрейм с игрой (#gameFrame)
  Скрытый по умолчанию блок с iframe, который загружает игру для интерактивного просмотра.

• Секции тестирования (.test-section)
  Несколько блоков с тестами по категориям: выбор локации, выбор элемента, выбор элементаля, коллекция и доступность.

• Заметки по тестированию (.test-notes)
  Содержит рекомендации и приоритеты для дальнейшей доработки интерфейса.

CSS стили

• Использован градиентный фон, стилизация элементов с прозрачностью и эффектом размытия (backdrop-filter).

• Тестовые элементы визуально выделяются цветом и анимацией при наведении.

• Адаптивная верстка для мобильных устройств.

• Цвета статусов тестов: зелёный (успешно), оранжевый (предупреждение), красный (ошибка).

JavaScript функции и логика

Переменная состояния

• gameFrameVisible — логический флаг, отображается ли встроенный iframe с игрой.

Функции

updateSummary()

• Назначение: Подсчитывает количество тестов по статусам (passed, failed, warning) и обновляет сводку на странице.

• Параметры: нет.

• Возвращаемое значение: нет.

• Пример использования: вызывается при загрузке страницы для инициализации данных по тестам.

runAutomatedTests()

• Назначение: Модальное оповещение о запуске автоматизированных тестов (симуляция).

• Параметры: нет.

• Возвращаемое значение: нет.

• Описание: В реальной системе здесь могли бы запускаться тесты с помощью Selenium, Playwright и пр.

• Пример использования: вызывается при клике на кнопку "🤖 Run Automated Tests".

toggleGameFrame()

• Назначение: Переключает видимость встроенного iframe с игрой.

• Параметры: нет.

• Возвращаемое значение: нет.

• Описание: При включении iframe загружает URL дев-сервера игры, при выключении — очищает iframe.

• Пример использования: кнопка "🖼️ Embedded View" вызывает переключение показа.

checkServerStatus()

• Назначение: Асинхронно проверяет доступность серверов разработки и продакшена.

• Параметры: нет.

• Возвращаемое значение: нет.

• Описание: Выполняет HTTP HEAD запросы к URL и логирует статус в консоль.

• Пример использования: вызывается при загрузке страницы.

Обработчики событий

• При загрузке DOM:

  • Обновляется сводка результатов.

  • Запускается проверка серверов.

  • Добавляется эффект масштабирования при клике на тестовые элементы.

• Горячие клавиши с Ctrl/Meta:

  • 1 — открыть dev-версию игры.

  • 2 — открыть prod-версию игры.

  • t — запуск автоматических тестов.

  • f — переключение встроенного iframe.

Взаимодействия с другими частями системы

• Сервера игры:
  Dev-сервер по адресу http://localhost:3000/code-with-kiro-hackathon
  Prod-сервер по адресу http://localhost:8080
  Страница открывает эти версии как в новых вкладках, так и в iframe.

• Отчет по тестам:
  Вызов автоматизированных тестов симулируется, реальный отчет упоминается в ux_ui_analysis_report.md (вне этого файла).

• Тестируемый интерфейс:
  Тесты сфокусированы на элементах выбора локаций, элементов, элементалей, коллекции и доступности.

Важные детали реализации

• Статусы тестов представлены классами .passed, .failed, .warning, что влияет на цветовую индикацию.

• Кнопки управления используют градиенты и анимации для улучшения UX.

• Встроенный iframe загружается динамически для экономии ресурсов.

• Проверка серверов использует fetch с режимом no-cors и методом HEAD для минимизации нагрузки.

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

Пример использования

Обычный пользователь (например, тестировщик UX/UI) открывает страницу interactive_test.html, видит резюме тестов и подробные результаты по категориям. Может запустить автоматизированные тесты или открыть игру для интерактивного тестирования. Использует горячие клавиши для быстрого доступа к нужным действиям.

Mermaid Диаграмма — Структура JavaScript функций и взаимодействий

flowchart TD
    A[DOMContentLoaded]
    A --> B[updateSummary()]
    A --> C[checkServerStatus()]
    A --> D[add click animation to .test-item]

    E[User action]
    E -->|Click| F[runAutomatedTests()]
    E -->|Click| G[toggleGameFrame()]

    H[Keyboard shortcuts]
    H -->|Ctrl+1| I[Open Dev Server]
    H -->|Ctrl+2| J[Open Prod Server]
    H -->|Ctrl+t| F
    H -->|Ctrl+f| G

    subgraph Server Checks
        C --> K[fetch HEAD dev server]
        C --> L[fetch HEAD prod server]
    end

    subgraph Embedded View
        G --> M[Show/hide iframe]
        M --> N[Set iframe.src]
    end

    subgraph Summary Update
        B --> O[Count .passed]
        B --> P[Count .failed]
        B --> Q[Count .warning]
        O & P & Q --> R[Calculate % score]
        R --> S[Update DOM counters]
    end

Итог

interactive_test.html — это качественно оформленная, адаптивная и удобная страница для визуализации результатов UX/UI тестирования игры Elemental Arena. Она служит промежуточным инструментом между тестировщиками и разработчиками, помогая быстро оценить состояние интерфейса и выявить проблемные места, а также позволяет запускать автоматизированные проверки и просматривать игру встраиваемо. Дальнейшие улучшения, согласно заметкам, должны быть направлены на доступность, автоматическое обновление данных и расширение обучающих материалов.