Коли з'являються нові функції, тестування залишається найбільшим бар'єром. Як правило, робочий процес відбувається так: створюйте функцію, створюйте PR, натисніть на CI, прокрутіть деякі скріншоти і сподівайтеся, що ніщо не порушується у виробництві, коли користувач потрапляє. Тепер, не помиляйтеся, швидко відправляти нові функції чудово, але ручне тестування просто не може йти в ногу.І хоча інструменти для тестування існують, вони не інтегровані з рештою вашого робочого процесу. Що веде мене до іншого пункту: ми плануємо в одному інструменті, будуємо в іншому, переглядаємо десь в іншому, і розгортаємо в іншому. На щастя, є спосіб. Linear, Cursor, Vercel і QA.tech складають стек інструментів, які працюють разом, автоматично обробляють кожне завдання і дозволяють вам залишатися зосередженим на будівництві. Разом вони замінюють ручні робочі потоки тестування автоматизацією тестування AI, яка працює на кожному PR. У цій статті я проходжу вас через створення демо-додаткового потоку за допомогою цих інструментів. Ви побачите, як вони працюють разом і як вони допомагають вам швидше відправляти, не порушуючи речі. Створення Checkout Flow, який дійсно працює Щоб продемонструвати цей робочий процес, ми побудуємо чотириступеневий потік оплати: Карта перевірки Судноплавна інформація Деталі оплати сторінка підтвердження Відповідь проста: це основний бізнес-процес, який поставляється з декількома крайовими випадками, такими як порожні кошики, скасування платежів, закінчені сесії тощо. Ось набір, який ми будемо використовувати: Лінійний для чіткої і відстежуваної роботи Курсор для будівництва зі швидкістю блискавки Завантажити Instant Preview QA.tech для тестування від кінця до кінця (E2E) Технологія Почнемо з інструменту планування. Плануйте його лінійно, будуйте його курсором Планування в лінійному Я розбиваю додаток Checkout Flow на прості і відстежувані завдання. Основний фокус цієї статті буде на додаванні функціональності Купонні коди до етапу перегляду кошика вашого процесу оплати. По-перше, давайте створимо лінійний квиток. Це може бути щось на кшталт "Функція: Будівництво потоку оплати з валідацією купонів". Потім ми можемо розділити його на невеликі підзадачі відповідно до наших вимог. Для цього демо, ми будемо вводити помилку в функції валідації купонного коду на стороні клієнта. І, щоб підсмажити його, це не буде яскравим помилкою. Це буде складним, який тільки з'являється за певних умов. Іншими словами, той, який проходить через людські відгуки та скриптовані тести. Швидке будівництво з курсором Повний код для нашого демо-програми знаходиться в GitHub . Репозиторий Коли ви відкриваєте курсор, створюйте новий каталог, щоб почати будувати додаток. Припустимо, що ви хочете створити компонент кошика в додатку 4-ступінчастого потоку платежів. Ви могли б дати курсору заклик, наприклад: "Створити компонент кошика для мого додатку, щоб перерахувати елементи з цінами та кількістю". Це створить а та Так само Карта файлів Крок до оплати Зверніть увагу на те, як Cursor обробляє структуру компонентів, типи пристроїв, установку та імпорт пакетів та багато іншого? Ваша робота тепер полягає в тому, щоб зосередитися на бізнес-логіці, наприклад: «Скільки знижки слід застосовувати, коли Купон використовується? » SAVE10 Давайте перейдемо до етапу розгортання за допомогою Vercel. Завантажити Vercel за секунди Розгортання в даний час так само просто, як будівництво з Cursor. Ви не пишете команди, щоб відправити свій код. Це як натискання на панелі приладів: виберіть свій репозиторій GitHub, і віддайте його Vercel для розгортання. Після того, як код виконаний, ми просто натискаємо його на GitHub. Це все, що потрібно; звідти Vercel автоматично обробляє все для розгортання. Але чому Vercel? Просто тому, що він дозволяє переглянути розгортання, перш ніж ваш код буде розбитий у виробництві. Чому Preview Deployments Matter для CI / CD? За допомогою таких інструментів, як Vercel's DX, кожен PR отримує свій власний URL, наприклад , а також повнофункціональне і вічнозелене середовище. checkout-app-pr-987.vercel.app Коли розробник натискає код, який реалізує наш новий процес оплати, а також прихований купон, ось що відбувається автоматично через Vercel: Останній код витягується з GitHub; сама заявка створена; Додаток розміщується на унікальному URL-адресі перегляду, який можна розділити (наприклад, checkout-app-pr-987.vercel.app). Це індивідуальне розгортання забезпечує швидкість. Помилки виправляються без перешкод або уповільнення будь-яких інших проектів. Немає більше «працює на моїй машині». Використання пристрою вже доступне і доступне для тестування. Let QA.tech Handle the Tests Дозвольте QA.tech опрацювати тести Ось і приходить цікава частина: автоматизовані тестування, пов'язані з AI. Замість того, щоб витрачати години на тестування вашого інструменту вручну або на написання та підтримку сценаріїв Playwright або Cypress, ви описуєте випробувальні випадки звичайною англійською мовою, а агент займається рештою. Технологія Додайте свій проект до QA.tech і вкажіть його на свій URL, розгорнутий Vercel. QA.tech потім сканує ваше веб-додаток і дізнається структуру, створюючи графік знань. Ми створимо деякі тести для нашого додатка. Відкрийте чат і опишіть, що ви хочете перевірити. Наприклад, "Створення 3-4 початкових тестів для мого додатка". Звідти QA.tech автоматично генерує тестові кроки. Пам'ятайте, що він вже знає все про ваше додаток, наприклад, де знаходиться кошик, як заповнити форми доставки, де живе кнопка оплати та сторінку підтвердження. Ми додамо ще один тест для підтвердження коду купона на мобільних екранах. Ви можете створювати цей тест-купе вручну за допомогою кнопки «Додати тест-купе» або генерувати його в чаті, запропонувавши щось на зразок: «Тестуйте повідомлення про підтвердження коду купона для мобільних екранів на кроці 3». QA.tech автоматично генерує тести на основі вашого входу та запускає їх безпосередньо проти вашого додатка. Помилка, яку залишив Cursor під час створення додатка, була спіймана QA.tech, що призвело до провалу тесту. Ми також надали нам всі відповідні кроки, разом з журналами, деталями мережі та результатами тестування.Це саме розуміння, яке нам потрібно, щоб ефективно дебютувати проблему.Перед тим, як виправити це, давайте підключимо інструменти, щоб вони працювали разом. Технологія Перш за все, підключіть перейдіть до Налаштування → Інтеграції → GitHub App. Виберіть відповідний репозиторій тут, і дозвольте варіант «Запустити PR» з тестування запитів. GitHub додаток Далі підключіть Linear, щоб наші помилки могли протікати безпосередньо в наш інструмент управління проектами. Для цього перейдіть до параметрів Налаштування → Організаційні з'єднання → Лінійне підключення. Потім, в налаштуваннях проекту → Інтеграції → Лінійний, виберіть вашу команду з падіння та збережіть її. Зауважте, як QA.tech вже вказав наш невдалий випробувальний випадок під розділом "Проблеми", даючи вам можливість експортувати цю помилку безпосередньо до вашого облікового запису Linear? Просто натисніть «Створити проблему в лінійному режимі» на панелі. Ваша лінійна панель приладів тепер покаже проблему, створену з деталями, такими як тип, перший погляд, опис та посилання на тест. Технологія Ми виправимо цю помилку і подивимося, як інструменти працюють разом. Fix, Push, Repeat (Реальний робочий процес) Повернемося до курсора.Ми виправимо проблему, визначивши, де виникла помилка. в Проблема полягає в тому, що ми використовуємо у класі підтвердження повідомлення, що змушує його не відображатися на мобільних екранах. PaymentStep.jsx hidden <div className="bg-indigo-50/60 p-4 rounded-2xl border border-indigo-200 border-dashed"> <p className="text-sm font-semibold text-indigo-700">Have a coupon?</p> <div className="sm:flex-row flex flex-col gap-3 mt-3"> <input type="text" value={couponInput} onChange={(event) => onCouponInputChange(event.target.value)} placeholder="SAVE10" className="text-slate-900 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-100 px-4 py-3 w-full text-base bg-white rounded-xl border border-indigo-200 shadow-inner" /> <button type="button" onClick={onApplyCoupon} className="hover:bg-indigo-500 px-6 py-3 text-base font-semibold text-white bg-indigo-600 rounded-xl transition" > Apply </button> </div> {couponStatus === "applied" && ( <p className="sm:block pt-3 text-sm font-medium text-emerald-600"> SAVE10 applied — enjoying 10% off the subtotal. </p> )} {couponStatus === "invalid" && ( <p className="sm:block hidden pt-3 text-sm font-medium text-rose-600"> That code is not active. Try SAVE10 for this order. </p> )} </div> Після цього натисніть останні зміни і створіть PR з новою філією. Зараз додаток GitHub QA.tech виявляє PR. Він аналізує ваші зміни та вибирає відповідні тести, такі як тести валідації купонів, які ми створили раніше. Він виконує ці тести проти URL-адреси перегляду Vercel: без ручного втручання, без натискання через додаток самостійно. бот QA.tech буде виконувати тести і коментувати в PR, щоб надати користувачеві оновлення в реальному часі. У нашому QA.tech панелі всі тести пройшли, і повідомлення про перевірку тепер з'являється правильно на мобільному пристрої. QA.tech бот затверджує PR і коментарі на ваш PR з повним резюме тесту. Повний процес (обновлення коду, злиття, розгортання та тестування) тривав приблизно 5-8 хвилин без ручного втручання. Кожен майбутній запит на витяг (PR) буде слідувати одному і тому ж процесу: робити зміни, натиснути і дозволити тестуванню автоматично. Обкласти його вгору Кожен інструмент в цьому новому AI-будівельнику відрізняється однією річчю.Linear забезпечує фокус, необхідний для швидкого планування та відстеження проблем, Cursor прискорює робочий процес розробки продукту, Vercel дає нам миттєві URL-адреси для перегляду розгортання, а QA.tech автоматично обробляє тести. Незважаючи на важливість кожного кроку в процесі, тестування часто є однією з речей, на які команди витрачають найменше часу. І найкраща частина полягає в тому, що вам не потрібно підтримувати тестові скрипти. Додати функцію, і QA.tech створить нові тести. Змінити потік інтерфейсу користувача, і тести будуть оновлюватися автоматично. Готові припинити писати, підтримувати та дебютувати крихкі тести E2E? Отримати демо сьогодні і дізнатися, як QA.tech трансформує ваш робочий процес тестування. Готові припинити писати, підтримувати та дебютувати крихкі тести E2E? Дізнайтеся, як QA.tech трансформує ваш робочий процес тестування. Отримати демо
