新しい機能がリリースされると、テストは最大のボトルネックです。 通常、ワークフローはこのようなものになります:機能を構築し、PRを作成し、CIに押し付け、いくつかのスクリーンショットをスカイムし、ユーザーがヒットしたときに生産を妨げるものは何もありません。 間違わないでください、新しい機能を迅速に配信することは素晴らしいことですが、マニュアルテストは続けることができません。テストのためのツールは存在しますが、それらはあなたのワークフローの残りの部分と統合されていません。 もう一つのポイントへとわたしを導く:私たちは、1つのツールで計画し、別のツールで構築し、別の場所でレビューし、また別の場所で展開します. その後、複数のスクリーンショット、チームミーティング、そして多くのメッセージですべてをパッチしようとします。 幸いにも、方法があります。Linear、Cursor、Vercel、QA.techは、一緒に動作し、各タスクを自動的に処理し、構築に焦点を当てることができるツールのバックパックを構成します。一緒に、各PRで実行されるAIテストオートメーションで手動テストワークフローを置き換えます。この記事では、これらのツールを使用してデモキャッシュフローアプリを構築します。 実際に機能するチェックフローの構築 このワークフローを示すには、4ステップのチェックアウトフローを構築します。 カートレビュー 航海情報 支払い詳細 確認ページ 答えは単純です:これは、空のトラック、支払いのキャンセル、期限切れのセッションなど、複数のエッジケースを伴うコアビジネスプロセスです。 以下は、私たちが使用するスタックです。 Linear for clear and traceable work(明確で追跡可能な作業) Cursor for building at lightning speed(ライトスピードで建設するためのカーサー) Vercel for Instant Preview デプロイ QA.tech for an end-to-end (E2E) テスト テクノロジー まずは、計画ツールから始めましょう。 PLAN IT IN LINEAR, BUILD IT IN CURSOR PLANING IN LINEAR 私はキャッシュフローアプリをシンプルで追跡可能なタスクに分割します。 この記事の主な焦点は、あなたのチェックアウトプロセスのカートレビュー段階にクーポンコード機能を追加することです。 まず、線形チケットを作成しましょう. それは「機能:クーポン認証でキャッシュフローを構築する」のようなものかもしれません。 このデモのために、我々はクーポンコード機能のクライアント側の検証にバグを導入します。そしてそれをスパイスするには、それは明るいバグではありません。それは特定の条件下でしか表面に現れない困難なものになります。 Cursorで速く作る 私たちのデモアプリの完全なコードはGitHubにあります。 . リポジトリ Cursor を開くと、新しいディレクトリを作成してアプリを構築し始める。 たとえば、4 ステップのキャッシュフローアプリでカートのコンポーネントを作成したいとします. You could give Cursor a prompt like: "Build a cart component for my app to list items with prices and quantities." A を創造する。 そして しかも。 カートファイル 支払いステップ Cursor がコンポーネント構造、プロプトタイプ、パッケージのインストール、インポート、その他をどのように処理しているかをご覧ください? あなたの仕事は、ビジネス論理に焦点を当てることです。 クーポンは使われていますか?」 SAVE10 Vercel を使用するデプロイ段階に進みましょう。 Deploy to Vercel in Seconds (デプロイ) 今日のデプロイは、Cursorで構築するのと同じくらい簡単です. コードを送信するコマンドを書くことはありません. それはダッシュボードクリックのようなものです: GitHub リポジトリを選択し、デプロイのために Vercel に渡します。 コードが完了したら、それをGitHubに押すだけで、そこからVercelはデプロイのためにすべてを自動的に処理します。 しかし、なぜ Vercel なのか? 単に、コードが生産に混乱する前に展開をプレビューできるためです。 なぜ CI/CD の Preview Deployments Matter が重要なのか? プレビューデプロイメントは私たちが働く方法を変える。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がテストに取り組む ここで興味深い部分が来る:AI駆動の自動テスト。 あなたのツールを手動でテストしたり、PlaywrightまたはCypressのスクリプトを書き、維持する代わりに、あなたは単純な英語でテストケースを説明し、エージェントは残りを処理します。 テクノロジー あなたのプロジェクトを QA.tech に追加し、Vercel が展開した URL にそれを指し、QA.tech はあなたのウェブアプリケーションをスキャンし、知識グラフを作成することで構造を学びます。 私たちのアプリケーションのためにいくつかのテストを作成します。チャットを開いて、テストしたいものを説明します. たとえば、「私のアプリケーションのための最初のテストを3〜4つ作成してください。 そこから、QA.techはテストステップを自動的に生成します。覚えておいて、すでにあなたのアプリのすべてを知っています、例えば、カートの位置、配送フォームの記入方法、支払いボタンの場所、および確認ページ。 このテストケースは「テストケースを追加」ボタンを介して手動で作成したり、チャットで作成したり、例えば「ステップ3でモバイルスクリーン向けのクーポンコードの確認メッセージをテストする」と促すことができます。 QA.techはあなたの入力に基づいてテストを自動的に生成し、ライブアプリに対して直接実行します。 アプリケーションの構築中にCursorによって残されたバグはQA.techによって捕まえられ、テストが失敗した。 また、ログ、ネットワークの詳細、テスト結果とともに、すべての関連するステップを提供しました。これらは、問題を効率的にデバッグするために必要な洞察です。 テクノロジー まず、コネクタを プロジェクトのリポジトリで「設定」→「統合」→「GitHub App」へ行き、ここで適切なリポジトリを選択し、「Pull Request Testing」から「Run on PRs」オプションを許可します。 GitHubアプリ 次に、Linear を接続して、バグがプロジェクト管理ツールに直接流れるようにします。 これを行うには、Settings → Organization Connections → Connect Linear を参照してください。 次に、Project Settings → Integrations → Linear から、Dropdown からチームを選択して保存します。 QA.tech はすでに問題のセクションに失敗したテストケースをリストアップし、このバグを直接あなたの Linear アカウントにエクスポートするオプションを与えますか? QA.tech はすでに問題のセクションに失敗したテストケースをリストアップしています。 ダッシュボードの「Create problem in Linear」をクリックします。 あなたの線形ダッシュボードは、現在、作成した問題を表示します。 タイプ、最初に見たもの、説明、およびテストへのリンクなどの詳細を含む。 テクノロジー このバグを修正し、ツールがどのように一緒に動作するかを見ていきましょう。 Fix, Push, Repeat (実際のワークフロー) 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を作成します。 QA.techのGitHub AppはPRを検出し、変更を分析し、以前作成したクーポン認証テストのような関連テストを選択します。 それは、VercelのプレビューURLに対してこれらのテストを実行します:手動の介入なし、アプリを自分でクリックしません。QA.techのボットは、PRでテストを実行し、ユーザーにリアルタイムのアップデートを提供します。 当社のQA.techダッシュボードでは、すべてのテストが合格し、検証メッセージがモバイルで正しく表示されます。 QA.tech ボットはPRを承認し、PRの完全なテスト概要と共にコメントします。 完全なプロセス(コードの更新、合併、展開、テスト)は、手動の介入なしで約5〜8分かかります。 すべての将来のトラックリクエスト(PR)は同じプロセスに従う:変更を行い、押し、テストを自動的に実行させます。 Wrapping It Up この新しい AI ビルダーの各ツールは一つに優れています。Linear は、迅速な計画と問題追跡に必要な焦点を提供し、Cursor は製品開発ワークフローを加速させ、Vercel は私たちにインスタントデプロイのプレビュー URL を提供し、QA.tech はテストを自動的に処理します。 プロセスの各ステップの重要性にもかかわらず、テストはしばしばチームが最も時間を費やすものの一つです。 そして最高の部分は、テストスクリプトを維持する必要はありません。機能を追加し、QA.techは新しいテストを作成します。UI フローを変更し、テストが自動的に更新されます。 脆弱なE2Eテストの作成、維持、デバッグをやめる準備ができていますか? 今日デモを取得して、QA.techがテストワークフローをどのように変革するかをご覧ください。 脆弱なE2Eテストの作成、維持、デバッグをやめる準備ができていますか? 今日デモを取得して、QA.techがテストワークフローをどのように変革するかをご覧ください。
