jpskill.com
🛠️ 開発・MCP コミュニティ

e2e-playwright

Angular 20とFirebase Emulatorsを用いたPlaywrightによるE2Eテストのベストプラクティスを、アーキテクチャガードに焦点を当てて実践するSkill。

📜 元の英語説明(参考)

Best practices for E2E testing with Playwright, focusing on Angular 20, Firebase Emulators, and Architecture Guards.

🇯🇵 日本人クリエイター向け解説

一言でいうと

Angular 20とFirebase Emulatorsを用いたPlaywrightによるE2Eテストのベストプラクティスを、アーキテクチャガードに焦点を当てて実践するSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⬇ このSkillをダウンロード(.skill) 元のソースを見る ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-17
取得日時
2026-05-17
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

[Skill 名] e2e-playwright

Playwright E2E テストスキル

🎯 目的

Black-Tortoise エコシステムにおける堅牢なエンドツーエンドテストのパターンを提供し、ユーザーのジャーニーとアーキテクチャの境界が検証されるようにします。

🛠️ コアパターン

1. テストの構成

  • ベース URL: playwright.config.ts で定義します。
  • 命名: e2e/ 配下の .spec.ts ファイルです。
  • 並列処理: テストは並列実行を可能にするために独立している必要があります。

2. Firebase Emulator の統合

テストは、速度と分離を確保するためにローカルエミュレーターに対して実行する必要があります。

// e2e/auth.spec.ts
import { test, expect } from '@playwright/test';

test.beforeEach(async ({ page }) => {
  // Reset emulator state or seed data via GQL mutations
  await page.goto('/');
});

test('should login successfully', async ({ page }) => {
  await page.getByLabel('Email').fill('test@example.com');
  await page.getByLabel('Password').fill('password123');
  await page.getByRole('button', { name: 'Login' }).click();

  await expect(page.getByRole('heading', { name: 'Dashboard' })).toBeVisible();
});

3. アーキテクチャガードの検証

architecture:gate の検証は、テストスイートまたは CI の一部として自動化できます。

// Example of checking for console errors or network violations
test('should not have console errors', async ({ page }) => {
  const logs: string[] = [];
  page.on('console', msg => {
    if (msg.type() === 'error') logs.push(msg.text());
  });

  await page.goto('/workspace');
  expect(logs.length).toBe(0);
});

4. カスタムセレクター (必須)

  • 必須: コンポーネントの安定した選択には data-testid を使用してください。
  • 必須: a11y を確保するために ARIA ロール (getByRole、getByLabel) を優先してください。
  • 禁止: 脆い CSS クラスや深い DOM 構造による選択は禁止です。

🚀 実行コマンド

  • すべて実行: pnpm e2e
  • UI モード: pnpm exec playwright test --ui
  • デバッグ: pnpm exec playwright test --debug

🔐 アーキテクチャゲート (dependency-cruiser)

Black-Tortoise は dependency-cruiser を使用して DDD の境界を強制します。

  • ルール: Presentation は Domain を直接インポートできません。
  • ルール: Application は Infrastructure をインポートできません。
  • チェック: pnpm run architecture:gate はプリコミットフック (Husky) の一部であるべきです。
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Playwright E2E Testing Skill

🎯 Purpose

Provide patterns for robust end-to-end testing in the Black-Tortoise ecosystem, ensuring that user journeys and architectural boundaries are verified.

🛠️ Core Patterns

1. Test Organization

  • Base URL: Defined in playwright.config.ts.
  • Naming: .spec.ts files under e2e/.
  • Parallelism: Tests should be independent to allow parallel execution.

2. Firebase Emulator Integration

Tests should run against local emulators to ensure speed and isolation.

// e2e/auth.spec.ts
import { test, expect } from '@playwright/test';

test.beforeEach(async ({ page }) => {
  // Reset emulator state or seed data via GQL mutations
  await page.goto('/');
});

test('should login successfully', async ({ page }) => {
  await page.getByLabel('Email').fill('test@example.com');
  await page.getByLabel('Password').fill('password123');
  await page.getByRole('button', { name: 'Login' }).click();

  await expect(page.getByRole('heading', { name: 'Dashboard' })).toBeVisible();
});

3. Architecture Guard Verification

Verification of the architecture:gate can be automated as part of the test suite or CI.

// Example of checking for console errors or network violations
test('should not have console errors', async ({ page }) => {
  const logs: string[] = [];
  page.on('console', msg => {
    if (msg.type() === 'error') logs.push(msg.text());
  });

  await page.goto('/workspace');
  expect(logs.length).toBe(0);
});

4. Custom Selectors (MANDATORY)

  • REQUIRED: Use data-testid for stable selection of components.
  • REQUIRED: Prefer ARIA roles (getByRole, getByLabel) to ensure a11y.
  • FORBIDDEN: Selecting by brittle CSS classes or deep DOM structures.

🚀 Execution Commands

  • Run all: pnpm e2e
  • UI Mode: pnpm exec playwright test --ui
  • Debug: pnpm exec playwright test --debug

🔐 Architecture Gate (dependency-cruiser)

Black-Tortoise uses dependency-cruiser to enforce DDD boundaries.

  • Rule: Presentation cannot import Domain directly.
  • Rule: Application cannot import Infrastructure.
  • Check: pnpm run architecture:gate should be part of the pre-commit hook (Husky).