Claude Code + TestSprite: кратко о главном
🎯 О чём этот конспект: Пошаговое руководство по созданию полноценного B2B SaaS-продукта (Signal Board — сервис сбора обратной связи и публичных роадмапов) с помощью Claude Code и его сквозному автономному тестированию через платформу AI-агентов TestSprite. Разбирается полный цикл: от передачи PRD в нейросеть до автоматического поиска скрытых багов в биллинге, ролях и пользовательских сценариях перед релизом.
👤 Кому будет полезно: Вайбкодерам, инди-хакерам, разработчикам и фаундерам, которые создают веб-приложения с помощью AI-агентов (Claude Code, Cursor, Windsurf) и хотят исключить критические баги в платежах, авторизации и бизнес-логике без ручного тестирования.
✨ Что получите: Готовый фреймворк запуска B2B SaaS: структуру системного промпта и PRD, пайплайн подключения TestSprite для автоматического прогона десятков E2E-тестов реальными браузерными AI-агентами, а также метод закрытия цикла багфикса через скармливание PDF-отчётов обратно в Claude Code.
1. Проблема «зелёного билда»: почему компиляция кода в Claude Code не гарантирует работу SaaS
Контекст: Когда AI-ассистент (Claude Code, Cursor) сообщает, что задача выполнена, это означает лишь то, что код успешно скомпилировался, зависимости разрешены, а базовые синтетические тесты пройдены. Однако в реальных денежных потоках (money flows) B2B-приложений кроется масса скрытых дефектов: сбои при вводе промокодов, зависание интерфейса при повторном клике на кнопку оплаты, поломка лимитов рабочих мест при смене тарифа или некорректные редиректы. Человек не всегда может вручную прокликать сотни комбинаций сценариев, а пользователи при столкновении с ошибкой на этапе оплаты просто уходят.
Тайминг: , ,
Выгода: Предотвращение потери платящих клиентов на этапе онбординга и оплаты за счёт выявления скрытых логических ошибок до выхода в прод.
Как применить:
- Шаг 1: Разделение понятий «Build Passes» и «Flows Work» — Никогда не публикуйте приложение сразу после заявления нейросети об успешной сборке. Составьте список критических сценариев (биллинг, сброс пароля, лимиты, роли).
- Шаг 2: Формирование сценариев для проверки критических путей — Включите в тестирование негативные кейсы: отклонённые карты, недостаток средств, истекшие промокоды, повторные клики по кнопке покупки.
- Шаг 3: Автоматизация проверки через внешние браузерные агенты — Используйте инструменты, имитирующие действия реального пользователя в браузере, а не полагайтесь только на внутренние юнит-тесты LLM.
[Чек-лист критических потоков перед релизом]:
1. Регистрация нового воркспейса -> достижение лимита бесплатных запросов (48/50 -> 50/50).
2. Попытка ввода невалидного промокода -> проверка вывода ошибки без падения формы.
3. Оплата тарифа Pro тестовой картой с отказом -> проверка блокировки повторной отправки.
4. Успешная оплата -> моментальное снятие ограничений воркспейса.
5. Отмена подписки -> сохранение доступа до конца расчётного периода -> возобновление.
6. Попытка доступа участника (Member) к настройкам биллинга (разрешено только Owner).Результат: Чёткое понимание уязвимых мест логики приложения и готовность к сквозной валидации.
2. Архитектура Signal Board: от системного промпта до деплоя в Vercel
Контекст: Для демонстрации процесса автор создаёт Signal Board — B2B SaaS для сбора фидбека и публичного роадмапа. Архитектура приложения строится по майлстонам: единое локальное хранилище состояния (localStorage как единый блокнот/single source of truth), предзаполненные демо-данные для компаний Acme (Free) и Northwind (Pro), публичная доска с защитой от накрутки (один голос на один email), бэкофис с объединением дубликатов запросов (merging requests), управление командой с разделением прав (Owner vs Member) и модуль подписок ($29/мес, $290/год, промокод LAUNCH50).
Тайминг: , , , ,
Выгода: Быстрая сборка масштабируемого MVP за несколько минут с предсказуемой структурой данных и готовым UI.
Как применить:
- Шаг 1: Инициализация проекта с правильным ролевым промптом — Задайте Claude Code контекст ментора и чёткие правила ведения диалога.
Part 0: Explain as you go for this whole session. You're building Signal Board with me live and people are watching. Talk to me like a teacher explaining to a smart 12-year-old. After every step, say what you did, what we should see when we run it, and if something goes wrong, explain why. End with a short status update and never print my API keys.- Шаг 2: Передача PRD с майлстонами в Claude Code — Скормите полный документ требований (PRD), описывающий сущности, логику ролей, тарифную сетку и правила слияния тикетов.
- Шаг 3: Изоляция состояния приложения — Реализуйте слой работы с данными так, чтобы ни одна страница не писала в хранилище напрямую в обход валидаторов (например, проверка дубликатов email и нормализация строк).
- Шаг 4: Деплой на Vercel через GitHub — Создайте репозиторий, запушьте код и подключите его к Vercel для получения публичного preview URL, необходимого для тестирующих агентов.
# Инициализация и отправка в удалённый репозиторий
git init
git add .
git commit -m "feat: initial signal board build with milestones 1-6"
git branch -M main
git remote add origin https://github.com/your-username/signal-board-test.git
git push -u origin mainРезультат: Развёрнутое на Vercel работающее B2B SaaS-приложение с публичной доской, дашбордом, системой биллинга и предзаполненными данными.
3. Настройка TestSprite: подключение URL, тестовых кредов и контекста PRD
Контекст: TestSprite — специализированная платформа автономного тестирования на базе AI-агентов. Для начала тестирования фронтенда агентам требуется прямой доступ к развёрнутому приложению, валидная тестовая учётная запись и контекст того, как именно система должна работать (PRD и системные спецификации). Это позволяет агентам не просто «кликать наугад», а понимать бизнес-логику: какие поля обязательны, сколько запросов разрешено на бесплатном тарифе и что должно происходить при объединении задач.
Тайминг: , , ,
Выгода: Глубокое тестирование интерфейса с учётом бизнес-требований проекта без необходимости вручную писать тысячи строк E2E-скриптов на Playwright или Cypress.
Как применить:
- Шаг 1: Создание проекта в TestSprite — Войдите в личный кабинет TestSprite, нажмите New Project и выберите тип тестирования Front-end UI.
- Шаг 2: Указание публичного адреса — Вставьте живой URL приложения из Vercel (например,
https://signal-board-app.vercel.app) и задайте имя проекта. - Шаг 3: Настройка параметров доступа (Access Details) — Передайте агентам учётные данные владельца воркспейса для входа в закрытую часть приложения.
Email: owner@acme.test
Password: signal123!- Шаг 4: Загрузка PRD и контекстных файлов — Экспортируйте ваш PRD в формат
.docxили.mdи загрузите в поле Upload PRD. В поле Advanced Context / Extra Instructions добавьте файл README с описанием тестовых сценариев и граничных условий, на которые агентам нужно обратить особое внимание.
Результат: Проект сконфигурирован в TestSprite, AI-агенты получили доступы и полную спецификацию продукта.
4. Многоагентный краулинг: исследование приложения семью параллельными агентами
Контекст: После получения доступов TestSprite запускает пул из 7 независимых AI-агентов. Первый агент выполняет первичную авторизацию в системе с переданными кредами, после чего сессия распределяется между остальными агентами. Каждый агент берёт на себя изолированный функциональный блок приложения: управление воркспейсом, проверка сброса демо-данных, модерация тикетов в инбоксе, биллинг и чекаут, приглашение участников, публичная доска и аутентификация.
Тайминг: , , , , ,
Выгода: Параллельное исследование всех уголков приложения за 3–5 минут с фиксацией полного пошагового лога действий и снимков экрана.
Как применить:
- Шаг 1: Мониторинг фазы Exploration — Запустите процесс исследования. В реальном времени в дашборде отображается прогресс каждого из 7 агентов.
- Шаг 2: Отслеживание тестирования биллинга (наиболее сложный агент) — Наблюдайте за агентом биллинга, который совершает до 30+ шагов:
- Ввод валидных и невалидных номеров карт (отказы, нехватка средств, ошибки CVC).
- Применение несуществующих купонов (например,
not a code). - Применение скидки
LAUNCH50(50% скидка на месячный план, блокировка применения к годовому). - Апгрейд с плана Free на Pro за $29/мес.
- Проверка отмены подписки и кнопки её возобновления.
- Шаг 3: Проверка сценариев аутентификации и ролей — Агент проверяет разлогин, попытку входа с некорректным паролем, переход по прямым ссылкам без авторизации и генерацию инвайт-ссылок для коллег.
Результат: Полная карта интерфейса и сформированный лог поведения всех интерактивных элементов интерфейса.
5. Генерация и прогон 48 сквозных E2E-тестов
Контекст: На основе данных, собранных семью агентами-исследователями, TestSprite автоматически синтезирует матрицу формальных тест-кейсов. Для Signal Board система сгенерировала 48 тестов по 6 ключевым пользовательским сценариям. Пользователь может просмотреть список, снять галочки с неактуальных тестов или добавить свои требования, после чего платформа запускает одновременный прогон тестов в изолированных браузерных окружениях.
Тайминг: , , , ,
Выгода: Глубокое сквозное тестирование без написания кода тестов вручную, выявляющее баги, которые невозможно заметить при поверхностной ручной проверке.
Как применить:
- Шаг 1: Ревью плана тестирования (Plan Tests) — Ознакомьтесь с предложенным списком сценариев:
- Голосование за публичные тикеты (Upvoting).
- Создание новых запросов и проверка счетчика лимита (1/50).
- Фильтрация тикетов по статусам (
shipped,in progress,planned,open). - Приглашение тиммейта и принятие инвайта.
- Проверка ограничений ролей (Member vs Owner).
- Шаг 2: Запуск выполнения (Generate & Run) — Нажмите кнопку запуска 48 тестов и наблюдайте за ходом выполнения в реальном времени через визуальный дашборд.
- Шаг 3: Анализ упавших тестов — По завершении прогона отфильтруйте тесты со статусом Failed и Blocked. TestSprite предоставляет видеозаписи, пошаговые скриншоты, точное описание сбоя (Observations), вероятную причину (Cause) и готовый промпт для исправления (Fix Suggestion).
[Пример зафиксированного бага 1]:
Тест: Opening a merged request from the public board.
Проблема: При переходе по ссылке объединенного запроса (CSV Export) не происходит редирект на канонический тикет, куда он был слит.
Причина: Роут публичной страницы отдает устаревшие данные без связи canonical merge target.
[Пример зафиксированного бага 2]:
Тест: Workspace member billing access.
Проблема: При попытке участника с ролью Member перейти на страницу чекаута отображается 404 ошибка вместо экрана с предупреждением «Only workspace owner can manage billing».Результат: Детальный отчёт с 5 упавшими и 3 заблокированными тестами, сопровождаемый скриншотами и точными формулировками причин сбоев.
6. Закрытие цикла: экспорт отчёта TestSprite в Claude Code для автоматического фикса
Контекст: Вместо того чтобы вручную переносить каждую ошибку и объяснять AI-модели контекст, TestSprite позволяет скачать полный отчёт в формате PDF или скопировать сгенерированный Fix Prompt. Этот отчёт скармливается напрямую в Claude Code с просьбой разобрать найденные дефекты простым языком и внести необходимые правки в кодовую базу с последующим коммитом.
Тайминг: , , ,
Выгода: Сокращение времени на отладку и устранение регрессионных багов с нескольких часов до 5–10 минут.
Как применить:
- Шаг 1: Экспорт отчёта — В дашборде TestSprite перейдите в раздел View Report и скачайте файл Detailed Test Report (PDF).
- Шаг 2: Загрузка отчёта в Claude Code — Поместите PDF-файл в проект или прикрепите его к сессии Claude Code.
- Шаг 3: Запуск команды на анализ и исправление — Отправьте промпт на исправление найденных багов.
Here are all the tests and failures that TestSprite found in the attached PDF report.
Please discuss them ELI5 first, then fix all the bugs:
1. Fix the canonical redirect for merged requests on the public board.
2. Fix the 404 checkout page for workspace members (show owner-only restriction notice).
3. Fix team badges not appearing next to replies posted by workspace owners.
Verify everything locally, commit the changes, and push to GitHub so Vercel redeploys.- Шаг 4: Повторный прогон (Rerun) — После того как Claude Code внесёт правки, выполнит билд и запушит код на Vercel, вернитесь в TestSprite и нажмите Rerun Failed Tests для подтверждения устранения дефектов.
Результат: Полностью исправленное, стабильное и протестированное B2B SaaS-приложение, готовое к реальным пользователям и платежам.
Claude Code + TestSprite: ответы на частые вопросы
В: Заменяет ли TestSprite юнит-тесты и integration-тесты в коде?
О: TestSprite дополняет их на верхнем уровне E2E. Юнит-тесты проверяют изолированные функции, тогда как агенты TestSprite работают в реальном браузере с DOM-деревом, проверяя многошаговые пользовательские сценарии, редиректы, стили и интеграцию с внешними формами.
В: Можно ли использовать TestSprite на localhost без деплоя на Vercel?
О: Да, через официальный TestSprite CLI. Вы можете установить CLI в терминале, настроить API-ключ и прогнать тесты локально прямо через Claude Code перед отправкой кода в репозиторий. Однако автор рекомендует использовать preview URL на Vercel для максимального приближения к боевому окружению.
В: Как агенты тестируют биллинг, если у меня подключен реальный Stripe?
О: Для тестирования биллинга используются тестовые ключи платежного шлюза (Stripe Test Mode) либо эмулированный слой платежей с тестовыми номерами карт (успешные транзакции, отказы, 3D Secure, нехватка средств). Агенты самостоятельно вводят тестовые реквизиты и проверяют реакцию UI.
В: Что делать, если AI-агент застрял на форме авторизации или капче?
О: Для автоматических тестов рекомендуется отключать капчу на staging/preview окружениях или передавать bypass-токены. Авторизационные данные (логин/пароль) передаются в блоке Access Details при создании проекта, и агент авторизуется перед началом краулинга.
В: Сколько времени занимает полный цикл от PRD до полностью оттестированного SaaS?
О: По методологии из видео: генерация кода и майлстонов в Claude Code занимает около 15–20 минут, первичное исследование агентами TestSprite — 3–5 минут, генерация и прогон 48 тестов — 5–7 минут, автофикс багов через Claude Code — ещё 5 минут. Итого рабочий продукт получается менее чем за 45 минут.
Claude Code + TestSprite: инструменты и ссылки из видео
- TestSprite — автономная платформа для сквозного тестирования веб-приложений с помощью AI-агентов —
https://testsprite.com(упомянут в видео). - Claude Code — агентный CLI-инструмент разработки от Anthropic на базе Claude 3.5 Sonnet / Opus —
https://anthropic.com(упомянут в видео). - Vercel — платформа для хостинга и мгновенного деплоя фронтенд-приложений —
https://vercel.com(упомянут в видео). - GitHub — система управления репозиториями и версионированием кода —
https://github.com(упомянут в видео). - Quiet Precision Design System — авторская система дизайна и UI-компонентов для чистого внешнего вида SaaS — упомянут в видео.
Конспект создан на основе видео «I Built a SaaS with Claude Code, Then Let AI Try to Break It» канала Solo Founder / Oliver. Все права на оригинальный материал принадлежат авторам. Источник: https://www.youtube.com/watch?v=mfgeiH_5cjw
