Dogfood
On this page Эксплуатационное тестирование (QA) веб-приложений: поиск ошибок, доказательства, отчёты.
Skill metadata¶
| Источник | Встроенный (устанавливается по умолчанию) |
| Путь | skills/dogfood |
| Версия | 1.0.0 |
| Теги | qa, testing, browser, web, dogfood |
| ## Reference: full SKILL.md | |
| info | |
| Далее приведено полное определение навыка, которое загружает Hermes при его активации. Это те инструкции, которые видит агент, когда навык активен. | |
| # Dogfood: Систематическое эксплуатационное тестирование веб-приложений | |
| ## Overview | |
| Этот навык проводит вас через процесс систематического эксплуатационного QA-тестирования веб-приложений с использованием набора браузерных инструментов. Вы будете перемещаться по приложению, взаимодействовать с элементами, фиксировать доказательства проблем и составлять структурированный отчёт об ошибках. | |
| ## Prerequisites | |
* Должен быть доступен набор браузерных инструментов (browser_navigate, browser_snapshot, browser_click, browser_type, browser_vision, browser_console, browser_scroll, browser_back, browser_press) |
|
| * Целевой URL и область тестирования от пользователя |
Inputs¶
Пользователь предоставляет:
1. Целевой URL — точка входа для тестирования
2. Область — какие разделы/функции тестировать (или «весь сайт» для комплексного тестирования)
3. Каталог вывода (опционально) — куда сохранять скриншоты и отчёт (по умолчанию: ./dogfood-output)
Workflow¶
Следуйте этому систематическому рабочему процессу из 5 фаз:
Phase 1: Plan¶
- Создайте структуру каталога вывода:
[code]
{output_dir}/
├── screenshots/ # Скриншоты-доказательства
└── report.md # Итоговый отчёт (создаётся в Фазе 5)
[/code] 2. Определите область тестирования на основе ввода пользователя. 3. Составьте примерную карту сайта, спланировав, какие страницы и функции тестировать: * Главная страница * Навигационные ссылки (шапка, подвал, боковая панель) * Ключевые пользовательские сценарии (регистрация, вход, поиск, оформление заказа и т.д.) * Формы и интерактивные элементы * Пограничные случаи (пустые состояния, страницы ошибок, 404)
Phase 2: Explore¶
Для каждой страницы или функции из вашего плана: 1. Перейдите на страницу: [code] browser_navigate(url="https://example.com/page")
[/code] 2. Сделайте снимок DOM, чтобы понять структуру: [code] browser_snapshot()
[/code] 3. Проверьте консоль на наличие ошибок JavaScript: [code] browser_console(clear=true)
[/code] Делайте это после каждого перехода и каждого значительного взаимодействия. «Тихие» JS-ошибки — ценные находки. 4. Сделайте аннотированный скриншот для визуальной оценки страницы и выявления интерактивных элементов: [code] browser_vision(question="Describe the page layout, identify any visual issues, broken elements, or accessibility concerns", annotate=true)
[/code]
Флаг annotate=true накладывает на интерактивные элементы пронумерованные метки [N]. Каждая [N] соответствует ссылке @eN для последующих браузерных команд.
5. Тестируйте интерактивные элементы систематически:
* Нажимайте кнопки и ссылки: browser_click(ref="@eN")
* Заполняйте формы: browser_type(ref="@eN", text="test input")
* Тестируйте навигацию с клавиатуры: browser_press(key="Tab"), browser_press(key="Enter")
* Прокручивайте контент: browser_scroll(direction="down")
* Тестируйте валидацию форм с некорректными данными
* Тестируйте отправку пустых форм
6. После каждого взаимодействия проверяйте:
* Ошибки консоли: browser_console()
* Визуальные изменения: browser_vision(question="What changed after the interaction?")
* Ожидаемое и фактическое поведение
Phase 3: Collect Evidence¶
Для каждой найденной проблемы: 1. Сделайте скриншот, показывающий проблему: [code] browser_vision(question="Capture and describe the issue visible on this page", annotate=false)
[/code]
Сохраните screenshot_path из ответа — вы будете ссылаться на него в отчёте.
2. Запишите детали:
* URL, на котором возникла проблема
* Шаги для воспроизведения
* Ожидаемое поведение
* Фактическое поведение
* Ошибки консоли (если есть)
* Путь к скриншоту
3. Классифицируйте проблему с помощью таксономии проблем (см. references/issue-taxonomy.md):
* Серьёзность: Критическая / Высокая / Средняя / Низкая
* Категория: Функциональная / Визуальная / Доступность / Консоль / UX / Контент
Phase 4: Categorize¶
- Просмотрите все собранные проблемы.
- Удалите дубликаты — объедините проблемы, являющиеся одной и той же ошибкой, проявляющейся в разных местах.
- Назначьте каждой проблеме окончательную серьёзность и категорию.
- Отсортируйте по серьёзности (сначала критические, затем высокие, средние, низкие).
- Подсчитайте количество проблем по серьёзности и категории для сводки.
Phase 5: Report¶
Создайте итоговый отчёт, используя шаблон из templates/dogfood-report-template.md.
Отчёт должен включать:
1. Сводку с общим количеством проблем, разбивкой по серьёзности и областью тестирования
2. Разделы по каждой проблеме с:
* Номером и названием проблемы
* Значками серьёзности и категории
* URL, где обнаружено
* Описанием проблемы
* Шагами для воспроизведения
* Ожидаемым и фактическим поведением
* Ссылками на скриншоты (используйте MEDIA:<screenshot_path> для встроенных изображений)
* Ошибками консоли, если применимо
3. Сводную таблицу всех проблем
4. Примечания к тестированию — что было протестировано, что не было, какие были блокирующие факторы
Сохраните отчёт в {output_dir}/report.md.
Tools Reference¶
| Инструмент | Назначение |
|---|---|
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-консоли и ошибки |
| ## Tips | |
* Всегда проверяйтеbrowser_console() после навигации и значительных взаимодействий. «Тихие» JS-ошибки — одни из самых ценных находок. |
|
* Используйтеannotate=true с browser_vision, когда нужно определить положение интерактивных элементов или когда ссылки из снимка неясны. |
|
| * Тестируйте как корректные, так и некорректные вводные данные — ошибки валидации форм встречаются часто. | |
| * Прокручивайте длинные страницы — контент ниже сгиба может иметь проблемы отображения. | |
| * Тестируйте навигационные сценарии — проходите многошаговые процессы от начала до конца. | |
| * Проверяйте адаптивность, отмечая любые проблемы вёрстки, видимые на скриншотах. | |
| * Не забывайте о пограничных случаях: пустые состояния, очень длинный текст, специальные символы, быстрые нажатия. | |
* При передаче скриншотов пользователю включайте MEDIA:<screenshot_path>, чтобы он мог видеть доказательства в тексте. |