5.1 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]

5.1 KiB Raw Blame History Unescape Escape