Svelte入門：リファレンス CLI -playwright-

今日は、SvelteKitのリファレンスについて解説して います。

背景

SvelteKitのリファレンスについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。

CLIツール（sv）

コマンドラインインターフェース（CLI）であるsvは、Svelteアプリケーションの作成と保守のためのツールキットです。

Playwrightとは

Playwrightはブラウザテスト自動化ツールです。Chromium、Firefox、WebKitなど複数のブラウザエンジンをサポートし、エンドツーエンド（E2E）テストを効率的に実行できます。

使用方法

npx sv add playwright

導入するもの

• package.jsonに追加されるスクリプト
• Playwright設定ファイル
• 更新された.gitignore
• デモテスト

使用例

Playwrightをプロジェクトに追加した後、以下のような用途で利用できます：

1. テストの実行

# すべてのテストを実行
npm run test

# UIモードでテストを実行（対話的なテスト実行環境）
npm run test:ui

# 特定のブラウザでテストを実行
npx playwright test --project=chromium

# 特定のテストファイルを実行
npx playwright test tests/example.spec.ts

2. デモテストの例

// tests/example.spec.ts
import { test, expect } from '@playwright/test';

test('ホームページが正常に表示される', async ({ page }) => {
  await page.goto('/');
  
  // ページタイトルを確認
  expect(await page.title()).toContain('SvelteKit');
  
  // 特定の要素が存在することを確認
  await expect(page.locator('h1')).toBeVisible();
});

test('ナビゲーションが機能する', async ({ page }) => {
  await page.goto('/');
  
  // 特定のリンクをクリック
  await page.click('a[href="/about"]');
  
  // URLが変わったことを確認
  await expect(page).toHaveURL(/.*about/);
});

3. フォーム送信のテスト

test('ログインフォームが正常に動作する', async ({ page }) => {
  await page.goto('/login');
  
  // フォームに入力
  await page.fill('input[name="username"]', 'testuser');
  await page.fill('input[name="password"]', 'password123');
  
  // フォーム送信
  await page.click('button[type="submit"]');
  
  // ログイン後にダッシュボードにリダイレクトされることを確認
  await expect(page).toHaveURL(/.*dashboard/);
});

4. スクリーンショットの取得

test('ダークモードが正しく適用される', async ({ page }) => {
  await page.goto('/');
  
  // ダークモードに切り替え
  await page.click('#theme-toggle');
  
  // スクリーンショットを撮影
  await page.screenshot({ path: 'screenshots/dark-mode.png' });
});

5. APIリクエストのモック

test('データ取得エラー時の表示', async ({ page }) => {
  // APIリクエストをモック
  await page.route('**/api/users', route => {
    route.fulfill({
      status: 500,
      body: JSON.stringify({ error: 'Server error' })
    });
  });
  
  await page.goto('/users');
  
  // エラーメッセージが表示されることを確認
  await expect(page.locator('.error-message')).toBeVisible();
});

Playwrightはこのようなユースケースだけでなく、アクセシビリティテスト、パフォーマンス測定、ビジュアルリグレッションテストなど、さまざまな高度なブラウザテスト機能も提供します。SvelteKitプロジェクトに簡単に統合できるため、アプリケーションの品質保証プロセスを効率化する強力なツールとなります。

おわりに 

今日は、 SvelteKitのリファレンスについて解説しました。