SvelteKitでのPlaywrightセットアップ
公式インテグレーションを使い、SvelteKitプロジェクト用にPlaywrightをインストールして設定します。
「SvelteKitでのPlaywrightセットアップ」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSveltejs Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Sveltejs Academyコースには全4レッスンが含まれています。
Playwright とは
Playwright は、Chromium、Firefox、WebKit をサポートする最新のエンドツーエンドテストフレームワークです。
インストール
SvelteKit の create-svelte ウィザードで Playwright を追加できます。それ以外の場合は手動でインストールします。
npm init playwright@latest設定
ウィザードによって、ブラウザー設定、テストディレクトリ、アプリを起動する webServer フックを含む playwright.config.js が作成されます。
webServer の設定
Playwright はテスト前に npm run build && npm run preview を自動的に起動できます。
webServer: { command: "npm run build && npm run preview", port: 4173 }フォルダー構成
テストは tests/ または e2e/ に配置します。通常は機能ごとに 1 ファイルを用意します。
テストの実行
npm スクリプトを使用して実行します。
npm run test:e2eUI モード
Playwright の UI モードでは、タイムトラベルデバッグを利用できます。
npx playwright test --uiテストの生成
codegen コマンドは操作を記録し、テストを自動的に作成します。
npx playwright codegen http://localhost:5173クロスブラウザー
複数のブラウザーでテストを並列実行し、幅広くカバーできます。
トレースビューアー
失敗したテストではトレースが生成されます。playwright show-trace で表示して、すばやくデバッグできます。
CI 統合
Playwright は公式のコンテナイメージを使用して、GitHub Actions、GitLab CI などで実行できます。
確認
Playwright の webServer は何を行いますか？
まとめ
ウィザードで Playwright を設定します。webServer を設定してアプリを自動起動し、npm run test:e2e でテストを実行します。
AI チューターと学ぶ HTML — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 41
- レッスン
- 163
よくある質問
「SvelteKitでのPlaywrightセットアップ」レッスンは無料ですか？
はい。「SvelteKitでのPlaywrightセットアップ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。
「SvelteKitでのPlaywrightセットアップ」で何を学びますか？
公式インテグレーションを使い、SvelteKitプロジェクト用にPlaywrightをインストールして設定します。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Sveltejs Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「SvelteKitでのPlaywrightセットアップ」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このSveltejs Academyレッスンでコードを書いて実行できますか？
はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- SvelteKitでのPlaywrightセットアップ
- ページ操作テストの作成
- フォームとナビゲーションのテスト
- CIインテグレーション