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

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

Playwright をインストールします

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

npm install -D @playwright/test

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

npx playwright install

プレイライトの設(shè)定

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

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 と統(tǒng)合する

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

---

2. テストを整理する

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

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

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

---

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

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

---

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');
});

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

---

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

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

• data-testid 屬性: data-testid 屬性を Vue コンポーネントに追加して、テスト內(nèi)で見つけやすくします。

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

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

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

---

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

適切な待機(jī)を使用する

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

npm install -D @playwright/test

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

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

npx playwright install

---

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

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

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',
  },
});

• デバッグ モード: 非ヘッドレス モードおよび詳細(xì)ログを使用して Playwright テストを?qū)g行します。

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

---

8. CI/CD 統(tǒng)合

Playwright を CI/CD パイプラインと統(tǒng)合して、問題を早期に発見します。パイプラインを確認(rèn)します:

• 依存関係をインストールします。
• Vue.js 開発サーバーを起動します。
• クリーンな環(huán)境で Playwright テストを?qū)g行します。

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

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 固有の機(jī)能を処理する

ルーターナビゲーション

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

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

反応狀態(tài)

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

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

---

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

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

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