当新功能推出时,测试仍然是最大的瓶颈。 通常情况下,工作流程是这样的:构建一个功能,创建一个PR,推到CI,扫描一些屏幕截图,并希望用户击中时没有任何东西打破生产。 现在,不要误会我,快速发送新功能是很棒的,但手动测试只是无法跟上。 这让我走到另一个点:我们在一个工具中计划,在另一个工具中构建,在另一个地方审查,然后在另一个工具中部署,然后我们尝试通过多个屏幕截图,团队会议和大量消息来修补这一切。 幸运的是,有一种方法。线性,Cursor,Vercel和QA.tech构成一堆工具,这些工具一起工作,自动处理每个任务,并让你专注于构建。一起,他们用人工智能测试自动化来替代手动测试工作流程,在每个PR上运行。 构建一个实际工作的支票流 要演示此工作流程,我们将构建一个四步支出流程: 卡特评论 航运信息 付款细节 确认页面 答案很简单:这是一个核心业务流程,涉及多个边缘案例,如空车、取消付款、过期会话等。 这里是我们将使用的堆栈: 线性为清晰和可追踪的工作 以闪电速度建造的方程式 Vercel 即时预览部署 QA.tech 用于端到端(E2E)测试 技术 让我们从规划工具开始。 以线性规划,以 cursor 构建 线性规划 我将将支出流程应用程序分解为简单和可追踪的任务。 本文的主要重点将是将Coupon Codes功能添加到您的支票流程的卡车审查阶段。 首先,让我们创建一个线性门票,它可以像“功能:用折扣验证构建支票流”。 为了这个演示,我们将引入一个错误,在Coupon Code功能的客户端验证. 并将其加油,它将不会是一个闪闪发光的错误. 它将是一个棘手的,只有在某些条件下表面。 用 cursor 快速构建 我们的演示应用程序的完整代码在GitHub上 . 收藏家 当你打开Cursor时,创建一个新的目录,开始构建应用程序,然后让AI完成其魔力。 假设您希望在 4 步支出流程应用程序中创建一个购物车组件,您可以向 Cursor 发送一个提示,例如:“为我的应用程序创建购物车组件以列出价格和数量的项目。 它将创建一个 和 也是。 卡特档案 付款步骤 注意 Cursor 如何处理组件结构、 prop 类型、安装和导入包等等?您现在的工作是专注于业务逻辑,例如“在下调时应应用多少折扣 “子被用了吗?” SAVE10 让我们继续使用 Vercel 的部署阶段。 在秒钟内部署到 Vercel 现在的部署就像使用 Cursor 构建一样简单,你不需要写命令来发送代码,就像在仪表板上点击:选择你的 GitHub 存储库,然后将其交给 Vercel 进行部署。 一旦代码完成,我们就把它推到GitHub,仅此而已;从那里,Vercel会自动处理部署的所有事情。 但是为什么要 Vercel? 只是因为它允许您在代码在生产中混乱之前预览部署。 为什么预览部署对 CI/CD 至关重要? 预览部署改变了我们的工作方式. 使用Vercel的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处理测试 这里来了有趣的部分:人工智能驱动的自动测试。 这是一个人工智能测试工具,用人工智能代理来代替手动QA来导航你的应用程序,而不是花几个小时来手动测试你的工具,或者写和维护Playwright或Cypress脚本,你用简单的英语描述测试案例,代理处理其余部分,它扫描你的应用程序,构建你的用户界面知识图,并自动生成E2E测试,当你的应用程序发生变化时更新自己。 技术 将您的项目添加到 QA.tech 并将其指向 Vercel 部署的 URL。 我们将为我们的应用程序创建一些测试,打开聊天,并描述您想要测试的内容,例如,“为我的应用程序创建 3-4 个初始测试”。 从那里,QA.tech将自动生成测试步骤,请记住,它已经知道你的应用程序的一切,例如你的购物车的位置,如何填写发货表格,付款按钮的位置和确认页面。 您可以通过“添加测试案例”按钮手动创建此测试案例,或在聊天中生成它,通过提示类似的东西,“在步骤 3中测试移动屏幕的折扣码确认消息”。 QA.tech将根据您的输入自动生成测试,并直接对您的实时应用程序运行。 Cursor在构建应用程序时留下的错误被QA.tech捕获,导致测试失败。 还向我们提供了所有相关步骤,以及日志,网络细节和测试结果. 这些正是我们需要的见解,以便有效地纠正问题。 技术 首先,连接 点击设置 → 集成 → GitHub 应用程序. 点击此处选择相应的存储库,并从 Pull Request Testing 中允许“运行公共关系”选项。 GitHub 应用程序 接下来,连接线性,这样我们的错误可以直接流入我们的项目管理工具。 要做到这一点,请进入设置 → 组织连接 → 连接线性。 然后,从项目设置 → 集成 → 线性,从下载框中选择您的团队,然后保存它。 我们现在将直接从QA.tech创建线性发行票,请注意QA.tech已经在问题部分列出了我们的失败测试案例,为您提供直接将此错误导出到您的线性帐户的选项。 只需在仪表板上单击“在线性中创建问题”。 您的线性仪表板现在将显示由创建的问题 包含类型、第一次看到、描述和测试链接等细节。 技术 现在,自动化部分来了,我们将修复这个错误,并观察工具如何一起工作。 修复,推,重复(实际工作流) 回到 Cursor. 我们将通过识别错误发生的地方来解决问题。 在 问题是,我们正在使用 在确认消息类,导致它不会出现在移动屏幕上。 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将自动部署预览URL。 现在,QA.tech的GitHub应用程序检测了PR,它分析了您的更改,并选择了相关的测试,例如我们之前创建的折扣验证测试。 它对Vercel预览URL进行这些测试:没有手动干预,没有单击应用程序本身。 在我们的 QA.tech 仪表板中,所有测试都通过,验证消息现在在移动设备上正确显示。 QA.tech 机器人批准您的 PR 和评论,并提供完整的测试摘要。 整个过程(更新代码、合并、部署和测试)大约需要5到8分钟,没有手动干预。 每个未来的拉动请求(PR)都将遵循相同的过程:进行更改,推,并让测试自动运行。 包装它 这个新的AI构建器中的每一个工具都有一个特点:线性提供了快速规划和问题跟踪所需的重点,Cursor加速了产品开发工作流程,Vercel为我们提供了即时部署预览URL,QA.tech自动处理测试。 尽管过程中的每个步骤都很重要,但测试往往是团队花费最少的时间的事情,但这篇文章表明,您不需要一个更大的团队;您只需要更智能的工具,这些工具一起工作。 最好的部分是,你不必维护测试脚本。添加一个功能,QA.tech将创建新的测试。更改用户界面流程,测试将自动更新。 准备停止写作、维护和调试脆弱的 E2E 测试吗?今天获得演示,看看 QA.tech 如何改变您的测试工作流程。 准备好停止写作、维护和调试脆弱的E2E测试吗? 今天,看看QA.tech如何改变你的测试工作流程。 得到一个Demo
