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).