chore: Playwright и axe для браузерного QA веб-парта

Зависимости и навык spfx-qa для проверки портала в браузере (сценарии, снимки, проверка доступности). Каталоги сессии и отчётов (.auth/, .qa-reports/) — в .gitignore. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
2026-10-09 12:18:14 +05:00
parent c80972469f
commit b64ec76998
10 changed files with 704 additions and 15 deletions
@@ -0,0 +1,82 @@
+# Таксономия проблем и health score для SPFx
+
+## Severity
+
+| Severity | Определение | Примеры в SPFx |
+|---|---|---|
+| **critical** | Ломает основной сценарий, потеря данных, утечка, падение веб-парта | Веб-парт показывает «Something went wrong» / пустой блок; сохранение затирает чужие данные; токен или данные пользователя в консоли |
+| **high** | Основная функция не работает, обхода нет | При 403 бесконечный спиннер; фильтр возвращает не те элементы; на 429 веб-парт падает вместо повтора |
+| **medium** | Работает с заметными проблемами, обход есть | Вёрстка ломается только в колонке 1/3; нет индикатора загрузки; >5 с до первого контента |
+| **low** | Косметика | Отступ не по сетке Fluent; опечатка; ховер не в цвет темы |
+
+## Категории и что проверять
+
+### 1. Functional
+- Все состояния данных: `ok`, `empty`, `many` (пагинация, >100/5000 элементов), `forbidden`, `notfound`, `error`, `slow`.
+- Троттлинг (`throttled`, HTTP 429): есть ли повтор с `Retry-After`, нет ли шторма запросов.
+- Property pane: пустые обязательные свойства → понятный плейсхолдер «Настройте веб-парт», а не падение; крайние значения; смена свойства без перезагрузки обновляет рендер.
+- `mode=edit` vs `mode=read`: в режиме редактирования нет сломанных интерактивов.
+- Двойной клик/двойная отправка, устаревшие данные после повторного открытия.
+
+### 2. Visual
+- Ширины контейнера: 320 (колонка 1/3, вертикальная секция), 640 (1/2), 1024 (full), 375 (мобильный).
+- Горизонтальный overflow, обрезанный текст без многоточия, наезжающие элементы.
+- Темы: светлая и тёмная/инвертированная секция — цвета берутся из темы (`semanticColors`), а не захардкожены.
+- Иконки Fluent отображаются (не квадратики — значит, не вызван `initializeIcons`).
+
+### 3. UX
+- Индикатор загрузки (Shimmer/Spinner) при `slow`.
+- Сообщения об ошибках понятные и на языке пользователя, не «Error: [object Object]».
+- Пустое состояние объясняет, что делать.
+- Подтверждение перед удалением.
+
+### 4. Content / локализация
+- Обе локали; нет ключей локализации вместо текста, `undefined`, английских строк в русском интерфейсе.
+- Даты и числа в формате локали.
+
+### 5. Performance
+- Время до первого контента в сценарии `ok` < 3 с на харнессе.
+- Число запросов к данным за рендер (ищи N+1: запрос на каждый элемент).
+- Повторные рендеры не вызывают повторных запросов.
+
+### 6. Console
+- Необработанные исключения, `unhandledrejection`.
+- Предупреждения React о `key`, обновлении размонтированного компонента.
+- Упавшие запросы (кроме ожидаемых в сценариях ошибок).
+
+### 7. Accessibility
+- Нарушения axe уровня serious/critical.
+- Всё доступно с клавиатуры, фокус видим, модалки (Panel/Dialog) не ловят фокус навсегда.
+- Подписи у полей ввода, `aria-label` у иконок-кнопок.
+- Контраст в обеих темах.
+
+### 8. SharePoint integration (только `--tenant`)
+- Нет конфликтов стилей со страницей (глобальные селекторы в scss, `:global`).
+- Работает рядом с другими веб-партами, в нескольких экземплярах на одной странице.
+- Права реального пользователя совпадают с ожиданиями.
+- Неожиданные не-GET запросы.
+
+## Health score
+
+Каждая категория 0–100, затем взвешенное среднее только по **протестированным**
+категориям (непротестированные исключаются, оценка помечается «предварительная»).
+
+Одна корневая причина — одна проблема, одна категория (первая подходящая по списку
+выше), без двойных вычетов.
+
+**Console:** 0 ошибок → 100; 1–3 → 70; 4–10 → 40; 11+ → 10.
+
+**Остальные:** старт 100; critical −25, high −15, medium −8, low −3; минимум 0.
+
+| Категория | Вес |
+|---|---|
+| Functional | 25% |
+| Visual | 10% |
+| UX | 15% |
+| Content | 5% |
+| Performance | 10% |
+| Console | 15% |
+| Accessibility | 15% |
+| SharePoint integration | 5% (только `--tenant`) |
+
+`score = Σ(оценка × вес) / Σ(веса протестированных)`, округлить до целого.