Playwright CLI Skill — Детерминированный AI-аудит интерфейса

Хватит гадать почему дергается, лагает, искажается интерфейс и тратить часы на ручной скроллинг.

Мы больше не используем «магический ИИ», который просто смотрит на скриншот и говорит «вроде нормально».

У нас теперь повторяемый инженерный процесс — как автотест, только в 10 раз быстрее и умнее.

ИИ управляет реальным браузером, снимает точные метрики каждые 100 мс, фиксирует визуальные артефакты, ловит ошибки и сразу привязывает каждый баг к конкретной строке кода в вашем проекте — это и есть Детерминированный AI UI Audit.

Стек

• Playwright CLI Skill — управление реальным браузером из терминала (официальный инструмент Microsoft 2026)
• AI-агент (Claude / Cursor / Grok / Codex) — строит сценарии, анализирует скриншоты и логи
• ripgrep (rg) — мгновенный поиск по всему коду для root-cause

Полный 7-шаговый процесс

1. Фиксируем профиль теста Один и тот же viewport (393×852 — iPhone 14/15), одна среда (staging или preview), один и тот же набор маршрутов. Пример команды:playwright-cli open https://staging.yourapp.com --viewport=393,852
2. Строим карту экранов ИИ читает ваш routing.ts / app/routes / Next.js App Router и генерирует полный список страниц + пользовательских путей. Промпт для этого шага ниже.
3. Прогоняем навигацию через реальный браузер ИИ по очереди открывает все экраны и выполняет базовую навигацию (клик по табам, открытие модалок и т.д.).
4. Снимаем метрики «прыжков» (layout shift) Каждые ~100 мс читаем getBoundingClientRect() ключевых блоков (header, CTA-кнопки, карточки, контейнеры). Считаем максимальный сдвиг по X/Y за сессию. Результат: «max shift = 57 px на карточке товара».
5. Фиксируем визуальные артефакты Делаем 3 скриншота на каждом экране:early — сразу после загрузки
   mid — через 800 мс
   settled — после полной стабилизации (network idle + 500 мс тишины)
   
6. Собираем runtime-ошибки Логируем всё:console.error и console.warn
   HTTP-запросы ≥400
   Проблемы с ассетами, авторизацией, данными
   
7. Делаем root-cause анализ ИИ получает: скриншоты + метрики + логи + свежий snapshot элементов. Он запускает rg "className|id|data-testid" и выдаёт:файл и строку кода
   приоритет (P0/P1/P2)
   готовый план фикса
   

Что это даёт на практике

• Воспроизводимость 100 % — запустили сегодня, запустили через неделю — результат сравнимый
• Измеримость — баг теперь звучит не «вроде дергается», а «max layout shift 57 px на мобильном, элемент .product-card, строка 142 в ProductGrid.tsx»
• Регрессионная защита — после каждого фикса запускаете тот же аудит и видите: стало лучше или хуже
• Экономия времени — полный аудит приложения из 25 экранов занимает 12–18 минут вместо 3–4 часов вручную

Ключевой принцип методики

ИИ — это только ускоритель анализа. Качество даёт именно детерминированный пайплайн: фиксированные условия → метрики → артефакты → повторный прогон.

Готовые промпты для Claude / Cursor / Grok (копируй-вставляй)

Промпт №1 — Полный аудит за один запрос

Выполни Детерминированный AI UI Audit для моего приложения.

Профиль теста:

- Viewport: 393x852

- URL: [Ссылка на ваш сайт]

- Маршруты: прочитай файл app/routes.ts и составь полный список

Шаги:

1. Построй карту экранов

2. Открой каждый экран через Playwright CLI

3. Сделай 3 скриншота (early/mid/settled)

4. Измерь max layout shift каждые 100 мс для блоков: header, main, cta-buttons

5. Собери console.error/warn + HTTP >=400

6. Сделай root-cause анализ через rg по коду

7. Выдай таблицу багов с приоритетами P0-P2 и готовыми фиксами

Используй только Playwright CLI Skill команды.

Промпт №2 — Анализ одного экрана

Проанализируй эти 3 скриншота + метрики layout shift + логи Playwright.

Для каждого визуального бага укажи:

- Приоритет (P0/P1/P2)

- Точное место в коде (файл:строка)

- Предлагаемый фикс одной строкой

Промпт №3 — Настройка профиля теста

Создай файл audit-profile.json для Детерминированного AI UI Audit:

- viewport 393x852

- 12 ключевых экранов

- Список селекторов для измерения shift

- Команда запуска через Playwright CLI

Как запустить первый аудит

1. Установи Playwright CLI Skill
2. Скопируй промпт №1 в Claude/Cursor
3. Попроси ИИ запустить скрипт, если не запустил автоматически
4. Получи готовый отчёт в Markdown + папку с артефактами

Как поддерживать

• Добавьте аудит в CI/CD (GitHub Actions / GitLab) — запускается после каждого PR
• Храните результаты в Supabase (таблица audits)
• Раз в неделю сравнивайте метрики (max shift должен падать)
• После крупных рефакторингов — запускайте регрессионный аудит

FAQ

Можно ли использовать без Playwright CLI? Можно, но потеряете скорость и детерминированность. Playwright CLI — основа методики.

Работает ли на мобильных устройствах? Да — просто укажите viewport и используйте --device="iPhone 15".

Сколько стоит запуск? 0 рублей, всё локально.

Подходит для больших приложений? Да. Мы прогоняли аудит на проекте с 47 экранами — 14 минут.

Итог

Детерминированный AI UI Audit — это не просто «ИИ посмотрел на сайт». Это инженерный инструмент уровня автотестов, который уже сегодня даёт нам стабильные интерфейсы и уверенность при каждом деплое.