4.4 KiB

Raw Blame History

MCP Browser Verification Guide

Что это

Playwright MCP server (@playwright/mcp) предоставляет инструменты для взаимодействия с браузером через Model Context Protocol. Позволяет агенту (Zoo Code) открывать страницы, делать snapshot DOM, кликать, заполнять формы, делать скриншоты — без написания тест-кода.

Конфигурация

Сервер: web-browser в mcp_settings.json (Zoo Code global storage)
Браузер: Chromium (headless)
Node: 22.14.0 (nvm, absolute path)
Пакет: @playwright/mcp@latest (npm)

Workflow: UI Verification после изменения

1. Запуск dev-сервера

yarn dev
# → http://localhost:5173

2. Проверка публичных страниц (без auth)

Рут	Что проверять
`/explore`	Feed загружен, карточки тренировок рендерятся
`/public/workouts/:id`	Детали тренировки: chart, map, данные
`/routes`	Список маршрутов
`/404`	Страница 404 для неизвестных маршрутов

3. Проверка auth-страниц (с моком auth)

// browser_evaluate: установить мок-токен и перезагрузить
() => {
  localStorage.setItem('token', 'mock-jwt-token');
  localStorage.setItem('user', JSON.stringify({ id: 1, name: 'Test User', email: 'test@test.ru' }));
  localStorage.setItem('profile', JSON.stringify({ name: 'Test', avatar: null }));
  location.reload();
}

После reload:

Рут	Что проверять
`/workouts`	Список пользовательских тренировок
`/workouts/:id`	Detail: chart (power, HR, elevation), map polyline
`/preferences`	Профиль, настройки
`/workouts/upload`	Форма загрузки FIT/GPX

4. Инструменты MCP (ключевые)

Инструмент	Назначение
`browser_navigate`	Перейти по URL
`browser_snapshot`	Получить accessibility tree (структура DOM)
`browser_take_screenshot`	Скриншот (PNG)
`browser_click`	Клик по элементу (по ref из snapshot)
`browser_fill_form`	Заполнить форму
`browser_evaluate`	Выполнить JS на странице
`browser_network_requests`	Список HTTP-запросов (проверить API)
`browser_wait_for`	Дождаться появления текста
`browser_console_messages`	Console errors/warnings

5. Типовой сценарий проверки (example)

1. browser_navigate → http://localhost:5173/explore
2. browser_wait_for → "Тренировки" (заголовок)
3. browser_snapshot → проверить структуру feed
4. browser_take_screenshot → визуал
5. browser_evaluate → mock auth (localStorage)
6. browser_navigate → http://localhost:5173/workouts
7. browser_snapshot → проверить сайдбар (authRoutes), список
8. browser_network_requests → убедиться что API /api/v0/workouts вызван

Ограничения

API: dev-сервер проксирует API на HOST (production). Для изолированной проверки нужно либо:
- Использовать production API (read-only запросы — ок)
- Поднять локальный mock-сервер (axios interceptors)
Yandex Maps: API key hardcoded, работает в headless, но рендер может отличаться
Chart.js: Canvas — в snapshot не виден, только через screenshot
SSR: MCP проверяет SPA (client-side). SSR — отдельно через curl или browser_navigate на SSR-порт

Acceptance Criteria для Coder-задач

Каждая Coder-задача с UI-изменениями должна включать:

### Acceptance Criteria
1. `yarn lint` → 0 ошибок
2. `yarn build` → 0 ошибок (vue-tsc --noEmit)
3. MCP browser: [конкретный сценарий проверки — рут, что ожидать в DOM]

4.4 KiB Raw Blame History Unescape Escape