# 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-сервера

```bash
yarn dev
# → http://localhost:5173
```

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

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

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

```js
// 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-изменениями должна включать:

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