docs(app-map): конвенция эталонных веб-скринов forbion для Fd (360dp, iframe-техника, приватность)

This commit is contained in:
b-dev-mobile
2026-07-13 09:32:13 +00:00
parent fa48569dc1
commit 9efb3595c0
+35
View File
@@ -0,0 +1,35 @@
# Эталонные веб-скриншоты forbion (для Fd-сверки)
Здесь лежат **эталонные скриншоты мобильной веб-версии forbion**с ними Roborazzi-рендеры
нативных экранов сравниваются попиксельно (метрика Fd, программа 1:1). Одна папка на приложение:
`docs/app-map/reference/<app>/<screen>.png`.
## Ширина — 360dp (Figma-фрейм)
Рендер и эталон — **360dp** (не 390!). В screenshot-тестах Roborazzi:
`@Config(sdk=[34], qualifiers="w360dp-h800dp-xxhdpi")`. Эталонный веб-скрин тоже снимать на
ширине **360 CSS-px**.
## Как снять мобильную вёрстку (важно!)
`resize_window` НЕ ужимает вьюпорт общего Chrome (отдаёт десктоп 1480px). Снимаем через
**same-origin iframe 360px** внутри страницы forbion ([[f7-mobile-web-iframe-technique]]):
инжектируешь `<iframe width=360 src="/index.php/apps/<app>/…">` в открытую страницу forbion
(Browser 1, сессия `cloude`), ждёшь загрузки, скриншотишь регион iframe. Мобильная тема
включается по ширине iframe (у него свой вьюпорт 360px).
## ⚠️ Приватность — НЕ светить реальные данные
`cloude` — реальный рабочий аккаунт: на экранах видны настоящие файлы/письма/договоры/контакты.
**В эталон НЕ коммитим реальные данные.** Снимаем:
- пустые состояния, ИЛИ
- свои тест-объекты `bmob-*` (mail/085), ИЛИ
- кадрируем так, чтобы в кадре был только UI-каркас (шапки/панели/кнопки/меню), без реального
контента; персональные имена/суммы/адреса замазать/обрезать.
Скрин с чужими реальными данными в git — недопустим.
## Что снимать (по карте `<app>.md`)
Каждый экран из карты + всплывающие меню (mail/087): список/деталь/форма/модалки/пустые
состояния/контекстные «⋯». Имя файла = слаг экрана (`list.png`, `editor.png`, `menu-message.png`).
## Кто заводит
Владелец приложения (`b-mob-<x>`) снимает эталоны СВОИХ экранов и коммитит сюда; лид — оболочку
(`shell/`). Затем — Roborazzi-тест нативного экрана → PNG → визуальное сравнение с этим эталоном,
расхождения в `<app>.diff.md` (тип `Д`).