E2E Panel — Chrome-расширение для e2e-тестирования

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

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

1

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

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

2

Установи расширение

Загрузи extension/ как unpacked extension в chrome://extensions. Или установи из Chrome Web Store.

3

Кликни и тестируй

Открой сайт, кликни иконку E2E Panel — панель в углу. Шаги подчёркиваются, прогресс в localStorage, действия дёргают API.

Установка

Расширение — единственный способ подключения. Ничего не встраивай в код проекта

Chrome Web Store

Когда расширение опубликовано — установка в один клик.

Открой страницу расширения в Chrome Web Store
Нажми «Установить»
Иконка E2E Panel появится в тулбаре

Load unpacked (для разработки)

Если расширение ещё не в сторе — загрузи из репозитория.

Склонируй репозиторий e2e-panel
Открой chrome://extensions
Включи «Режим разработчика» (правый верх)
«Загрузить распакованное» → выбери папку extension/

Авто-запуск на домене. Открой попап расширения на тестируемом сайте → поставь галочку «Авто-запуск на этом домене». Панель будет появляться автоматически на всех страницах домена. Список доменов хранится локально в chrome.storage. URL загрузчика настраивается в попапе (для локальной отладки — http://localhost:3070/loader.js).

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

→

POST /api/e2e/feedback

→

storage/e2e-queue/

→

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 пустой — скриншот скачивается, текст копируется в буфер (фолбэк без бэкенда).