0Pricing
Sveltejs Academy · レッスン

フォームとナビゲーションのテスト

フォーム送信、リダイレクト、複数ページにまたがるユーザーフローをE2Eでテストします。

「フォームとナビゲーションのテスト」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSveltejs Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Sveltejs Academyコースには全4レッスンが含まれています。

フォーム送信

入力欄に値を入力して送信し、その結果をアサートします。

await page.getByLabel("Email").fill("a@b.com");
await page.getByRole("button", { name: "Submit" }).click();
await expect(page).toHaveURL("/dashboard");

バリデーションエラー

無効な入力によって、表示可能なエラーメッセージが生成されることをテストします。

await page.getByRole("button", { name: "Submit" }).click();
await expect(page.getByText("Email required")).toBeVisible();

サーバー側エラー

APIをモックするかDBにデータを投入して、サーバー側のバリデーション経路を実行します。

リダイレクトフロー

ログイン後に新しいURLと、遷移先ページ固有の要素をアサートします。

ブラウザーのナビゲーション

履歴をテストするには、page.goBack()とpage.goForward()を使います。

Cookieと認証

一度サインインし、storageStateで状態を再利用すると、テストスイートを高速化できます。

CSRF

実際のフォーム送信を使うと、SvelteKit組み込みのCSRF保護が自動的に処理されます。

プログレッシブエンハンスメント

ブラウザーの設定を切り替えて、JavaScriptが無効でもフォームが動作することをテストします。

マルチステップフォーム

Page Objectを使って各ステップをカプセル化し、必要に応じて途中の状態をアサートします。

ネットワークモック

page.route()でAPI呼び出しをインターセプトし、決定的なテストを実行します。

await page.route("**/api/items", route => route.fulfill({ json: [] }));

ビジュアルリグレッション

送信後の主要なページをスナップショットとして保存し、意図しないUIの変更を検出します。

クイックチェック

テスト間でログイン状態を再利用するには、どうすればよいですか。

まとめ

フォーム、ナビゲーション、エラー状態を含む、ユーザーの一連のフロー全体をテストします。モックとstorageStateを使って、テストスイートを高速かつ信頼性の高い状態に保ちます。

よくある質問

「フォームとナビゲーションのテスト」レッスンは無料ですか？

はい。「フォームとナビゲーションのテスト」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。

「フォームとナビゲーションのテスト」で何を学びますか？

フォーム送信、リダイレクト、複数ページにまたがるユーザーフローをE2Eでテストします。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Sveltejs Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。

「フォームとナビゲーションのテスト」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このSveltejs Academyレッスンでコードを書いて実行できますか？

はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. SvelteKitでのPlaywrightセットアップ
  2. ページ操作テストの作成
  3. フォームとナビゲーションのテスト
  4. CIインテグレーション
← Sveltejs Academyに戻る