Wanneer nuwe funksies geïllustreer word, bly toetsing die grootste bottleneck. Gewoonlik gaan die werkstroom iets soos hierdie: bou 'n funksie, skep 'n PR, druk na CI, skim deur 'n paar screenshots, en hoop niks breek in produksie wanneer die gebruiker tref nie. Nou, moenie my verkeerd kry nie, die verskaffing van nuwe funksies vinnig is groot, maar handmatige toetsing kan eenvoudig nie ophou nie.En selfs al bestaan die gereedskap vir toetsing nie, is hulle nie geïntegreer met die res van jou werkstroom nie.Dit is waarskynlik hoekom teams of die toetse verlaat of die skip sonder om dit behoorlik te doen. Wat my na 'n ander punt bring: ons beplan in een instrument, bou in 'n ander, hersien elders en implementeer in nog 'n ander. Gelukkig is daar 'n manier. Linear, Cursor, Vercel, en QA.tech vorm 'n stapel gereedskap wat saamwerk, elke taak outomaties hanteer en jou toelaat om gefokus te bly op die bou. Samen vervang hulle handmatige toetswerkstrome met AI-testeutomaatskap wat op elke PR hardloop. In hierdie artikel sal ek jou deur die bou van 'n demo checkout flow-program met behulp van hierdie gereedskap loop. Die bou van 'n checkout vloei wat werklik werk Om hierdie werkstroom te demonstreer, sal ons 'n 4-stap checkout-stroom bou: 
 
 
 
 
 Kaart beoordeling Shipping inligting Betaling besonderhede Bevestiging bladsy Die antwoord is eenvoudig: dit is 'n kern besigheidsproces wat kom met verskeie kant gevalle soos leë karre, betaling annulering, verval sessies, ens As iets breek hier, verloor jy jou inkomste. Hier is die stapel wat ons sal gebruik: 
 
 
 
 
 Lineêre vir duidelike en opvolgbare werk Cursor vir bou by bliksemsnelheid Vercel vir onmiddellike voorbereiding QA.tech vir 'n end-to-end (E2E) toets Kyk na. tegnologie Kom ons begin met die beplanning gereedskap. Plan dit in lineêre, bou dit in cursor Planning in die lineêre Ek sal die checkout-stroom-program afbreek in eenvoudige en opvolgbare take. Die belangrikste fokus van hierdie artikel sal wees op die byvoeging van die Coupon Codes funksionaliteit aan die Cart Review fase van jou checkout proses. Eerstens, laat ons 'n Lineêre kaartjie skep. Dit kan iets soos "Feature: Build checkout flow with coupon validation." Ter wille van hierdie demo, sal ons 'n fout in die kuponkode-funksie se kliënt-side-validering invoer. En om dit te versier, sal dit nie 'n blinkerige fout wees nie. Dit sal 'n moeilike een wees wat slegs onder sekere omstandighede opduik. Met ander woorde, die een wat menslike resensies en geskrewe toetse slaan. Snel bou met 'n cursor Die volledige kode vir ons demo-app is in die GitHub . die repository Wanneer jy Cursor oopmaak, skep 'n nuwe directory om die app te begin bou. Kom ons sê jy wil 'n karkomponent in die 4-stap kasstroom-program skep. jy kan Cursor 'n oproep gee soos: "Bou 'n karkomponent vir my app om items met pryse en hoeveelhede te lys." Dit sal 'n en Ook ook Karte lêers 'n Betaling stap Let op hoe Cursor die komponentstruktuur, prop-tipe, die installering en importering van pakkette en nog baie meer hanteer? u taak is nou om op besigheidslogika te fokus, soos "Hoeveel korting moet toegepas word wanneer Is die coupon gebruik?” SAVE10 Kom ons beweeg na die implementeringsfase met Vercel. Verwys na Vercel in sekondes Deployment vandag is so maklik as bou met Cursor. Jy skryf nie opdragte om jou kode te stuur nie. Dit is soos 'n dashboard klik: kies jou GitHub repository, en gee dit aan Vercel vir deployment. Sodra die kode gedoen is, druk ons dit net na GitHub. Dit is alles wat dit nodig het; van daar af hanteer Vercel alles vir die uitrol outomaties. Maar hoekom Vercel? Simpelweg omdat dit jou toelaat om uitrustings voor te kyk voordat jou kode in produksie gebreek word. Hoekom Preview Deployments Matter vir CI / CD? Voorbeelddeplooie verander die manier waarop ons werk.Met gereedskap soos Vercel se DX, kry elke PR sy eie URL, soos , saam met 'n ten volle funksionele en altydgroen omgewing. checkout-app-pr-987.vercel.app Wanneer die ontwikkelaar die kode druk wat ons nuwe checkout-proses implementeer, sowel as die verborge coupon-bug, hier is wat outomaties gebeur via Vercel: 
 
 
 
 Die nuutste kode is afgelaai van GitHub; Die toepassing self word gebou; Die app word ingestel op 'n unieke voorbeeld URL wat gedeel kan word (bv, checkout-app-pr-987.vercel.app). Hierdie individuele ontplooiing verseker spoed. Bugs word opgelos sonder om enige ander projekte te belemmer of te vertraag. Geen meer "werk op my masjien nie." Die checkout aansoek is nou lewendig en beskikbaar vir toetsing. Let QA.tech Handle the Tests Laat QA.tech die toetse hanteer Hier kom die interessante deel: AI-aangedrewe outomatiese toets. is 'n AI-toerusting wat handmatige QA vervang met AI-agente wat jou app navigeer. In plaas van ure te spandeer om jou instrument handmatig te toets of Playwright- of Cypress-skripte te skryf en te onderhou, beskryf jy toetsgevalle in eenvoudige Engels en die agent hanteer die res. Kyk na. tegnologie Voeg jou projek by QA.tech en dui dit op jou Vercel-gebaseerde URL. QA.tech sal dan jou webapp skandeer en die struktuur leer deur 'n kennisgraaf te bou. Ons sal 'n paar toetse vir ons aansoek skep. Open die chat en beskryf wat jy wil toets. byvoorbeeld, "Skep 3-4 aanvanklike toetse vir my app." Onthou, dit weet al alles oor jou app, soos waar die mandjie is, hoe om verskaffingsvorme te vul, waar die betaalknoppie woon, en die bevestiging bladsy. Ons sal nog 'n toets byvoeg vir die validering van die coupon kode bevestiging op mobiele skerms.Jy kan hierdie toets geval handmatig skep deur die "Add test case" knoppie of genereer dit in die chat, deur iets soos, "Test die coupon kode bevestiging boodskap vir mobiele skerms op stap 3." QA.tech sal die toetse op basis van jou invoer outomaties genereer en hulle direk teen jou live-program uitvoer. Die fout wat deur Cursor agtergelaat is tydens die bou van die aansoek is deur QA.tech gevang, wat die toets misluk. het ons ook al die relevante stappe verskaf, saam met die logboeke, netwerk besonderhede en toetsresultate. Dit is presies die insigte wat ons nodig het om die probleem doeltreffend te debug. Kyk na. tegnologie Eerstens, verbind die Gaan na Instellings → Integrasies → GitHub App. Kies die toepaslike repository hier, en laat die opsie "Run on PRs" van die Pull Request Testing toe. Die GitHub App Volgende, verbind Linear, sodat ons bugs direk in ons projekbestuursinstrument kan vloei. Om dit te doen, gaan na Instellings → Organisasieverbindings → Connect Linear. Vervolgens, in die projek instellings → integrasies → lineêre, kies jou span uit die dropdown, en red dit. Ons sal nou uitgifte kaartjies in Linear direk van QA.tech skep. Let op hoe QA.tech reeds ons mislukte toets geval onder die kwessies afdeling, wat jou 'n opsie gee om hierdie fout direk na jou Linear-rekening te eksporteer? Klik eenvoudig op "Skep 'n probleem in Lineêre" op die dashboard. Jou Lineêre dashboard sal nou die probleem wat deur met besonderhede soos tipe, eerste gesien, beskrywing en 'n skakel na die toets. Kyk na. tegnologie Ons sal hierdie fout regmaak en kyk hoe die gereedskap saamwerk. Fix, Push, Repeat (Die werklike werkstroom) Terug na Cursor. Ons sal die probleem oplos deur te identifiseer waar die fout plaasgevind het. In die Die probleem is dat ons gebruik in die bevestigingsboodskapklasse, wat veroorsaak dat dit nie op mobiele skerms verskyn nie. 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>
 Sodra dit gedoen is, dryf die nuutste veranderinge en skep 'n PR met 'n nuwe tak. Nou detekteer QA.tech se GitHub-toepassing die PR. Dit analiseer jou veranderinge en kies die relevante toetse, soos die kuponvalideringstoets wat ons voorheen geskep het. Dit hardloop daardie toetse teen die Vercel voorbeeld URL: geen handmatige ingryping nie, geen klik deur die app self nie. QA.tech se bot sal die toetse hardloop en kommentaar in die PR gee om die gebruiker real-time updates te gee. In ons QA.tech-dashboard is al die toetse goedgekeur en die valideringsboodskap verskyn nou korrek op mobiele toestelle. Die QA.tech bot goedkeur die PR en kommentaar op jou PR met die volledige toetsopsomming. Die volledige proses (update van die kode, samesmelting, ontplooiing en toetsing) het ongeveer 5-8 minute geneem sonder handmatige tussenkoms. Elke toekomstige trek versoek (PR) sal dieselfde proses volg: maak veranderinge, druk en laat die toetse outomaties hardloop. Sluit dit op Elke instrument in hierdie nuwe AI-bouer uitsteek in een ding. Linear verskaf die fokus wat nodig is vir vinnige beplanning en probleemopsporing, Cursor versnel die produkontwikkelingswerkstroom, Vercel gee ons onmiddellike implementeringsvoorvertoning URL's, en QA.tech hanteer toetse outomaties. Ten spyte van die belangrikheid van elke stap in die proses, is toetsing dikwels die een ding waarop teams die minste tyd spandeer. En die beste deel is dat jy nie testskripte hoef te onderhou nie. Voeg 'n funksie by, en QA.tech sal nuwe toetse skep. Verander 'n UI-stroom, en toetse sal outomaties opdater. Jy fokus net op bou en laat AI die toets hanteer. 
 
 Is jy gereed om op te hou skryf, onderhou en debug breekbare E2E toetse? kry 'n demo vandag en sien hoe QA.tech jou toets werkstroom transformeer. Is jy gereed om op te hou skryf, onderhou en debug breekbare E2E toetse? kry 'n demo vandag en sien hoe QA.tech jou toets werkstroom transformeer.

This story will praise and/or roast a product, company, service, game, or anything else people like to review on the Internet.

This writer has a vested interest be it monetary, business, or otherwise, with 1 or more of the products or companies mentioned within.

Hierdie oudio word in die oorspronklike taal van die storie vervaardig!

Die AI Builder Stack: Linear, Cursor, Vercel en QA.tech

About Author

KOMMENTAAR

HANG TAGS

HIERDIE ARTIKEL IS AANGEBIED IN

Related Stories

Thrilled to be Recognized as Startup of the Year in New York City

The Opt Out Writing Contest: Final Round Results Announcement 🎉

Startups of The Year: Meet the Business Industry

Top Actionable Tips to Grow a Community: More Tips to Monetize

Thrilled to be Recognized as Startup of the Year in New York City

The Opt Out Writing Contest: Final Round Results Announcement 🎉

Startups of The Year: Meet the Business Industry

Top Actionable Tips to Grow a Community: More Tips to Monetize

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps