1. Что это и зачем
Dev Tester — приложение для QA-инженеров. Помогает вести тестирование как в Trello/Jira, но плотно интегрировано с GitHub и Claude AI.
Цикл работы
- Разработчик открывает Pull Request в GitHub.
- Webhook автоматически создаёт задачу в колонке Тестирование.
- QA прогоняет чек-листы для этой задачи.
- Если шаг провален — автоматически создаётся баг-задача в Бэклоге.
- Разработчик чинит, пушит снова — та же задача обновляется (не плодим дубли).
- QA подтверждает — карточка едет в Готово.
Что внутри
- Канбан-доска с 6 колонками.
- Чек-листы тест-кейсов с готовыми шаблонами.
- GitHub webhook — push/PR превращаются в задачи.
- AI-помощник Claude — чат, генерация чек-листов, баг-репорты, анализ PR.
- Whiteboard (drawio) на каждую задачу + AI-правки и анализ диаграмм.
- Мульти-тенант: каждый аккаунт ведёт свои проекты, чужого никто не видит.
Стек: ванильный HTML/CSS/JS на фронте, Node.js + Express + PostgreSQL на бэке, Claude API. Без бандлеров и Docker.
2. Первые шаги
- Открой приложение — если ты не залогинен, появится модалка Вход / Регистрация.
- На вкладке Регистрация укажи имя, email и пароль (минимум 8 символов). После регистрации автоматически создаётся первый проект
«Имя's project» и ты попадаешь на доску.
- В шапке слева — селектор проектов и кнопка ⚙ (Project Settings). В Settings можно переименовать проект, добавить GitHub-репо, настроить webhook.
- Создать ещё один проект — кнопка
+ NEW PROJECT в селекторе.
- Создать задачу вручную — кнопка + Задача справа в шапке.
Один аккаунт может вести несколько проектов. Задачи и чек-листы изолированы: переключаешь проект — видишь только его доску.
3. Доска (Канбан)
Главный экран приложения. Слева направо — стадии работы над задачей.
Колонки
- Бэклог — задачи в очереди, ещё не взяты в работу. Сюда же падают авто-баги.
- В работе — разработчик пишет код.
- Code Review — код готов, идёт ревью.
- Problems — нашлись проблемы, нужно переделать или обсудить.
- Тестирование — QA прогоняет чек-листы. Сюда автоматически попадают PR из GitHub.
- Готово — принято и закрыто.
Действия
- Перетащить карточку — мышкой между колонками. Внутри колонки тоже можно менять порядок.
- Открыть задачу — клик по карточке.
- Создать задачу — кнопка
+ Задача в шапке.
- Фильтры — сверху доски: по приоритету, исполнителю, метке, колонке. Очистить — выбрать пустое значение.
При перемещении в Тестирование система запоминает время старта. При перемещении в Готово — время финиша. На дашборде по этим меткам считается среднее время прохождения тестирования.
4. Карточка задачи
Открывается по клику на карточку или на + Задача. Две вкладки: FORM (поля) и ▦ WHITEBOARD (доска для рисования).
Поля
- Название — обязательное, коротко суть.
- Описание — что нужно сделать или что упало. Markdown не рендерится, просто текст.
- Приоритет — low / medium / high / critical. Влияет на цвет бейджа на карточке.
- Assignee — на кого назначено. Произвольная строка.
- Метки — теги через запятую (
bug, ui, hotfix).
- Ветка — git-ветка, заполняется автоматически из webhook.
- PR URL — ссылка на Pull Request в GitHub. В карточке появляется ссылка PR ↗.
- Изменённые файлы — список путей из PR. Используется AI-анализом для оценки зон риска.
Что такое PR (Pull Request)
Когда разработчик хочет влить свои изменения в основной код, он:
- Создаёт ветку от
main, например feature/login.
- Пишет код и коммитит туда.
- Открывает на GitHub Pull Request — заявку «прошу влить мою ветку в main». На странице PR видны изменённые файлы, diff, комментарии ревьюеров.
- После апрува PR мержится — изменения попадают в основной код.
В Dev Tester задача с PR-ссылкой = QA-заявка «вот это нужно протестировать перед мержем».
Удаление
Кнопка Удалить внизу модалки. Удаление каскадно: вместе с задачей удаляются её чек-листы и whiteboard.
5. Чек-листы тестирования
Чек-лист — это список проверяемых шагов. У каждого шага свой статус.
Шаблоны
- Smoke — быстрые проверки «вообще работает или нет».
- Regression — проверка что старая функциональность не сломалась.
- API — для бэкенда: эндпоинты, статусы, контракты.
- UI — формы, валидация, навигация, адаптив.
- Custom — пустой, ты сам пишешь шаги (или генеришь AI'ем).
Статусы шагов
- Не тестировался — начальное состояние.
- Пройден — проверка успешна.
- Провален — найден баг.
- Заблокирован — проверить нельзя (зависит от другой задачи, нет окружения).
Авто-баг. Как только переключаешь шаг в Провален — система создаёт новую задачу в Бэклоге с тегом bug, приоритетом high и привязкой к этому шагу. Шаг помечается ссылкой → баг #N. Повторное переключение того же шага новый баг НЕ создаст — связь уже есть.
Как добавить
- Открой задачу.
- Внизу — секция чек-листов. Выбери шаблон, дай название, нажми Добавить.
- Добавляй шаги вручную или сгенери через AI (см. раздел 7).
- По мере прохождения переключай статусы шагов.
6. GitHub-интеграция (webhook)
Webhook = «сигнал из GitHub в Dev Tester». Каждый push или PR в твоём репозитории автоматически создаёт/обновляет задачу.
Как подключить
- В Dev Tester открой ⚙ Project Settings в шапке.
- Скопируй Webhook URL и Webhook Secret. URL уникален для проекта, secret тоже.
- В GitHub открой свой репозиторий → Settings → Webhooks → Add webhook.
- Payload URL — вставь URL из Settings.
- Content type —
application/json.
- Secret — вставь Secret из Settings.
- Выбери события: Pull requests и Pushes (можно «Send me everything», но лишний шум).
- Нажми Add webhook.
Что произойдёт
- Push в репо — создаётся задача в Тестирование, заголовок — первая строка commit message.
- Открытие PR — задача с pr_url, веткой, автором и списком изменённых файлов.
- Обновление PR (новые коммиты) — та же задача обновляется, дубль не появляется.
Подпись проверяется по HMAC-SHA256 с твоим Secret. Если кто-то узнает URL, без Secret подделать запрос не сможет. Если думаешь что Secret утёк — нажми Rotate в Project Settings, старый перестанет работать.
7. AI-помощник (Claude)
В каждой задаче внизу формы — секция AI. Появляется после первого сохранения задачи (нужен id чтобы дать AI контекст).
Выбор модели
Сверху AI-секции — селектор:
- Haiku 4.5 — быстрая и дешёвая, годится для простых задач. Дефолт.
- Sonnet 4.6 — баланс скорости и качества.
- Opus 4.7 — максимум интеллекта, для сложных рассуждений.
Выбор запоминается в браузере.
Четыре функции
- Чат — задай любой вопрос про задачу. Claude видит её название, описание, метки, изменённые файлы, существующие чек-листы и whiteboard. Ctrl+Enter — отправить.
- Генерация чек-листа — выбери шаблон, нажми кнопку, Claude предложит шаги. Можно сохранить как чек-лист одной кнопкой.
- Анализ PR — на основе списка изменённых файлов Claude скажет: зоны риска, рекомендуемые тесты, что точно проверить.
- Баг-репорт — на проваленном шаге появляется кнопка 🤖. По клику Claude перепишет заголовок и описание авто-бага в формате «Шаги воспроизведения / Ожидаемый / Фактический».
Если видишь 503 ai_disabled — на сервере не настроен ANTHROPIC_API_KEY. Можно добавить свой ключ только для своего проекта в Project Settings → Anthropic key override.
8. Whiteboard (доска для рисования)
На каждую задачу — своя доска drawio. Открывается переключателем ▦ WHITEBOARD на верхнем табе задачи.
Возможности drawio
- Полный редактор: фигуры, стрелки, цвета, библиотеки шаблонов.
- Автосохранение — рисуешь, через секунду сохраняется в БД.
- Тёмная/светлая тема подхватывается.
AI-функции
Тулбар сверху панели:
- AI: изменить — впиши инструкцию («добавь блок Логин слева от Регистрации», «нарисуй flow регистрации с тремя этапами»), нажми Enter. Claude вернёт новый XML, drawio автоматически перерисует диаграмму.
- AI: анализ — открывает боковую панель справа с разбором: что нарисовано, какая логика, что можно улучшить, что протестировать.
- Откатить — появляется после первой AI-правки. Возвращает диаграмму к состоянию до этой правки. Живёт до закрытия задачи.
Whiteboard полезен для: набросков архитектуры, flow тест-сценариев, диаграмм состояний, mind-map'ов багов. AI его читает в чате — можно спросить «опиши что нарисовано» в обычном чате задачи.
9. Проекты
Каждый аккаунт может вести несколько проектов. Каждый проект — отдельная песочница со своими задачами, чек-листами, webhook'ом.
Селектор и Settings
- В шапке слева — выпадающий список проектов и кнопка ⚙ (Project Settings).
- Создать новый — пункт
+ NEW PROJECT в селекторе.
- Переключение — мгновенно: доска и дашборд перезагрузятся.
Поля Project Settings
- Name — отображаемое имя.
- GitHub repo — справочно (например
username/dev-tester).
- Anthropic API key override — свой ключ Claude. Если задан — все AI-вызовы по этому проекту идут через него (полезно если у сервера ключ закончился или ты хочешь биллинг на свой аккаунт).
- Webhook URL — куда GitHub шлёт события. Кнопка Copy.
- Webhook Secret — скрытый по умолчанию. Show покажет, Copy скопирует, Rotate сгенерирует новый (старый перестаёт работать — не забудь обновить в GitHub).
- Delete project — каскадно удаляет всё содержимое. Без отмены.
10. Дашборд
Вкладка Дашборд в шапке. Показывает метрики по активному проекту.
- Задач в Тестировании — сколько ждёт QA прямо сейчас.
- Багов за неделю — сколько задач с тегом
bug создано за последние 7 дней.
- Среднее время Тестирование → Готово — медиана по закрытым задачам. Полезно как метрика «скорости QA».
- Распределение по колонкам — сколько задач сейчас в каждой колонке.
Метрики обновляются при каждом открытии вкладки и при смене проекта.
11. Темы и PWA
Темы
Кнопка ◐ в шапке — переключает светлую/тёмную тему. Выбор сохраняется в браузере. Первый заход подхватывает системную тему ОС.
PWA — установка как приложение
Dev Tester — Progressive Web App. В Chrome / Edge:
- Открой приложение в браузере.
- В адресной строке справа появится иконка установки (или меню ⋮ → Установить Dev Tester).
- После установки откроется как нативное окно, иконка появится в меню Пуск / Dock.
Что даёт PWA:
- Запускается отдельным окном, без вкладок браузера.
- App-shell кешируется — открывается мгновенно даже без сети (но API-вызовы требуют связь).
- Иконка приложения, splash screen.
После обновления приложения может потребоваться Ctrl+F5, чтобы service worker подтянул новую версию.
12. Частые вопросы (FAQ)
Откуда задачи в «Тестирование»?
Из GitHub webhook (раздел 6). Если ничего не появляется — проверь что webhook в репозитории помечен Active и в Recent Deliveries отдаёт 200 OK. Если 401 — Secret не совпадает.
AI не отвечает, пишет 503 ai_disabled
На сервере не настроен ANTHROPIC_API_KEY. Варианты: попроси админа сервера добавить ключ, или вбей свой в Project Settings → Anthropic key override.
Не вижу чужие задачи / проекты
Это by design. Мульти-тенант: каждый аккаунт видит только свои проекты. Команды (members) пока не реализованы.
Whiteboard не открывается / зависает
Drawio загружается с внешнего домена embed.diagrams.net. Если хост недоступен — перезагрузи модалку (закрой и открой задачу) или проверь интернет/блокировщики.
Изменил кнопку, но в браузере старое
Service worker кеширует статику. После обновления сервера нажми Ctrl+F5.
Как сменить пароль
Пока только через CLI на сервере: npm run create-user <email> <name> <newpassword> с тем же email — перезапишет пароль.
Где Claude API key для своего проекта?
В Project Settings → Anthropic key override. Получить ключ — на console.anthropic.com (создать API key). Если поле пустое — используется ключ сервера.
Webhook secret «протёк» — что делать?
В Project Settings нажми Rotate рядом с секретом. Сгенерируется новый, старый перестанет принимать запросы. Не забудь обновить secret в настройках webhook на GitHub.