109 lines
5.1 KiB
Markdown
109 lines
5.1 KiB
Markdown
# 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]
|
||
```
|