Dogfood

Исследовательское QA веб-приложений: поиск багов, доказательств, отчётов.

Метаданные навыка

Источник	Встроенный (установлен по умолчанию)
Путь	skills/dogfood
Версия	1.0.0
Платформы	linux, macos, windows
Теги	qa, testing, browser, web, dogfood

Справочник: полный SKILL.md

к сведению

Ниже приведено полное описание навыка, которое VibeOS загружает при его активации. Агент видит эти инструкции, когда навык активен.

Dogfood: Системное тестирование веб-приложений

Обзор

Этот навык проводит вас через систематическое исследовательское QA-тестирование веб-приложений с помощью набора браузерных инструментов. Вы будете перемещаться по приложению, взаимодействовать с элементами, фиксировать доказательства проблем и составлять структурированный отчёт об ошибках.

Предварительные требования

• Набор браузерных инструментов должен быть доступен (browser_navigate, browser_snapshot, browser_click, browser_type, browser_vision, browser_console, browser_scroll, browser_back, browser_press)
• Целевой URL и область тестирования от пользователя

Входные данные

Пользователь предоставляет:

1. Целевой URL — точка входа для тестирования
2. Область — какие разделы/функции тестировать (или «весь сайт» для комплексного тестирования)
3. Выходной каталог (опционально) — куда сохранять скриншоты и отчёт (по умолчанию: ./dogfood-output)

Рабочий процесс

Следуйте этому систематическому 5-фазному рабочему процессу:

Фаза 1: Планирование

1. Создайте структуру выходного каталога:

{output_dir}/
├── screenshots/       # Скриншоты-доказательства
└── report.md          # Итоговый отчёт (создаётся в Фазе 5)

2. Определите область тестирования на основе ввода пользователя.
3. Составьте примерную карту сайта, спланировав, какие страницы и функции тестировать:
   • Целевая/домашняя страница
   • Навигационные ссылки (шапка, подвал, боковая панель)
   • Ключевые пользовательские сценарии (регистрация, вход, поиск, оформление заказа и т.д.)
   • Формы и интерактивные элементы
   • Граничные случаи (пустые состояния, страницы ошибок, 404)

Фаза 2: Исследование

Для каждой страницы или функции из вашего плана:

1. Перейдите на страницу:

   browser_navigate(url="https://example.com/page")

2. Сделайте снимок DOM, чтобы понять его структуру:

   browser_snapshot()

3. Проверьте консоль на наличие ошибок JavaScript:

   browser_console(clear=true)

   Делайте это после каждой навигации и каждого значимого взаимодействия. Тихие JS-ошибки — ценные находки.

4. Сделайте аннотированный скриншот для визуальной оценки страницы и выявления интерактивных элементов:

   browser_vision(question="Опишите макет страницы, выявите любые визуальные проблемы, сломанные элементы или проблемы доступности", annotate=true)

   Флаг annotate=true накладывает нумерованные метки [N] на интерактивные элементы. Каждый [N] соответствует ссылке @eN для последующих команд браузера.

5. Систематически тестируйте интерактивные элементы:

   • Нажимайте кнопки и ссылки: browser_click(ref="@eN")
   • Заполняйте формы: browser_type(ref="@eN", text="тестовый ввод")
   • Тестируйте навигацию с клавиатуры: browser_press(key="Tab"), browser_press(key="Enter")
   • Прокручивайте контент: browser_scroll(direction="down")
   • Тестируйте валидацию форм с некорректными данными
   • Тестируйте пустые отправки

6. После каждого взаимодействия проверяйте:

   • Ошибки консоли: browser_console()
   • Визуальные изменения: browser_vision(question="Что изменилось после взаимодействия?")
   • Ожидаемое и фактическое поведение

Фаза 3: Сбор доказательств

Для каждой найденной проблемы:

1. Сделайте скриншот, показывающий проблему:

   browser_vision(question="Захватите и опишите проблему, видимую на этой странице", annotate=false)

   Сохраните screenshot_path из ответа — вы будете ссылаться на него в отчёте.

2. Запишите детали:

   • URL, где возникает проблема
   • Шаги для воспроизведения
   • Ожидаемое поведение
   • Фактическое поведение
   • Ошибки консоли (если есть)
   • Путь к скриншоту

3. Классифицируйте проблему с помощью таксономии проблем (см. references/issue-taxonomy.md):

   • Серьёзность: Критическая / Высокая / Средняя / Низкая
   • Категория: Функциональная / Визуальная / Доступность / Консоль / UX / Контент

Фаза 4: Категоризация

1. Просмотрите все собранные проблемы.
2. Удалите дубликаты — объедините проблемы, которые являются одним и тем же багом, проявляющимся в разных местах.
3. Назначьте каждой проблеме окончательную серьёзность и категорию.
4. Отсортируйте по серьёзности (сначала критические, затем высокие, средние, низкие).
5. Подсчитайте количество проблем по серьёзности и категории для сводки.

Фаза 5: Отчёт

Создайте итоговый отчёт, используя шаблон из templates/dogfood-report-template.md.

Отчёт должен включать:

1. Сводку с общим количеством проблем, разбивкой по серьёзности и областью тестирования
2. Разделы по каждой проблеме с:
   • Номером и названием проблемы
   • Значками серьёзности и категории
   • URL, где наблюдалась проблема
   • Описанием проблемы
   • Шагами для воспроизведения
   • Ожидаемым и фактическим поведением
   • Ссылками на скриншоты (используйте MEDIA:<screenshot_path> для встроенных изображений)
   • Ошибками консоли, если применимо
3. Сводной таблицей всех проблем
4. Примечаниями к тестированию — что было протестировано, что нет, любые блокирующие факторы

Сохраните отчёт в {output_dir}/report.md.

Справочник по инструментам

Инструмент	Назначение
browser_navigate	Перейти по URL
browser_snapshot	Получить текстовый снимок DOM (дерево доступности)
browser_click	Нажать на элемент по ссылке (@eN) или тексту
browser_type	Ввести текст в поле ввода
browser_scroll	Прокрутить страницу вверх/вниз
browser_back	Вернуться назад в истории браузера
browser_press	Нажать клавишу на клавиатуре
browser_vision	Скриншот + AI-анализ; используйте annotate=true для меток элементов
browser_console	Получить вывод JS-консоли и ошибки

Советы

• Всегда проверяйте browser_console() после навигации и значимых взаимодействий. Тихие JS-ошибки — одни из самых ценных находок.
• Используйте annotate=true с browser_vision, когда нужно понять расположение интерактивных элементов или если ссылки из снимка неясны.
• Тестируйте как с корректными, так и с некорректными данными — баги валидации форм встречаются часто.
• Прокручивайте длинные страницы — контент ниже сгиба может иметь проблемы с отображением.
• Тестируйте навигационные сценарии — проходите многошаговые процессы от начала до конца.
• Проверяйте адаптивное поведение, отмечая любые проблемы макета, видимые на скриншотах.
• Не забывайте о граничных случаях: пустые состояния, очень длинный текст, спецсимволы, быстрые клики.
• При отправке скриншотов пользователю включайте MEDIA:<screenshot_path>, чтобы он мог видеть доказательства в тексте.