エンドツーエンドテスト
エンドツーエンドテストでユーザー操作の一連の流れを検証します。
「エンドツーエンドテスト」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン3/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全3レッスンが含まれています。
ユーザーのようにテストする
エンドツーエンドテストでは、実際のブラウザーで実際のアプリケーションを操作し、ユーザーと同じようにボタンをクリックしたりフォームに入力したりします。UIからバックエンドまで、すべてが連携して動作することを検証できます。
なぜE2Eなのか
ユニットテストは部分ごとに確認しますが、ユーザーがサインインし、移動し、フォームを送信し、結果を確認できるという一連の流れ全体を確認できるのはe2eテストだけです。他の方法では見つけられない統合部分の抜けを検出できます。
Cypressをインストールする
Cypressは、インタラクティブなテストランナーを備えた人気のe2eフレームワークです。開発用依存関係としてインストールし、テストランナーを開いてください。
npm install -D cypress
npx cypress openCypressのテスト構造
Cypressのテストでは、describeでテストをグループ化し、各シナリオに it を使います。よく知られたテスト構文と同じ構成です。
describe("Login flow", () => {
it("logs in a user", () => {
// steps go here
})
})ページにアクセスする
cy.visitを使ってブラウザーでURLを読み込みます。これは、ほとんどのテストの開始点になります。
cy.visit("http://localhost:5173/login")要素を見つける
cy.getはCSSセレクターを使って要素を選択します。Cypressは要素が表示されるまで自動的に待機するため、不安定なテストを減らせます。
cy.get("input[name=email]")
cy.get("button[type=submit]")入力欄への入力
選択した入力欄にtypeをチェーンして、キーボード入力をシミュレートします。
cy.get("input[name=email]").type("user@example.com")
cy.get("input[name=password]").type("secret123")要素のクリック
clickを使って、ユーザーと同じようにボタンやリンクを操作します。
cy.get("button[type=submit]").click()結果の検証
操作した後、ユーザーに表示されるはずの内容をshouldで検証します。Cypressは、検証に成功するかタイムアウトするまで検証を再試行します。
cy.url().should("include", "/dashboard")
cy.contains("Welcome back").should("be.visible")完全なE2Eテスト
手順を組み合わせると、実際のユーザーフローを読みやすくテストできます。
describe("Login flow", () => {
it("logs in successfully", () => {
cy.visit("/login")
cy.get("input[name=email]").type("user@example.com")
cy.get("input[name=password]").type("secret123")
cy.get("button[type=submit]").click()
cy.url().should("include", "/dashboard")
})
})Playwrightという選択肢
Playwrightも強力なE2Eツールの1つで、同様の概念に基づいています。ブラウザーを起動し、ページを移動し、操作を行い、検証します。APIは異なりますが、テストに対する考え方は同じです。
// Playwright style
// await page.goto("/login")
// await page.fill("input[name=email]", "user@example.com")
// await page.click("button[type=submit]")
// await expect(page).toHaveURL(/dashboard/)確認問題
E2Eテストに関する知識を確認します。
まとめ
E2Eテストでは、ブラウザー上で実際のアプリを操作します。Cypressでは、describe/itでテストを構成し、cy.visitでページを読み込み、cy.getで要素を検索し、typeとclickで操作し、shouldで検証します。Playwrightも同じ考え方に基づいています。次は、ビルドを最適化して公開します。
よくある質問
「エンドツーエンドテスト」レッスンは無料ですか？
はい。「エンドツーエンドテスト」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全3レッスンが含まれています。
「エンドツーエンドテスト」で何を学びますか？
エンドツーエンドテストでユーザー操作の一連の流れを検証します。 ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/3です。
「エンドツーエンドテスト」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- テストフレームワーク入門
- Vue Test Utilsによる単体テスト
- エンドツーエンドテスト