When new features are rolled out, testing remains the biggest bottleneck. Typically, the workflow goes something like this: build a feature, create a PR, push to CI, skim through some screenshots, and hope nothing breaks in production when the user hits. Now, don’t get me wrong, shipping new features quickly is great, but manual testing simply can’t keep up. And even though the tools for testing do exist, they are not integrated with the rest of your workflow. This is probably why teams either skip tests or ship without doing them properly. Which brings me to another point: we plan in one tool, build in another, review somewhere else, and deploy in yet another. Then we try to patch it all up with multiple screenshots, team meetings, and tons of messages. Luckily, there is a way. Linear, Cursor, Vercel, and QA.tech make up a stack of tools that work together, handle each task automatically, and let you stay focused on building. Together, they replace manual testing workflows with AI testing automation that runs on every PR. In this article, I’ll walk you through building a demo checkout flow app using these tools. You’ll see how they work together and how they help you ship faster without breaking things. Let’s get started. Building a Checkout Flow That Actually Works To demonstrate this workflow, we’ll build a 4-step checkout flow: Cart review Shipping information Payment details Confirmation page Cart review Shipping information Payment details Confirmation page You might be wondering why we are only focusing on the checkout flow. The answer is simple: it’s a core business process that comes with multiple edge cases like empty carts, payment cancellation, expired sessions, etc. If anything breaks here, you lose your revenue. Here’s the stack we’ll use: Linear for clear and trackable work Cursor for building at lightning speed Vercel for instant preview deploys QA.tech for an end-to-end (E2E) testing Linear for clear and trackable work Linear Cursor for building at lightning speed Cursor Vercel for instant preview deploys Vercel QA.tech for an end-to-end (E2E) testing QA.tech QA.tech Let’s start with the planning tool. Plan It in Linear, Build It in Cursor Planning in Linear I’ll break down the checkout flow app into simple and trackable tasks. The main focus of this article will be on adding the Coupon Codes functionality to the Cart Review stage of your checkout process. First, let’s create a Linear ticket. It can be something like “Feature: Build checkout flow with coupon validation.” Then, we can divide it into small subtasks according to our requirements. For the sake of this demo, we’ll introduce a bug in the Coupon Code feature's client-side validation. And to spice it up, it won’t be a glaring bug. It will be a tricky one that only surfaces under certain conditions. In other words, the one that slips past human reviews and scripted tests. Building Fast with Cursor The complete code for our demo app is in the GitHub repository. repository When you open Cursor, create a new directory to start building the app. Then, let AI do its magic. Let’s say you want to create a cart component in the 4-step checkout flow app. You could give Cursor a prompt like: “Build a cart component for my app to list items with prices and quantities.” It will create a cart file and a payment step as well. cart file a payment step Notice how Cursor handles the component structure, prop types, installing and importing packages, and much more? Your job now is to focus on business logic, like “How much discount should be applied when SAVE10 coupon is used?” SAVE10 Let’s move forward to the deployment phase using Vercel. Deploy to Vercel in Seconds Deployment nowadays is as easy as building with Cursor. You don’t write commands to ship your code. It's like a dashboard click: select your GitHub repository, and give it to Vercel for deployment. Once the code is done, we just push it to GitHub. That’s all it takes; from there, Vercel handles everything for deployment automatically. But why Vercel? Simply because it lets you preview deployments before your code gets messed up in production. Why Preview Deployments Matter for CI/CD? Preview deployments change how we work. With tools like Vercel’s DX, every PR gets its own URL, like checkout-app-pr-987.vercel.app, along with a fully-functional and evergreen environment. checkout-app-pr-987.vercel.app When the developer pushes the code that implements our new checkout process, as well as the hidden coupon bug, here’s what automatically happens via Vercel: The latest code is retrieved from GitHub; The application itself is built; The app is deployed to a unique preview URL that is shareable (e.g., checkout-app-pr-987.vercel.app). The latest code is retrieved from GitHub; The application itself is built; The app is deployed to a unique preview URL that is shareable (e.g., checkout-app-pr-987.vercel.app). checkout-app-pr-987.vercel.app This individual deployment ensures speed. Bugs are fixed without interfering with or slowing down any other projects. No more “works on my machine.” No more rolling the dice on staging. The checkout application is now live and available for testing. Let QA.tech Handle the Tests Let QA.tech Handle the Tests Here comes the interesting part: AI-powered automated testing. QA.tech is an AI testing tool that replaces manual QA with AI agents that navigate your app. Instead of spending hours testing your tool manually or writing and maintaining Playwright or Cypress scripts, you describe test cases in plain English and the agent handles the rest. It scans your app, builds a knowledge graph of your UI, and auto-generates E2E tests that update themselves when your app changes. QA.tech Add your project to QA.tech and point it at your Vercel-deployed URL. QA.tech will then scan your web app and learn the structure by building a knowledge graph. We’ll create some tests for our application. Open the chat and describe what you want to test. For instance, “Create 3-4 initial tests for my app.” From there, QA.tech will generate the test steps automatically. Remember, it already knows everything about your app, like where the cart is, how to fill shipping forms, where the payment button lives, and the confirmation page. We’ll add another test for validating the coupon code confirmation on mobile screens. You can create this test case manually through the “Add test case” button or generate it in the chat, by prompting something like, “Test the coupon code confirmation message for mobile screens on step 3.” QA.tech will auto-generate the tests based on your input and run them directly against your live app. The bug that was left by Cursor while building the application was caught by QA.tech, causing the test to fail. QA.tech also provided us with all the relevant steps, along with the logs, network details, and test results. These are exactly the insights we need to debug the issue efficiently. Before we fix it, though, let’s connect the tools so they work together. QA.tech First, connect the GitHub App with your project repository. Go to Settings → Integrations → GitHub App. Select the relevant repository here, and allow the “Run on PRs” option from the Pull Request Testing. GitHub App Next, connect Linear, so our bugs can flow directly into our project management tool. To do this, Go to Settings → Organization Connections → Connect Linear. Then, from the Project Settings → Integrations → Linear, select your team from the dropdown, and save it. We’ll now create issue tickets in Linear directly from QA.tech. Notice how QA.tech has already listed our failed test case under the issues section, giving you an option to export this bug directly to your Linear account? Simply click "Create issue in Linear" on the dashboard. Your Linear dashboard will now show the issue created by QA.tech with details such as type, first seen, description, and a link to the test. QA.tech Now comes the automated part. We’ll fix this bug and watch how the tools work together. Fix, Push, Repeat (The Actual Workflow) Back to Cursor. We’ll fix the issue by identifying where the bug occurred. In PaymentStep.jsx, the issue was that we were using hidden in the confirmation message class, causing it not to show on mobile screens. 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> <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> Once that’s done, push the latest changes and create a PR with a new branch. Vercel will then deploy a preview URL automatically. Now, QA.tech’s GitHub App detects the PR. It analyzes your changes and selects the relevant tests, like the coupon validation tests we created earlier. It runs those tests against the Vercel preview URL: no manual intervention, no clicking through the app yourself. QA.tech’s bot will run the tests and comment in the PR to give the user real-time updates. In our QA.tech dashboard, all tests have passed, and the validation message now appears correctly on mobile. The QA.tech bot approves the PR and comments on your PR with the complete test summary. The complete process (updating the code, merging, deploying, and testing) took about 5-8 minutes without manual intervention. Every future pull request (PR) will follow the same process: make changes, push, and let the tests run automatically. Bugs will get caught before merge, and the whole automated cycle will let the teams ship faster. Wrapping It Up Each tool in this new AI builder excels at one thing. Linear provides the focus needed for rapid planning and issue tracking, Cursor accelerates the product development workflow, Vercel gives us instant deployment preview URLs, and QA.tech handles testing automatically. Together, they create a workflow that lets teams ship faster without compromising on quality. Despite the importance of each step in the process, testing is often the one thing that teams spend the least time on. However, this article has showed that you don’t need a bigger team; you only need smarter tools that work well together. And the best part is that you don’t have to maintain test scripts. Add a feature, and QA.tech will create new tests. Change a UI flow, and tests will update automatically. You just focus on building, and let AI handle the testing. Ready to stop writing, maintaining, and debugging brittle E2E tests? Get a demo today and see how QA.tech transforms your testing workflow. Ready to stop writing, maintaining, and debugging brittle E2E tests? Get a demo today and see how QA.tech transforms your testing workflow. Get a demo
