e2e-playwright

name	e2e-playwright
description	Best practices for E2E testing with Playwright, focusing on Angular 20, Firebase Emulators, and Architecture Guards.

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('[e-mail]');
  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).