Files
everything-claude-code/docs/ja-JP/skills/angular-developer/references/e2e-testing.md
Claude 174e31b3fc feat(ja-JP): add skill sub-reference translations (angular, remotion, etc.)
Translated 85 skill sub-reference files to achieve full parity with
the English source:

- skills/angular-developer/references/ — 35 files (all references)
- skills/remotion-video-creation/rules/ — 28 files (all rules)
- skills/tinystruct-patterns/references/ — 5 files
- skills/openclaw-persona-forge/references/ — 6 files
- skills/skill-comply/prompts/ — 3 files
- skills/lead-intelligence/agents/ — 4 files
- skills/brand-voice/references/ — 1 file
- skills/frontend-slides/ — 2 files
- hooks/memory-persistence/README.md — 1 file

English source parity: 0 missing files (excluding rules/zh/, internal
docs, and experimental examples absent from zh-CN)
2026-05-18 06:15:26 +09:00

2.6 KiB
Raw Blame History

エンドツーエンドE2Eテスト

実際のブラウザでの重要なユーザージャーニーをカバーするために E2E テストを使用します。Cypress や Playwright など、Angular ワークスペースですでに設定されているフレームワークを優先してください。

E2E テストの実行

プロジェクト固有のコマンドについては package.jsonangular.json を確認してください。一般的なパターンには以下があります:

npm run e2e
pnpm e2e
ng e2e

アプリをビルドまたはサーブする必要がある場合は、並列テストエントリポイントを新たに作成するのではなく、既存のプロジェクトスクリプトを使用してください。

テスト構造

  • E2E スペックは cypress/e2e/e2e/ など、設定されたテストフレームワークに近い場所に保管してください。
  • 再利用可能なログイン/セットアップヘルパーはフレームワークのサポートディレクトリに配置してください。
  • フィクスチャは明示的に小さくして、各テストが依存するユーザー状態を説明できるようにしてください。

Cypress の例

describe('Login flow', () => {
  it('redirects to dashboard on valid credentials', () => {
    cy.visit('/login');
    cy.get('[data-cy=email]').type('user@example.com');
    cy.get('[data-cy=password]').type('password123');
    cy.get('[data-cy=submit]').click();
    cy.url().should('include', '/dashboard');
  });
});

Playwright の例

import {expect, test} from '@playwright/test';

test('redirects to dashboard on valid credentials', async ({page}) => {
  await page.goto('/login');
  await page.getByLabel('Email').fill('user@example.com');
  await page.getByLabel('Password').fill('password123');
  await page.getByRole('button', {name: 'Sign in'}).click();
  await expect(page).toHaveURL(/dashboard/);
});

ベストプラクティス

  • アクセシブルなロケーター(getByRolegetByLabel)または安定した data-* 属性を優先してください。
  • CSS クラス、DOM の深さ、または偶発的なテキストに依存するセレクターは避けてください。
  • 任意のスリープではなく、特定の UI 状態、ルート、またはネットワークレスポンスを待機してください。
  • スモークテストは短く保ち、完全なワークフローカバレッジは最も価値の高いパスに限定してください。