Playwright による Vue.js のテスト: 完璧な Web アプリへの面白い旅

Playwright は、開発者が最新の Web アプリケーション向けに堅牢で信頼性の高いテストを作成できるようにする強力なエンドツーエンド (E2E) テスト フレームワークです。 Playwright を Vue.js と併用すると、アプリケーションがさまざまなブラウザーやデバイス間でシームレスに実行できるようになります。 Playwright と Vue.js を効果的に統合するためのベスト プラクティスをいくつか紹介します。

1. Vue.js を使用して Playwright をセットアップする

Playwright をインストールします

テストを作成する前に、Playwright をプロジェクトにインストールします。

npm install -D @playwright/test

次のコマンドを使用して特定のブラウザ依存関係をインストールすることもできます。

npx playwright install

プレイライトの設定

playwright.config.ts または .js ファイルを作成して、ブラウザーの種類、タイムアウト、ベース URL などの設定をカスタマイズします。

import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './tests/e2e',
  use: {
    baseURL: 'http://localhost:3000',
    headless: true,
    screenshot: 'only-on-failure',
    trace: 'on-first-retry',
  },
});

Vue CLI または Vite と統合する

開発サーバーを起動および停止するコマンドを追加することで、Vue アプリの準備が完了したことをテスト フレームワークが認識できるようにします。

---

2. テストを整理する

読みやすさと保守性を向上させるために、テスト ファイルの明確な構造を維持します。一般的な構造は次のとおりです:

project/
├── src/
├── tests/
│   ├── e2e/
│   │   ├── example.spec.ts
│   │   ├── login.spec.ts
│   ├── fixtures/
│   ├── helpers/

• e2e/: Playwright テストが含まれています。
• フィクスチャ/: 再利用可能なテスト データを保持します。
• helpers/: 繰り返しのコードを減らすためのユーティリティ関数が含まれています。

---

3. E2E テストの前にコンポーネント テストを使用する

Vue Test Utils や Cypress Component Testing などのツールを活用して、コンポーネントを個別にテストします。これは、Playwright でより複雑な E2E テストを実行する前に、個々の Vue コンポーネントが正しく機能していることを確認するのに役立ちます。

---

4. API とデータのモック

E2E テスト中は実際のバックエンド システムに依存しないようにします。 Playwright のルート API を使用して、ネットワーク リクエストをインターセプトし、応答を模擬します:

test('loads mock data', async ({ page }) => {
  await page.route('**/api/data', route =>
    route.fulfill({
      status: 200,
      body: JSON.stringify({ key: 'value' }),
    })
  );
  await page.goto('/');
  await expect(page.locator('#data-key')).toHaveText('value');
});

これにより、テスト結果の一貫性が確保され、実行が高速化されます。

---

5. Playwright のセレクターを活用する

Playwright は、次のような堅牢なセレクター戦略をサポートしています。

• data-testid 属性: data-testid 属性を Vue コンポーネントに追加して、テスト内で見つけやすくします。

  <button data-testid="submit-button">Submit</button>

• Playwright の組み込みロケーター: 要素のターゲットを正確に指定するには、locator() などのメソッドを使用します。

  const button = page.locator('button[data-testid="submit-button"]');

---

6. パフォーマンスと安定性を最適化する

適切な待機を使用する

page.waitForTimeout(1000) のような固定タイムアウトに依存することは避けてください。代わりに、Playwright の waitFor ユーティリティを使用して、特定の条件を待ちます:

npm install -D @playwright/test

テストを並行して実行する

Playwright はテスト時間を大幅に短縮できる並列テスト実行をサポートしています:

npx playwright install

---

7. デバッグとトラブルシューティング

• スクリーンショットとトレース: Playwright の設定で、失敗したテストのスクリーンショットとトレースを有効にします。これは問題を迅速に特定するのに役立ちます。

import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './tests/e2e',
  use: {
    baseURL: 'http://localhost:3000',
    headless: true,
    screenshot: 'only-on-failure',
    trace: 'on-first-retry',
  },
});

• デバッグ モード: 非ヘッドレス モードおよび詳細ログを使用して Playwright テストを実行します。

project/
├── src/
├── tests/
│   ├── e2e/
│   │   ├── example.spec.ts
│   │   ├── login.spec.ts
│   ├── fixtures/
│   ├── helpers/

---

8. CI/CD 統合

Playwright を CI/CD パイプラインと統合して、問題を早期に発見します。パイプラインを確認します:

• 依存関係をインストールします。
• Vue.js 開発サーバーを起動します。
• クリーンな環境で Playwright テストを実行します。

GitHub アクションの場合、サンプル構成は次のようになります。

test('loads mock data', async ({ page }) => {
  await page.route('**/api/data', route =>
    route.fulfill({
      status: 200,
      body: JSON.stringify({ key: 'value' }),
    })
  );
  await page.goto('/');
  await expect(page.locator('#data-key')).toHaveText('value');
});

---

9. Vue.js 固有の機能を処理する

ルーターナビゲーション

Vue Router と対話するときは、ナビゲーションが完了するまで必ず待機してください:

  <button data-testid="submit-button">Submit</button>

反応状態

Vue の反応性システムによる DOM の変更を確認します:

  const button = page.locator('button[data-testid="submit-button"]');

---

10. テストを継続的に改善する

• アプリの新機能や変更に合わせてテストを定期的に更新します。
• 不安定なテストを監視し、根本原因を無視するのではなく修正します。
• 一貫性を維持するために、Playwright のベスト プラクティスをチームと共有します。

以上がPlaywright による Vue.js のテスト: 完璧な Web アプリへの面白い旅の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。