# UI Test Cases — ET-011: Скачивание трека из popup

Playwright-сценарии для визуальной проверки. Все запускаются на
`https://openclaw.mva154.duckdns.org/enduro/`.

> Селекторы базируются на текущем DOM `src/web/index.html` и popup'е,
> создаваемом в `src/web/gps_tracks.js` (`_renderTrackPopupHtml`). Когда
> architect/builder уточнит CSS-классы новой кнопки — обновить
> селекторы в этом файле.

> **Статус автоматизации (ET-011, после review 12-review.md / P1-01):**
> Playwright-спека `tests/web/test_track_download.spec.ts` из test-plan
> §E2E-01..E2E-04 **не реализована** — в проекте нет настроенного
> Playwright-раннера. UI-сторона AC-1 / AC-2 / AC-7 закрыта поведенческими
> JS unit-тестами `tests/web/track_download.test.js` (28 кейсов,
> `node --test`, обёрнуто pytest'ом). **AC-13 (mobile bbox / тапабельность
> кнопки ≥ 32×32 CSS px на 375×667) — ручной smoke перед каждым релизом**;
> сценарий — TC-UI-02 ниже (+ TC-UI-05 для проверки реального download).

---

### TC-UI-01 — Кнопка «Скачать» в popup трека (desktop)

**Тип:** ui
**Viewport:** desktop (1280×800)

**Шаги:**
1. navigate: https://openclaw.mva154.duckdns.org/enduro/
2. wait: 5000
3. click: #terrain-toggle
4. wait: 500
5. click: #public-tracks-cb
6. wait: 4000
7. screenshot: 01-public-tracks-enabled
8. check-visual: слой публичных треков отрисован (видны цветные линии на карте)
9. click: #map (в точке, где есть трек — координаты подобрать вручную/программно)
10. wait: 1500
11. screenshot: 02-track-popup-opened
12. check-visual: появилось всплывающее окно `.maplibregl-popup` с классом `.track-popup` внутри, видны название, активность, длина
13. check-visual: внутри popup присутствует кнопка/иконка «Скачать» с aria-label="Скачать GPX"
14. screenshot: 03-popup-with-download-button

---

### TC-UI-02 — Popup и кнопка на мобильном (AC-13, MANUAL release-smoke)

**Тип:** ui (manual smoke — единственное покрытие AC-13)
**Viewport:** mobile (375×667)
**Когда:** перед каждым деплоем в test/prod, оператором — DevTools или
устройство с тем же viewport.

**Шаги:**
1. navigate: https://openclaw.mva154.duckdns.org/enduro/
2. wait: 5000
3. click: #terrain-toggle
4. wait: 500
5. click: #public-tracks-cb
6. wait: 4000
7. click: #map (тап в координате трека)
8. wait: 1500
9. screenshot: mobile-popup
10. check-visual: popup помещается в ширину viewport (≤ 375px), не обрезан
11. check-visual: кнопка «Скачать» видна без скролла внутри popup
12. check-visual: bounding box кнопки «Скачать» ≥ 32×32 CSS px

---

### TC-UI-03 — Тёмная тема: контраст кнопки

**Тип:** ui
**Viewport:** desktop

**Шаги:**
1. navigate: https://openclaw.mva154.duckdns.org/enduro/
2. wait: 5000
3. check-visual: body имеет класс `theme-dark`
4. click: #terrain-toggle
5. click: #public-tracks-cb
6. wait: 4000
7. click: #map (тап в координате трека)
8. wait: 1500
9. screenshot: dark-popup-with-download
10. check-visual: иконка «Скачать» имеет читаемый контраст на тёмном фоне popup (текст / стрелка видна, не сливается с фоном)

---

### TC-UI-04 — Светлая тема: контраст кнопки

**Тип:** ui
**Viewport:** desktop

**Шаги:**
1. navigate: https://openclaw.mva154.duckdns.org/enduro/
2. wait: 5000
3. click: #btn-theme
4. wait: 500
5. check-visual: body НЕ имеет класса `theme-dark` (или имеет `theme-light`)
6. click: #terrain-toggle
7. click: #public-tracks-cb
8. wait: 4000
9. click: #map (тап в координате трека)
10. wait: 1500
11. screenshot: light-popup-with-download
12. check-visual: иконка «Скачать» читаема в светлой теме

---

### TC-UI-05 — Скачивание срабатывает (e2e download event)

**Тип:** ui
**Viewport:** desktop

**Шаги:**
1. navigate: https://openclaw.mva154.duckdns.org/enduro/
2. wait: 5000
3. click: #terrain-toggle
4. click: #public-tracks-cb
5. wait: 4000
6. click: #map (тап в координате трека)
7. wait: 1500
8. Подготовить page.waitForEvent('download') ДО клика на кнопку
9. click: кнопка «Скачать» внутри `.maplibregl-popup .track-popup` (точный селектор — после Architecture, например `.track-popup-download-btn` или `button[aria-label="Скачать GPX"]`)
10. screenshot: download-triggered
11. check-visual: download event получен, `download.suggestedFilename()` заканчивается на `.gpx`
12. check-visual: файл сохранён, размер > 100 байт, начинается с `<?xml`

---

### TC-UI-06 — Popup не «прыгает» из-за кнопки

**Тип:** ui
**Viewport:** desktop

**Шаги:**
1. Открыть popup трека (как в TC-UI-01).
2. wait: 500
3. Снять bbox popup (getBoundingClientRect через JS).
4. wait: 1500
5. Снять bbox повторно.
6. check-visual: размеры popup не меняются (нет «дёрганий» из-за поздно подгруженного контента кнопки).

---

### TC-UI-07 — Регрессия: остальные элементы popup остались

**Тип:** ui
**Viewport:** desktop

**Шаги:**
1. Открыть popup трека.
2. screenshot: regression-popup
3. check-visual: видны все исторические поля
   - название трека
   - строка с иконкой активности и лейблом
   - строка `📏 X.X км · N точек`
   - дата (если есть)
   - пользователь (если есть)
   - блок «Источники: …» (если есть)
4. check-visual: новая кнопка «Скачать» добавлена, но не вытеснила/не заместила другие поля

---

### TC-UI-08 — Регрессия: панель `sheet-gpx` и downloadGPX маршрута

**Тип:** ui
**Viewport:** desktop

**Шаги:**
1. navigate: https://openclaw.mva154.duckdns.org/enduro/
2. wait: 5000
3. click: #tb-gpx
4. wait: 500
5. screenshot: regression-sheet-gpx
6. check-visual: панель `#sheet-gpx` открывается как раньше, заголовок «GPX-треки», текст-подсказка о загрузке.
7. closeAllSheets via tap on backdrop
8. click: #tb-route
9. wait: 500
10. screenshot: regression-sheet-route
11. check-visual: панель `#sheet-route` открывается, кнопка-иконка «Скачать GPX» (для маршрута) присутствует и работает как прежде.

---

## Примечания по селекторам

Конкретные классы / id новой кнопки внутри popup трека определит
architect / builder. В качестве разумных рабочих имён предлагаются:

- `button.track-popup-download-btn` или
- `.track-popup .track-popup-actions button[aria-label="Скачать GPX"]`

После Architecture стадии обновить селекторы в этом файле.
