Ручное e2e-тестирование

Плавающая панель сценариев
на любом сайте

Одна строка — и чек-лист тестирования в углу экрана. Шаги подчёркиваются, прогресс сохраняется, действия дёргают API. Сценарии — обычный YAML на твоём домене.

$ <script async src="https://e2e-panel.aipika.tech/loader.js"></script>

Виджет работает прямо в демо ниже — кликни по шагам в панели, попробуй селект действий

https://app.example.com/dashboard

Три шага до запуска

Без сборки, без зависимостей, без npm-пакета

1

Pоложи YAML на свой домен

Создай файл /.e2e/tests.yaml на тестируемом сайте. Обычный текстовый YAML со сценариями и действиями. Правишь руками, без сборки.

2

Добавь одну строку

Вставь <script> с загрузчиком на страницы. Виджет грузится с отдельного домена, монтируется в Shadow DOM — стили не пересекаются.

3

Тестируй

Панель в углу, шаги подчёркиваются кликом, прогресс в localStorage. Действия дёргают API, комментарии летят в очередь для ИИ.

Три способа подключить

Выбери тот, который удобнее — результат один

Script-тег

Одна строка в HTML — панель на каждой странице автоматически.

<script async src= "https://e2e-panel.aipika.tech /loader.js"></script>

Букмарклет

Закладка в браузере — клик на любой странице, панель появляется. Код не трогаешь.

javascript:(function(){ var s=document.createElement ('script');s.async=true;s.src= '…/loader.js';document.body .appendChild(s);})()

Chrome-расширение

Кнопка в тулбаре — панель по клику. Авто-запуск на выбранных доменах. URL загрузчика настраивается.

// chrome://extensions // → Load unpacked → extension/ // → клик по иконке → Запустить
tests.yaml
# /.e2e/tests.yaml — на тестируемом домене
version: 1

actions:                    # бэкенд-шорткаты
  - label: Очистить браузер
    clear: all
    url: /api/e2e/reset
    reload: true
  - label: Войти как клиент (демо)
    url: /api/auth/demo-login
    reload: true

groups:
  - id: A
    title: Новые клиенты
    scenarios:
      - index: A1
        title: Регистрация нового клиента
        steps:
          - ты - клиент
          - Открой страницу входа
          - Создай первое объявление
          - ты - админ
          - Найди клиента и где он остановился

Сценарии — обычный YAML

Иерархия: бизнес-единицы (группы) → сценарии. Каждый сценарий сквозной — несколько ролей, до бизнес-ценности. Группы становятся optgroup в селекте.

  • Шаги — простые строки, ничего не парсится
  • Смену роли — отдельной строкой «ты - клиент»
  • Прогресс в localStorage, переживает перезагрузку
  • Плоский scenarios: без групп — тоже работает

Действия — бэкенд-шорткаты

В футере панели — селект «Действия». Каждый пункт бьёт по API тестируемого домена с куками сессии. Это сокращает ручные шаги и делает сценарии повторяемыми.

  • Глобальные (actions в корне) и/или на сценарии
  • Поля: url, method, body, clear, confirm, reload, redirect
  • clear: all — чистый старт (storage + cookies)
  • Относительный URL — по origin страницы с credentials: same-origin
clear Очистить браузер — clear: all + POST /api/e2e/reset, гасит сессии и перезагружает
POST Войти как клиент — POST /api/auth/demo-login с куками, перезагрузка после
POST Войти как админ — POST /api/admin/auth/demo-login
GET Заполнить демо-данными — GET /api/studio/state + redirect на сидер
POST Удалить пользователя — POST /api/e2e/delete-user с confirm

Очередь комментариев для ИИ

Кнопки в панели складывают заявки, которые разбирает Claude Code или Codex

storage/e2e-queue/
# Комментарий со скриншотом:
2026-07-02T…__comment__1a2b3c.json
2026-07-02T…__comment__1a2b3c.png

# Предложение правки сценария:
2026-07-02T…__scenario-edit__….json

# Разбор из Claude Code:
$ ls storage/e2e-queue/
$ cat storage/e2e-queue/*.json

Две кнопки — два потока

Комментарий (у шага) — делает скриншот экрана через getDisplayMedia, просит текст. Заявка привязана к шагу.

Правка сценария (кнопка ✎) — открывает шаги на правку, отправляет before и proposed в очередь.

Если feedback.url пустой — скриншот скачивается, текст копируется в буфер (фолбэк без бэкенда).