Шинэ шинж чанарыг хөгжүүлэх үед, туршилтын хамгийн том бутлуур юм. Одоогоор, ажлын үйл явц дараах хэлбэрээр байна: онцлог үүсгэх, PR үүсгэх, CI-д дарна уу, зарим дэлгэц зурвас дамжуулан шилжих, хэрэглэгчийн харах үед үйлдвэрлэлд ямар ч ач холбогдолгүй байхыг хүсч байна. Одоо, танд хязгааргүй байх уу, шинэ шинж чанарыг хурдан дамжуулах маш сайн юм, гэхдээ гарын авлага туршилт нь зүгээр л дараах байх болно. Тэгээд туршилтын арга хэрэгслүүд байдаг ч, тэд таны ажлын үйл явцыг өөр өөрчлөн integrated биш юм. Энэ нь найдвартай хэдий ч туршилт хоосон эсвэл тэднийг зөв хийхгүйгээр тээврийн юм. Бид нэг хэрэгсэлтэй төлөвлөж, өөр нэг хэрэгсэлтэй үүсгэх, өөр өөр нэг газар дээр үзэх, өөр өөр нэг хэрэгсэлтэй хуваалцах. Дараа нь бид олон дэлгэц зурвасын, багны оюутнуудыг, дэлгэрэнгүй мэдээллийг хуваалцахыг туршиж байна. Гүйцэтгэх, байдаг арга. Linear, Cursor, Vercel, болон QA.tech нь нэгтгэсэн арга хэрэгслүүдийн багц юм. Эдгээр арга хэрэгслүүдийг автоматаар ажиллуулах, та барилга дээр төвлөрсөн байх боломжийг олгодог. Бүх нэгтгэсэн, тэд бүх PR-д ажиллуулах AI-ийн туршилтын автоматжуулалттай гарын авлагатай. Энэ нийтлэлд би энэ арга хэрэгслүүдийг ашиглан demo checkout flow-ийн апп бий болгохын тулд тавтай морилно уу. Та эдгээр арга хэрэгслүүд ашиглан хэрхэн хамтран ажилладаг бөгөөд тэд танд илүү хурдан тээвэрлэхэд туслах вэ? Үнэндээ ажилладаг Checkout Flow бий болгох Эдгээр үйл явцыг үзүүлэхийн тулд бид 4-ийн шатанд тавтай морилно уу: Автомашины Review Газрын мэдээлэл Үнэгүй төлбөр мэдээлэл Бүртгүүлэх хуудас Хэрэв та юу вэ? Хэрэв та юу вэ? Хэрэв та юу вэ? Хэрэв та юу вэ? Хэрэв та юу вэ? Хэрэв та юу вэ? Хэрэв та юу вэ? Энд нь бид ашиглаж болно Stack: Linear нь ягаан тухтай, илрүүлэх ажил Курсор нь гэрэл хурдтай барилга Vercel нь Instant Preview Deploys-ийг ашигладаг QA.tech (E2E) тест хийх Бүтээгдэхүүн Бид төлөвлөгөөний хэрэгсэлээс эхэлнэ. Plan It In Linear, Build It In Cursor Линеар төлөвлөгөө Би Checkout flow-ийн апп-ийг хялбар, дагаж болно. Энэ нийтлэлын гол төвлөрөг нь тавтай морилно ууны үйл явц дахь Cart Review үе шат дээр Coupon Codes функцийг нэмж болно. Эхлээд, бид Линеар билет үүсгэх болно. Энэ нь "Функц: Купон баталгаажуулалттай төлбөрний дамжуулах үүсгэх." Дараа нь бид бидний шаардлагын дагуу жижиг доорх үйл ажиллагаа явуулж болно. Энэ demo-ийн хувьд, бид Coupon Code-ийн үйлчлүүлэгчийн хуудсуудтай баталгаажуулалтыг буцаж болно. Тэгээд энэ нь хатуу, энэ нь хатуу буцаж биш болно. Энэ нь зөвхөн тодорхой нөхцөл байдалтай хатуу байх болно. Үүнээс гадна, энэ нь хүний үнэлгээ, скрипт туршид амархан байх болно. Курсортай хурдан үүсгэх Манай демо програмын бүрэн код GitHub-д байна . Ажлын Хэрэв та Cursor-ийг нээж байгаа бол шинэ каталог үүсгэхийн тулд програмуудыг үүсгэх эхэлнэ. Дараа нь AI-ийн магийг хийж чадах. Та Cursor-ийг тавтай морилно уу: "Миний аппын хувьд тавтай морилно уу, үнэ, хэмжээтэй зүйлсийг жагсаалт авах болно." Энэ нь а Нөхцөл Мөн Картын файлууд Үнэгүй Payment Step Cursor нь компонент бүтэц, prop төрөл, суулгах, импортын багц, гэх мэт хэрхэн удирдах вэ? Одоо таны үйл ажиллагаа нь бизнесийн логик дээр төвлөрсөн юм. Купон ашиглаж байна уу?” SAVE10 Vercel-ийг ашиглан суулгах үе шаттай. Vercel нь секундын дотор Deploy Өнөөдөр суулгах нь Cursor-тэй үүсгэхэд хялбар юм. Та код илгээхийн тулд орлогог бичдэггүй. Энэ нь тасалбар дээр дарна уу: таны GitHub репозиторийг сонгоно, Vercel-ийг суулгахын тулд өгдөг. Код хийх үед бид зүгээр л GitHub-д буцаж байна. Энэ нь бүх зүйл юм; Энэ нь Vercel-ийг автоматжуулахын тулд бүх зүйлийг боловсруулдаг. Гэсэн хэдий ч, энэ нь таны код үйлдвэрлэхэд хатуу байх өмнө суулгахыг боломжийг олгодог. Ямар ч Preview Deployments Matter нь CI / CD-ийн хувьд юу вэ? Preview суулгах нь бидний үйл явцыг өөрчилж байна. Vercel-ийн DX гэх мэт хэрэгслүүд нь бүх PR-ийн өөрийн URL-ийг олж авах болно. , бүрэн үйл ажиллагаатай, байгалийн байгаль орчинд. checkout-app-pr-987.vercel.app Бусад хөгжүүлэгч бидний шинэ төлбөрийн үйл явцыг гүйцэтгэхийн тулд код, түүнчлэн харуулсан купон буудлаас дарна уу, энд Vercel-ийн дамжуулан автоматаар хийж байгаа зүйл юм: Хамгийн сүүлийн үеийн код GitHub-аас олж авсан; Апплицийг үүсгэдэг; Апп-ийг хуваалцаж болох нэг preview URL-д суулгах болно (жишээ нь, checkout-app-pr-987.vercel.app). Эдгээр тусгай суулгах хурдыг хангах болно. Бугуй нь ямар ч бусад төслүүдийг хамаарах, багасгахгүйгээр тохируулж байна. Үүнээс гадна "миний машин дээр ажилладаг." Үүнээс гадна үзэсгэлэн дээр шилжихгүй. Checkout-ийн хэрэглээ нь одоо жинхэнэ бөгөөд тест хийх боломжтой. Let QA.tech Handle the Tests QA.tech тест хийх Энд гайхамшигтай хэсэг: AI-д хөдөлгөөнтэй автомат шалгалт. Энэ хэрэгсэл нь AI тест хэрэгсэл юм. Энэ хэрэгсэл нь таны апп-ийг туршиж чадна, эсвэл Playwright-ийн эсвэл Cypress-ийн скриптейг бичж, хадгалах үед цаг хугацааг хуваалцахын тулд, та туршилтын тохиолдолд хялбар англи хэл дээр тайлбарлав, агент нь бусад зүйлсийг удирдах болно. Энэ нь таны апп-ийг сканиж, таны интерфэйс нь мэдлэг график бий болгох, таны апп-ийг өөрчилж байгаа бол автомашины E2E туршилт үүсгэдэг. Бүтээгдэхүүн QA.tech-ийг QA.tech-д нэмж, Vercel-ийг ашигладаг URL-ийг үзнэ үү. QA.tech-ийг дараа нь таны вэб апп-ийг шалгах, мэдлэг график бий болгон бүтэц суралцах болно. Бид хэрэглээний хувьд зарим туршилт үүсгэх болно. Чат нээж, та туршиж хүсэж байгаа зүйлийг тодорхойлох. Жишээ нь, "Миний хэрэглээнд 3-4 эхний туршилт үүсгэх". Одоогоор, QA.tech нь автоматаар туршилтын үйл явдлыг үүсгэх болно. Зөвхөн энэ нь таны апп-ийн талаар бүх зүйлийг мэддэг, жишээ нь тавтай морилно уу. Бид гар утас дэлгэц дээр купон кодыг баталгаажуулахын тулд өөр нэг туршилт нэмэх болно. Та "Test case add" бутлуур дамжуулан энэ туршилтын туршилтын туршилт үүсгэх болно, эсвэл чат дээр үүнийг үүсгэх болно. "Test the coupon code confirmation message for mobile screens on step 3." QA.tech таны өгөгдөл дээр суурилсан туршилт автоматаар үүсгэх бөгөөд тэднийг шууд таны жинхэнэ апп-ийн эсрэг ажиллуулж болно. Cursor-ийн програм хангамжийн үүсгэх үед үлдсэн алдаа QA.tech-ийг олж авсан бөгөөд туршилтын үр нөлөөтэй. Мөн бидэнд мэдээлэл, сүлжээний мэдээлэл, тест үр дүнтэй бүх чухал үйл явдлыг санал болгож байна. Эдгээр нь үр дүнтэй асуудал буцаж авахын тулд бидний хэрэгцээ юм. Гэсэн хэдий ч, бид үүнийг сэргээх өмнө хэрэгслүүдийг холбохын тулд хамтран ажиллах болно. Бүтээгдэхүүн Өмнөх: Connect the Таны төсөл репозиторын хамт. Тавтай морилно уу Settings → Integrations → GitHub App. Энд холбоотой репозиторын сонгоно уу, Pull Request Testing-ээс "Run on PRs" сонголт зөвшөөрөх. GitHub програм хангамж Дараа нь Linear-ийг холбохын тулд манай буудлаас бидний төсөл удирдлагын хэрэгсэлд шууд дамжуулах боломжтой. Үүнийг хийхын тулд Settings → Organization Connections → Connect Linear руу явах. Дараа нь, Project Settings → Integrations → Linear-д тавтай морилно уу, тавтай морилно уу. Бид одоо QA.tech-аас шууд Linear-д эмиссийн билет үүсгэх болно. QA.tech-ийн асуудал хэсэгт манай хязгаарлагдмал туршилтын тохиолдолд илгээсэн гэж үзнэ үү, танд шууд таны Linear данс руу энэ буудлыг экспортын боломжийг олгодог уу? Зөвхөн dashboard дээр "Create problem in Linear" дээр дарна уу. Таны Linear dashboard одоо үүсгэсэн асуудал харуулах болно төрөл, анх удаа үзсэн, тодорхойлолт, туршилтын холболт гэх мэт мэдээлэл. Бүтээгдэхүүн Одоо автоматаар хэсэг байна. Бид энэ бугуй тохируулах, хэрэгслүүд нь хэрхэн хамтран ажилладаг гэж үзнэ үү. Fix, Push, Repeat (Дэлгэрэнгүй мэдээлэл) Cursor-д хүрч байна. Бид bug-ийг үүсгэсэн байршуулахад асуудал сэргээх болно. Нөхцөл асуудал нь бид ашиглаж байна Тавтай морилно уу, тавтай морилно уу. 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 үүсгэх. Vercel дараа нь автоматаар preview URL-ийг хуваалцах болно. Одоо QA.tech-ийн GitHub-ийн апп PR-ийг мэдэгддэг. Энэ нь таны өөрчлөлтийг анхаарах, өмнө үүсгэсэн купоны баталгаажуулалтын туршилт гэх мэт холбоотой туршилт сонгоно. Энэ нь Vercel-ийн урьдчилсан үзүүлэлт URL-ийг харьцуулахын тулд тэдний туршилт ажиллуулж байна: гарын авлагагүй, апп-ийг өөрсдийн дээр дарна уу. QA.tech-ийн бот туршилт ажиллуулж, PR-д санал болгож, хэрэглэгчдэд rea-time шинэчлэлийг өгөх болно. Бидний QA.tech таслагч дээр, бүх туршилтад төгссөн бөгөөд баталгаажуулалтын мэдээ нь одоо гар утас дээр зөв харуулсан болно. QA.tech бот PR-ийг хүлээн зөвшөөрч, бүрэн туршилтын нийтлэлтэй таны PR-ийг санал болгож байна. Бүх үйл явц (код шинэчлэх, суулгах, суулгах, туршилтын) нь мануаль интервенцийг ямар ч 5-8 минут хугацаатай. Хамгийн сүүлийн үеийн pull request (PR) нь нэг үйл явцыг дараах болно: өөрчилж, толгой, туршилтын автоматаар ажиллуулах. Bugs fusion өмнө олж авах болно, бүх автомат цикл нь багдад хурдан тээвэрлэх боломжийг олгодог. Татаж авах Энэ шинэ AI Builder-ийн бүх хэрэгсэл нь нэг зүйлтэй байдаг. Linear нь хурдан төлөвлөгөө, асуултууд харахын тулд хэрэгцээг хангах, Cursor нь бүтээгдэхүүний хөгжүүлэх үйл явцыг хурдан болгодог, Vercel нь бидэнд хурдан суулгах урьдчилан сэргийлэх URL-ийг хангах, QA.tech нь автоматаар туршилт хийх болно. Тэд нэгтгэсэн бид чанарыг чанарыг багасгахгүйгээр хурдан хүргэх боломжийг олгодог үйл явцыг бий болгодог. Гэсэн хэдий ч, энэ нийтлэл нь танд том баг хэрэгтэйгүй, та зүгээр л сайн хамтран ажилладаг ухаалаг хэрэгслүүд хэрэгтэй гэж үзсэн. Хамгийн сайн хэсэг нь та туршилтын скрипт хадгалах хэрэгтэй биш юм. онцлог нэмэх, QA.tech шинэ туршилт үүсгэх болно. Хэрэглээний интерфэйсийг өөрчлөх, туршилт автомат шинэчлэх болно. Та зүгээр л барилга дээр төвлөрч, AI-ийн туршилтын ажиллуулах боломжийг олгодог. Хэвийн E2E туршилтын хэвлэх, хадгалах, буцаж хийхын тулд бэлэн байна уу? Өнөөдөр demo авах, QA.tech таны туршилтын үйл явцыг хэрхэн өөрчилж үзнэ үү. Хэвийн E2E туршилтын хэвлэх, хадгалах, буцаж хийхын тулд бэлэн байна уу? Өнөөдөр demo авах, QA.tech таны туршилтын үйл явцыг хэрхэн өөрчилж үзнэ үү.
