Mastering Playwright for Advanced Angular Testing: A Deep Dive

# .github/workflows/playwright.yml
name: Playwright Tests

# Trigger the workflow on pushes to 'main' and 'master' branches,
# and on pull requests targeting these branches.
on:
  push:
    branches: [ main, master ]
  pull_request:
    branches: [ main, master ]

jobs:
  test:
    timeout-minutes: 15 # Give enough time for Angular build and Playwright tests
    runs-on: ubuntu-latest # Use a fresh Ubuntu runner

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4 # Action to clone your repository

      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20' # Use a recent LTS Node.js version

      - name: Install Angular CLI (if not in package.json)
        run: npm install -g @angular/cli # Ensure Angular CLI is available

      - name: Install dependencies
        run: npm ci # 'npm ci' is recommended in CI for clean installs

      - name: Install Playwright Browsers
        # '--with-deps' installs system dependencies needed by browsers (e.g., fonts)
        run: npx playwright install --with-deps

      - name: Start Angular Development Server
        # Run Angular app in the background. 'npm run start' usually maps to 'ng serve'.
        # We need it to be detached so Playwright can run in parallel.
        run: npm run start & # Start the Angular app in the background
        # Capture the process ID to properly kill it later
        # Or, rely on Playwright's webServer config (preferred)

      - name: Wait for Angular App to be ready (if not using Playwright webServer)
        # This step is crucial if you're NOT using the webServer config in playwright.config.ts
        # If you ARE using webServer in Playwright config, you can remove this step.
        # This example shows how to manually wait, but webServer is cleaner.
        run: npx wait-on http-get://localhost:4200 # waits for port 4200 to be responsive

      - name: Run Playwright tests
        # This command runs all tests defined in your Playwright config.
        # Playwright's webServer config handles starting/stopping Angular app automatically
        # if configured in playwright.config.ts (preferred over manual start/wait).
        run: npx playwright test

      - name: Upload Playwright Test Report (on failure or always)
        # 'if: ${{ !cancelled() }}' ensures artifact upload even if a previous step fails
        uses: actions/upload-artifact@v4
        if: always() # Upload report even if tests fail
        with:
          name: playwright-report
          path: playwright-report/ # This is where Playwright generates its HTML report
          retention-days: 30 # How long to keep the artifact

      # Optional: Clean up Angular server if started manually (not needed with Playwright webServer)
      # - name: Stop Angular Server (if not using Playwright webServer)
      #   if: always() && steps.start-angular-server.outputs.pid # Only if you captured PID
      #   run: kill ${{ steps.start-angular-server.outputs.pid }} # Example if PID was captured

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './e2e',
  fullyParallel: true, // Run tests within the same file concurrently (if possible)
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,

  // IMPORTANT: Configure workers for parallel execution
  // On CI, it's often best to limit workers to the number of CPU cores available
  // to avoid resource contention. Locally, you can set it to '50%' of cores or a fixed number.
  workers: process.env.CI ? 2 : undefined, // Example: 2 workers on CI, unlimited locally
  // Or: workers: '50%', // Use 50% of available CPU cores
  // Or: workers: 4, // Use a fixed number of 4 workers

  reporter: 'html',
  use: {
    baseURL: 'http://localhost:4200',
    trace: 'on-first-retry',
  },
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
  ],
  webServer: {
    command: 'npm run start',
    url: 'http://localhost:4200',
    reuseExistingServer: !process.env.CI,
  },
});

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

// Configure this specific describe block to run tests in parallel
test.describe.configure({ mode: 'parallel' });

test.describe('Parallel Tests in a Single File', () => {
  test.beforeEach(async ({ page }) => {
    // Each test in this describe block will get its own fresh page/context
    await page.goto('/');
  });

  test('should verify element A concurrently', async ({ page }) => {
    console.log(`Worker ${test.info().workerIndex}: Running Test A`);
    await expect(page.locator('h1')).toBeVisible();
    await expect(page.locator('h1')).toHaveText('Welcome to Playwright Angular App!');
    // Simulate some work
    await page.waitForTimeout(500);
  });

  test('should verify element B concurrently', async ({ page }) => {
    console.log(`Worker ${test.info().workerIndex}: Running Test B`);
    await expect(page.getByTestId('nav-products')).toBeVisible();
    await expect(page.getByTestId('nav-products')).toHaveText('Products');
    await page.waitForTimeout(700);
  });

  test('should verify element C concurrently', async ({ page }) => {
    console.log(`Worker ${test.info().workerIndex}: Running Test C`);
    await expect(page.getByTestId('increment-button')).toBeVisible();
    await expect(page.getByTestId('increment-button')).toHaveText('Increment Counter');
    await page.waitForTimeout(300);
  });
});

# .github/workflows/playwright-sharded.yml
name: Sharded Playwright Tests

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  # Define a matrix strategy to create multiple jobs, one for each shard
  test-shard:
    timeout-minutes: 15
    runs-on: ubuntu-latest
    strategy:
      fail-fast: false # Allows other shards to continue if one fails
      matrix:
        # Define the number of shards and which shard this job will run
        shard: [1, 2, 3] # Example: 3 shards
        # You could also add different browsers to the matrix for cross-browser sharding
        # browser: ['chromium', 'firefox']

    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - name: Install dependencies
        run: npm ci
      - name: Install Playwright Browsers
        run: npx playwright install --with-deps

      - name: Start Angular Development Server (if not using Playwright webServer)
        # Use a consistent port across shards or ensure it's not reused
        run: npm run start &
        # Adjust if using Playwright's webServer config which is recommended

      - name: Run Playwright tests for shard ${{ matrix.shard }}
        # The --shard flag tells Playwright which part of the test suite to run
        run: npx playwright test --shard=${{ matrix.shard }}/${{ strategy.job-total }}
        # If matrix.browser was defined:
        # run: npx playwright test --project=${{ matrix.browser }} --shard=${{ matrix.shard }}/${{ strategy.job-total }}

      - name: Upload Playwright Report for Shard ${{ matrix.shard }}
        uses: actions/upload-artifact@v4
        if: always()
        with:
          name: playwright-report-shard-${{ matrix.shard }}
          path: playwright-report/
          retention-days: 7

    # Optional: Merge reports after all shards complete (requires an extra job)
  merge-reports:
    runs-on: ubuntu-latest
    needs: test-shard # This job depends on all test-shard jobs completing
    if: always() # Run even if previous jobs failed
    steps:
      - uses: actions/checkout@v4
      - name: Download all Playwright reports
        uses: actions/download-artifact@v4
        with:
          pattern: playwright-report-shard-*
          path: all-playwright-reports # Download all reports into this directory
      - name: Install Playwright
        run: npm install -D @playwright/test # Need playwright to merge reports
      - name: Merge Playwright reports
        # Playwright CLI can merge multiple HTML reports into a single one
        run: npx playwright show-report all-playwright-reports --output merged-report
      - name: Upload Merged Report
        uses: actions/upload-artifact@v4
        with:
          name: merged-playwright-report
          path: merged-report/
          retention-days: 30

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

test.describe('Smoke Test Example', () => {
  test('should load homepage in smoke test', async ({ page }) => {
    await page.goto('/');
    await expect(page.locator('h1')).toBeVisible();
    await expect(page).toHaveTitle(/PlaywrightAngularApp/);
  });
});

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './e2e',
  fullyParallel: true, // You can keep this or set to false for more control per project
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: undefined, // Let projects define their own workers

  reporter: 'html',
  use: {
    baseURL: 'http://localhost:4200',
    trace: 'on-first-retry',
  },
  projects: [
    {
      name: 'smoke',
      testMatch: '**/e2e/smoke/**/*.spec.ts', // Only run files in the smoke directory
      use: { ...devices['Desktop Chrome'] },
      workers: 4, // More workers for faster smoke tests
    },
    {
      name: 'full',
      testIgnore: '**/e2e/smoke/**/*.spec.ts', // Exclude smoke tests from the full suite
      use: { ...devices['Desktop Chrome'] },
      workers: 2, // Fewer workers for comprehensive tests
    },
    {
      name: 'firefox-full',
      testIgnore: '**/e2e/smoke/**/*.spec.ts',
      use: { ...devices['Desktop Firefox'] },
      workers: 1, // Example: even fewer workers for Firefox on 'full'
    },
    {
      name: 'webkit-full',
      testIgnore: '**/e2e/smoke/**/*.spec.ts',
      use: { ...devices['Desktop Safari'] },
      workers: 1,
    }
  ],
  webServer: {
    command: 'npm run start',
    url: 'http://localhost:4200',
    reuseExistingServer: !process.env.CI,
  },
});

# .github/workflows/playwright.yml
name: Phased Playwright Tests

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  run-smoke-tests:
    timeout-minutes: 5 # Shorter timeout for smoke
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - name: Install dependencies
        run: npm ci
      - name: Install Playwright Browsers
        run: npx playwright install --with-deps
      - name: Start Angular Development Server
        run: npm run start &
      - name: Wait for Angular App to be ready
        run: npx wait-on http-get://localhost:4200
      - name: Run Playwright Smoke tests
        run: npx playwright test --project=smoke # Run only the 'smoke' project
      - name: Upload Smoke Report
        uses: actions/upload-artifact@v4
        if: always()
        with:
          name: playwright-smoke-report
          path: playwright-report/
          retention-days: 7

  run-full-tests:
    timeout-minutes: 20 # Longer timeout for full suite
    runs-on: ubuntu-latest
    needs: run-smoke-tests # Only run full tests if smoke tests passed
    if: success() # Ensure previous job was successful
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - name: Install dependencies
        run: npm ci
      - name: Install Playwright Browsers
        run: npx playwright install --with-deps
      - name: Start Angular Development Server
        run: npm run start &
      - name: Wait for Angular App to be ready
        run: npx wait-on http-get://localhost:4200
      - name: Run Playwright Full tests
        # Run all projects except 'smoke'
        run: npx playwright test --project=full --project=firefox-full --project=webkit-full
      - name: Upload Full Report
        uses: actions/upload-artifact@v4
        if: always()
        with:
          name: playwright-full-report
          path: playwright-report/
          retention-days: 30

npm install -D @sand4rt/experimental-ct-angular

npx playwright-sand4rt --ct

import { defineConfig, devices } from '@playwright/experimental-ct-angular';

export default defineConfig({
  testDir: './e2e-ct', // Separate directory for component tests
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined, // Often fewer workers for CT, or even 1
  reporter: 'html',

  use: {
    trace: 'on-first-retry',
    // Base URL for component testing - might not be 'http://localhost:4200' if it's a separate dev server
    // For Angular CT, the setup often involves a custom server by the CT runner
    // Refer to @sand4rt/experimental-ct-angular docs for specific baseURL config.
    // Usually, it's relative paths like '/'
    baseURL: 'http://localhost:3000', // Example, check CT runner actual port
  },

  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    // Add other browsers if needed, but CT often focuses on one for speed
  ],

  // IMPORTANT: The webServer configuration for component testing.
  // This tells Playwright-CT how to serve your Angular components.
  // This might involve an Angular-specific build process or a simple static server.
  // The @sand4rt package handles this with its internal server.
  webServer: {
    command: 'npm run start-ct', // Assuming you'll add a script for this
    url: 'http://localhost:3000', // The port where Playwright-CT serves components
    reuseExistingServer: !process.env.CI,
  },
});

// package.json
{
  "scripts": {
    "start-ct": "ng serve --port 3000 --configuration development", // Or specific command for Playwright-CT's internal server
    "test-ct": "playwright test -c playwright-ct.config.ts"
  }
}

ng generate component greeting --standalone

import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-greeting',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div data-test-id="greeting-container">
      <h3 *ngIf="name">Hello, <span class="name">{{ name }}</span>!</h3>
      <p *ngIf="!name" class="fallback-greeting">Please enter your name.</p>
      <button (click)="greet()">Greet me!</button>
      <span *ngIf="lastGreetedName" class="last-greeted">Last greeted: {{ lastGreetedName }}</span>
    </div>
  `,
  styles: `
    .greeting-container { padding: 10px; border: 1px solid #ccc; margin: 10px; }
    .name { font-weight: bold; color: blue; }
    .fallback-greeting { color: gray; font-style: italic; }
    .last-greeted { margin-left: 10px; font-size: 0.9em; color: green; }
    .error { color: red; }
  `
})
export class GreetingComponent {
  @Input() name: string | undefined;
  lastGreetedName: string | undefined;

  greet() {
    if (this.name) {
      this.lastGreetedName = this.name;
    } else {
      this.lastGreetedName = 'No name provided';
    }
  }
}

// e2e-ct/greeting.component.spec.ts
import { test, expect } from '@playwright/experimental-ct-angular';
import { GreetingComponent } from '../src/app/greeting/greeting.component'; // Adjust path as needed

test.describe('GreetingComponent', () => {

  test('should render "Hello, John!" when name is provided', async ({ mount }) => {
    // Mount the component with an input prop
    const component = await mount(GreetingComponent, {
      props: {
        name: 'John'
      },
    });

    // Assert that the greeting is visible and contains the name
    await expect(component.getByRole('heading', { level: 3 })).toBeVisible();
    await expect(component.getByRole('heading', { level: 3 })).toContainText('Hello, John!');
    await expect(component.locator('.fallback-greeting')).not.toBeVisible();
  });

  test('should render fallback message when no name is provided', async ({ mount }) => {
    // Mount without the name prop
    const component = await mount(GreetingComponent);

    await expect(component.locator('.fallback-greeting')).toBeVisible();
    await expect(component.locator('.fallback-greeting')).toContainText('Please enter your name.');
    await expect(component.getByRole('heading', { level: 3 })).not.toBeVisible();
  });

  test('should update last greeted name on button click', async ({ mount }) => {
    const component = await mount(GreetingComponent, {
      props: { name: 'Alice' }
    });

    const greetButton = component.getByRole('button', { name: 'Greet me!' });
    const lastGreetedSpan = component.locator('.last-greeted');

    await expect(lastGreetedSpan).not.toBeVisible(); // Initially not visible

    await greetButton.click();
    await expect(lastGreetedSpan).toBeVisible();
    await expect(lastGreetedSpan).toContainText('Last greeted: Alice');

    // Change input name and click again
    await component.update({ props: { name: 'Bob' } }); // Update props dynamically
    await greetButton.click();
    await expect(lastGreetedSpan).toContainText('Last greeted: Bob');
  });

  test('should show "No name provided" if name is empty on greet', async ({ mount }) => {
    const component = await mount(GreetingComponent, {
      props: { name: '' } // Empty string for name
    });

    await component.getByRole('button', { name: 'Greet me!' }).click();
    const lastGreetedSpan = component.locator('.last-greeted');
    await expect(lastGreetedSpan).toBeVisible();
    await expect(lastGreetedSpan).toContainText('No name provided');
  });

});

npx playwright test -c playwright-ct.config.ts

// e2e-ct/greeting.component.spec.ts
import { test, expect } from '@playwright/experimental-ct-angular';
import { GreetingComponent } from '../src/app/greeting/greeting.component';

test.describe('GreetingComponent Visual Regression', () => {

  test('initial state with name should match snapshot', async ({ mount }) => {
    const component = await mount(GreetingComponent, {
      props: { name: 'Visual User' },
    });
    // Use a unique name for the snapshot
    await expect(component).toHaveScreenshot('greeting-with-name-initial.png');
  });

  test('initial state without name should match snapshot', async ({ mount }) => {
    const component = await mount(GreetingComponent);
    await expect(component).toHaveScreenshot('greeting-without-name-initial.png');
  });

  test('state after greeting should match snapshot', async ({ mount }) => {
    const component = await mount(GreetingComponent, {
      props: { name: 'Tester' }
    });
    await component.getByRole('button', { name: 'Greet me!' }).click();
    await expect(component).toHaveScreenshot('greeting-after-click.png');
  });
});

<p>home works!</p>
<div class="welcome-message">
  This is the homepage of our Playwright Angular application.
</div>
<button data-test-id="increment-button" (click)="increment()">Increment Counter</button>
<p>Counter: <span data-test-id="counter-value">{{ counter }}</span></p>

<button data-test-id="load-data-button" (click)="loadDynamicData()" [disabled]="dynamicDataLoading">Load Dynamic Data</button>
<div data-test-id="dynamic-data-container" *ngIf="dynamicDataLoaded" style="margin-top: 20px;">
  <h3>Dynamic Data:</h3>
  <p>{{ dynamicData }}</p>
</div>

<div class="user-info-panel">
  <p>Logged in as: John Doe</p>
  <p class="last-login-date">Last Login: {{ currentDate | date:'medium' }}</p> <!-- Dynamic date -->
</div>
<div class="ad-banner">
  <img src="https://via.placeholder.com/728x90?text=Dynamic+Ad" alt="Dynamic Ad Banner"> <!-- Random ad content -->
</div>

import { Component, OnInit } from '@angular/core';
import { CommonModule, DatePipe } from '@angular/common'; // Import DatePipe

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [CommonModule, DatePipe], // Add DatePipe
  templateUrl: './home.component.html',
  styleUrl: './app.component.css'
})
export class HomeComponent implements OnInit {
  // ... existing properties ...
  currentDate: Date = new Date(); // For dynamic date

  ngOnInit(): void {
    // ...
    // Update date periodically for demonstration
    setInterval(() => {
      this.currentDate = new Date();
    }, 1000);
  }

  // ... existing methods ...
}

// e2e/visual-advanced.spec.ts
import { test, expect, Locator } from '@playwright/test';

test.describe('Advanced Visual Regression Techniques', () => {

  test.beforeEach(async ({ page }) => {
    await page.goto('/');
    // Ensure dynamic data is loaded if testing a state that includes it
    await page.getByTestId('load-data-button').click();
    await expect(page.getByTestId('dynamic-data-container')).toBeVisible();
  });

  test('should capture homepage without dynamic elements in full page snapshot', async ({ page }) => {
    // 1. Identify dynamic elements to mask
    const lastLoginDate = page.locator('.last-login-date');
    const adBanner = page.locator('.ad-banner');
    const dynamicDataContainer = page.getByTestId('dynamic-data-container'); // This might change

    // 2. Take a full page screenshot, masking the dynamic parts
    await expect(page).toHaveScreenshot('homepage-masked.png', {
      fullPage: true,
      mask: [
        lastLoginDate,
        adBanner,
        dynamicDataContainer, // Also mask the dynamic data section
      ],
      // Adjust threshold if minor anti-aliasing or rendering differences are acceptable
      maxDiffPixelRatio: 0.01, // 1% pixel difference allowed
      maxDiffPixels: 100, // Or max 100 pixels different
      // It's also good practice to make animations static or hide them
      // For example, if there are CSS animations:
      // animations: 'disabled',
      // or inject CSS:
      // stylePath: path.resolve(__dirname, './styles/no-animations.css')
    });
  });

  test('should capture only a stable section of the page', async ({ page }) => {
    // Instead of full page, screenshot a stable, isolated part like the navigation
    const navBar = page.locator('nav');
    await expect(navBar).toHaveScreenshot('navigation-bar-stable.png');
  });

  test('should force a specific color scheme for consistent screenshots', async ({ page }) => {
    // Some components might adapt to dark/light mode. Force one for VRT consistency.
    await page.emulateMedia({ colorScheme: 'dark' });
    await expect(page).toHaveScreenshot('homepage-dark-mode.png');

    await page.emulateMedia({ colorScheme: 'light' });
    await expect(page).toHaveScreenshot('homepage-light-mode.png');
  });

});

// e2e/visual-advanced.spec.ts (continued)
import { test, expect, Locator } from '@playwright/test';
// ... existing describe blocks ...

test.describe('Products Page Visuals', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/products');
  });

  test('product list should match snapshot after adding to cart', async ({ page }) => {
    const productList = page.getByTestId('product-list');
    const addToCartButton = page.getByRole('button', { name: 'Add First Product to Cart' });

    await expect(productList).toBeVisible();
    await expect(addToCartButton).toBeVisible();

    await addToCartButton.click();

    // If there were a dynamic "Product added!" message, you'd mask it here:
    // const notification = page.locator('.product-added-notification');

    await expect(productList).toHaveScreenshot('product-list-after-add-to-cart.png', {
      // mask: [notification] // If a notification exists and you want to mask it
      maxDiffPixelRatio: 0.01,
    });
  });
});

npm install -D axe-core @axe-core/playwright

import { Page, test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright'; // Import AxeBuilder

/**
 * Runs accessibility checks on the given page or specific element.
 * Reports any violations found.
 * @param page The Playwright page object.
 * @param testInfo The Playwright testInfo object.
 * @param selector Optional CSS selector to run checks on a subset of the DOM.
 * @param violationThreshold Optional. Max number of accessibility violations allowed.
 * @param impactLevels Optional. Array of impact levels to report ('critical', 'serious', 'moderate', 'minor'). Default: all.
 */
export async function checkAccessibility(
  page: Page,
  testInfo: test.TestInfo,
  selector?: string,
  violationThreshold: number = 0, // Default to 0 violations allowed
  impactLevels: ('critical' | 'serious' | 'moderate' | 'minor')[] = ['critical', 'serious', 'moderate', 'minor']
): Promise<void> {
  const accessibilityScanResults = await new AxeBuilder({ page })
    .exclude('script') // Exclude script tags which axe doesn't need to scan
    .withTags(['wcag2a', 'wcag2aa', 'best-practices']) // Specify WCAG compliance levels
    .setIncludedElements(selector ? [selector] : []) // Only scan specific selector if provided
    .analyze();

  // Filter violations based on desired impact levels
  const filteredViolations = accessibilityScanResults.violations.filter(
    (violation) => impactLevels.includes(violation.impact as any)
  );

  if (filteredViolations.length > violationThreshold) {
    // Generate a detailed report if violations are found
    const reportPath = testInfo.outputPath(`accessibility-report-${testInfo.title.replace(/\s/g, '-')}.json`);
    await testInfo.attach('accessibility-report', {
      body: JSON.stringify(filteredViolations, null, 2),
      contentType: 'application/json',
    });

    console.error(`Accessibility violations found on page: ${page.url()}`);
    filteredViolations.forEach(violation => {
      console.error(`- [${violation.impact}] ${violation.help} (${violation.id}):`);
      violation.nodes.forEach(node => {
        console.error(`  Selector: ${node.target.join(', ')}`);
        console.error(`  HTML: ${node.html}`);
      });
    });
    throw new Error(`${filteredViolations.length} accessibility violations found (threshold: ${violationThreshold}). See attached report for details.`);
  } else {
    console.log(`Accessibility check passed for ${page.url()} with ${filteredViolations.length} violations (threshold: ${violationThreshold}).`);
  }
}

<p>contact works!</p>
<h2>Contact Us</h2>
<form data-test-id="contact-form" (ngSubmit)="submitForm()">
  <div>
    <label for="name">Name:</label> <!-- Keep this label for now -->
    <input type="text" id="name" data-test-id="contact-name-input" [(ngModel)]="contactForm.name" name="name" required minlength="3">
  </div>
  <div>
    <!-- Intentionally remove label for email to cause an a11y violation -->
    Email:
    <input type="email" id="email" data-test-id="contact-email-input" [(ngModel)]="contactForm.email" name="email" required email>
  </div>
  <div>
    <label for="message">Message:</label>
    <textarea id="message" data-test-id="contact-message-textarea" [(ngModel)]="contactForm.message" name="message"></textarea><br><br>
  </div>
  <button type="submit" data-test-id="contact-submit-button" [disabled]="loading">Send Message</button>
</form>
<div data-test-id="submission-feedback" *ngIf="submissionFeedback" [ngClass]="{'success': isSuccess, 'error': !isSuccess}">
  {{ submissionFeedback }}
</div>
<div style="background-color: #EEE; color: #BBB; padding: 10px;" data-test-id="low-contrast-div">
  This text has low contrast and might be hard to read.
</div>

// e2e/accessibility.spec.ts
import { test, expect } from '@playwright/test';
import { checkAccessibility } from './utils/accessibility'; // Import the utility function

test.describe('Accessibility Testing with Axe-core', () => {

  test('homepage should be accessible', async ({ page }, testInfo) => {
    await page.goto('/');
    // Run full page accessibility check, allowing 0 violations
    await checkAccessibility(page, testInfo, undefined, 0);
  });

  test('products page should be accessible', async ({ page }, testInfo) => {
    await page.goto('/products');
    await checkAccessibility(page, testInfo, undefined, 0);
  });

  test('contact page should be accessible and report violations', async ({ page }, testInfo) => {
    await page.goto('/contact');
    // We expect some violations due to the intentionally broken contact page.
    // For demonstration, let's allow up to 2 violations and check for serious/critical.
    await checkAccessibility(page, testInfo, undefined, 2, ['critical', 'serious']);
    // You could also expect the test to fail if the threshold is exceeded
    // await expect(async () => {
    //   await checkAccessibility(page, testInfo, undefined, 0);
    // }).toThrowError(/accessibility violations found/);
  });

  test('only specific section of contact page should be accessible', async ({ page }, testInfo) => {
    await page.goto('/contact');
    // Only check the contact form element, which we assume is well-formed (if issues, this will catch)
    const formLocator = page.getByTestId('contact-form');
    // Check only the form, which we will try to ensure is accessible in this specific test
    // Let's set the threshold for this section to 0, expecting no issues here.
    await checkAccessibility(page, testInfo, '[data-test-id="contact-form"]', 0);
  });
});

<p>contact works!</p>
<h2>Contact Us</h2>
<form data-test-id="contact-form" (ngSubmit)="submitForm()">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" data-test-id="contact-name-input" [(ngModel)]="contactForm.name" name="name" required minlength="3">
  </div>
  <div>
    <!-- Fixed: Added label for email input -->
    <label for="email">Email:</label>
    <input type="email" id="email" data-test-id="contact-email-input" [(ngModel)]="contactForm.email" name="email" required email>
  </div>
  <div>
    <label for="message">Message:</label>
    <textarea id="message" data-test-id="contact-message-textarea" [(ngModel)]="contactForm.message" name="message"></textarea><br><br>
  </div>
  <button type="submit" data-test-id="contact-submit-button" [disabled]="loading">Send Message</button>
</form>
<div data-test-id="submission-feedback" *ngIf="submissionFeedback" [ngClass]="{'success': isSuccess, 'error': !isSuccess}">
  {{ submissionFeedback }}
</div>
<!-- Fixed: Adjusted colors for better contrast (example) -->
<div style="background-color: #FFF; color: #333; padding: 10px; border: 1px solid #CCC;" data-test-id="low-contrast-div">
  This text now has better contrast and is easier to read.
</div>

npm install -D playwright-lighthouse lighthouse
# You might also need chrome-launcher for direct Lighthouse control
# npm install -D chrome-launcher

import { defineConfig, devices } from '@playwright/test';
import path from 'path'; // Needed for resolving paths

export default defineConfig({
  testDir: './e2e',
  // ... other global configs ...

  projects: [
    // ... existing projects (chromium, firefox, webkit, smoke, full) ...
    {
      name: 'performance',
      testMatch: '**/e2e/performance/**/*.spec.ts', // Only run files in performance directory
      use: {
        ...devices['Desktop Chrome'],
        // IMPORTANT: Enable remote debugging for Lighthouse to connect
        launchOptions: {
          args: ['--remote-debugging-port=9222'], // Arbitrary port, ensure it's free
        },
      },
      workers: 1, // Lighthouse should run on a single worker for consistency
      timeout: 90 * 1000, // Longer timeout for performance audits (e.g., 90 seconds)
    },
  ],
  // ... other configs ...
});

import { Page, test } from '@playwright/test';
import { playAudit } from 'playwright-lighthouse';
import { Config, ConfigJson } from 'lighthouse'; // For Lighthouse configuration types

/**
 * Runs a Lighthouse audit on the current page.
 * @param page The Playwright page object.
 * @param testInfo The Playwright testInfo object.
 * @param thresholdConfig Optional. Custom performance thresholds (e.g., { performance: 80, accessibility: 90 }).
 * @param auditConfig Optional. Custom Lighthouse configuration (e.g., 'desktop-config').
 */
export async function runLighthouseAudit(
  page: Page,
  testInfo: test.TestInfo,
  thresholdConfig?: { [category: string]: number },
  auditConfig?: ConfigJson,
): Promise<void> {
  const reportsDir = testInfo.outputPath('lighthouse-reports');
  const reportName = `${testInfo.title.replace(/\s/g, '-')}`;

  // Default thresholds if not provided
  const defaultThresholds = {
    performance: 70, // Example: minimum 70 score for performance
    accessibility: 85,
    'best-practices': 85,
    seo: 85,
  };

  // Default Lighthouse config (using desktop preset)
  const desktopConfig = (await import('lighthouse/lighthouse-core/config/desktop-config')).default;

  try {
    await playAudit({
      page: page,
      config: auditConfig || desktopConfig as Config, // Use imported desktop config, cast to Config
      thresholds: thresholdConfig || defaultThresholds,
      port: 9222, // The remote debugging port configured in playwright.config.ts
      ignoreError: false, // Fail the test if Lighthouse audit encounters a critical error
      reports: {
        formats: { html: true, json: true }, // Generate both HTML and JSON reports
        name: reportName,
        directory: reportsDir,
      },
    });
    console.log(`Lighthouse audit for '${testInfo.title}' passed.`);
  } catch (error: any) {
    console.error(`Lighthouse audit for '${testInfo.title}' failed: ${error.message}`);
    // Attach the report for debugging if available
    const htmlReportPath = path.join(reportsDir, `${reportName}.html`);
    const jsonReportPath = path.join(reportsDir, `${reportName}.json`);

    if (testInfo.attachments) {
      testInfo.attachments.push({
        name: `${reportName}-report.html`,
        contentType: 'text/html',
        path: htmlReportPath,
      });
      testInfo.attachments.push({
        name: `${reportName}-report.json`,
        contentType: 'application/json',
        path: jsonReportPath,
      });
    }
    throw new Error(`Lighthouse audit failed for '${testInfo.title}'. See attached reports for details.`);
  }
}

// e2e/performance/home.perf.spec.ts
import { test, expect } from '@playwright/test';
import { runLighthouseAudit } from '../utils/performance';

test.describe('Performance Testing - Home Page', () => {

  test('homepage core web vitals should meet targets', async ({ page }, testInfo) => {
    // Navigate to the page
    await page.goto('/');

    // Run Lighthouse audit with custom thresholds
    await runLighthouseAudit(page, testInfo, {
      performance: 85, // Aim for a high performance score
      accessibility: 95,
      seo: 90,
      'best-practices': 90,
    });

    // You can also add traditional Playwright assertions for specific elements
    await expect(page.locator('h1')).toBeVisible();
  });

  test('homepage performance after dynamic data load', async ({ page }, testInfo) => {
    await page.goto('/');
    // Simulate user interaction that loads dynamic content
    await page.getByTestId('load-data-button').click();
    await expect(page.getByTestId('dynamic-data-container')).toBeVisible();

    // Run Lighthouse after the interaction, maybe with slightly relaxed performance goals
    await runLighthouseAudit(page, testInfo, {
      performance: 75, // Might be lower due to dynamic loading
      accessibility: 90,
    });
  });

});

// e2e/performance/products.perf.spec.ts
import { test, expect } from '@playwright/test';
import { runLighthouseAudit } from '../utils/performance';

test.describe('Performance Testing - Products Page with Large Data', () => {

  const largeMockProducts = Array.from({ length: 50 }, (_, i) => ({
    id: i + 1,
    name: `Product ${i + 1}`,
    price: 10 + i * 2,
  }));

  test('products page with many items should meet performance targets', async ({ page }, testInfo) => {
    // 1. Mock the API to return a large number of products
    await page.route('**/api/products', async route => {
      await route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify(largeMockProducts),
      });
    });

    // 2. Navigate to the products page
    await page.goto('/products');

    // Wait for all products to be rendered (e.g., checking the number of rows)
    await expect(page.getByTestId('product-list').locator('li')).toHaveCount(largeMockProducts.length);

    // 3. Run Lighthouse audit with adjusted thresholds
    await runLighthouseAudit(page, testInfo, {
      performance: 65, // Slightly lower due to many items, adjust as needed
      accessibility: 90,
      seo: 85,
      'best-practices': 85,
    });

    await expect(page.getByText('Product 1 ($10.00)')).toBeVisible();
    await expect(page.getByText(`Product ${largeMockProducts.length}`)).toBeVisible();
  });
});

// e2e/utils/mock-db.ts
interface MockUser {
  id: string;
  username: string;
  email: string;
  roles: string[];
}

const mockDatabase: Map<string, MockUser> = new Map();

export const mockDb = {
  // Simulate an async operation
  async createUser(user: MockUser): Promise<MockUser> {
    console.log(`[Mock DB] Creating user: ${user.username}`);
    if (mockDatabase.has(user.id)) {
      throw new Error(`User with ID ${user.id} already exists.`);
    }
    mockDatabase.set(user.id, user);
    return Promise.resolve(user);
  },

  async findUser(id: string): Promise<MockUser | undefined> {
    return Promise.resolve(mockDatabase.get(id));
  },

  async deleteUser(id: string): Promise<boolean> {
    console.log(`[Mock DB] Deleting user: ${id}`);
    return Promise.resolve(mockDatabase.delete(id));
  },

  async clearDatabase(): Promise<void> {
    console.log("[Mock DB] Clearing database.");
    mockDatabase.clear();
    return Promise.resolve();
  },
};

// e2e/fixtures/auth.fixture.ts
import { test as base, expect, Page, BrowserContext } from '@playwright/test';
import { mockDb } from '../utils/mock-db';
import path from 'path';

// Define the types of new fixtures available to tests
type AuthFixtures = {
  // `dbUser` is a worker-scoped fixture providing a unique user for each worker
  dbUser: { id: string; username: string; email: string };
  // `loggedInPage` is a test-scoped fixture that provides a page logged in as dbUser
  loggedInPage: Page;
  // `loggedInContext` is a test-scoped fixture that provides a browser context logged in as dbUser
  loggedInContext: BrowserContext;
  // `adminPage` is a test-scoped fixture that logs in as a predefined admin user
  adminPage: Page;
};

// Path to store authenticated state, unique per worker for parallel runs
const authFile = (workerIndex: number) =>
  path.join(__dirname, `../.auth/user-${workerIndex}.json`);

export const test = base.extend<AuthFixtures>({
  // 1. dbUser: Worker-scoped fixture to create and manage a unique test user
  dbUser: [
    async ({}, use, testInfo) => {
      const user = {
        id: `user-${testInfo.workerIndex}-${Date.now()}`,
        username: `testuser-${testInfo.workerIndex}`,
        email: `test${testInfo.workerIndex}@example.com`,
        roles: ['user'],
      };
      await mockDb.createUser(user);
      await use(user); // Provide the user object to tests that request `dbUser`
      await mockDb.deleteUser(user.id); // Clean up the user after all tests in this worker
    },
    { scope: 'worker', auto: true }, // 'auto: true' means it runs automatically for each worker
  ],

  // 2. loggedInContext: Creates a logged-in browser context, worker-scoped
  // This fixture depends on `dbUser`
  loggedInContext: [
    async ({ browser, dbUser }, use, testInfo) => {
      const authFilePath = authFile(testInfo.workerIndex);
      let context: BrowserContext;

      try {
        // Try to reuse authenticated state if it exists
        context = await browser.newContext({ storageState: authFilePath });
        // Verify the login state is still valid (e.g., by checking a known logged-in element)
        const page = await context.newPage();
        await page.goto('/');
        const welcomeMessage = page.locator(`text=Welcome, ${dbUser.username}!`);
        await expect(welcomeMessage).toBeVisible({ timeout: 5000 });
        await page.close(); // Close the verification page
      } catch (error) {
        // If reuse fails or state doesn't exist, perform login
        console.warn(`[Auth Fixture] Performing fresh login for worker ${testInfo.workerIndex}`);
        context = await browser.newContext();
        const page = await context.newPage();
        await page.goto('/login'); // Navigate to your login page
        await page.getByLabel('Username').fill(dbUser.username);
        await page.getByLabel('Password').fill('password123'); // Assume a generic password
        await page.getByRole('button', { name: 'Login' }).click();
        await expect(page).toHaveURL('/'); // Assume redirection to homepage
        await expect(page.locator(`text=Welcome, ${dbUser.username}!`)).toBeVisible();

        // Save the authentication state for reuse
        await context.storageState({ path: authFilePath });
        await page.close(); // Close the login page
      }

      await use(context); // Provide the authenticated context to tests

      // Teardown: Close the context
      await context.close();
    },
    { scope: 'worker' }, // This runs once per worker
  ],

  // 3. loggedInPage: A test-scoped fixture that uses the loggedInContext
  // This provides a fresh page within the authenticated context for each test
  loggedInPage: [
    async ({ loggedInContext }, use) => {
      const page = await loggedInContext.newPage();
      await page.goto('/'); // Navigate to a known starting point
      await use(page); // Provide the authenticated page to the test
      await page.close(); // Close the page after the test
    },
    { scope: 'test' }, // This runs once per test
  ],

  // 4. adminPage: A separate fixture for an admin user
  adminPage: [
    async ({ browser }, use) => {
      const adminUsername = 'adminuser';
      const adminPassword = 'adminpassword';

      // Ensure admin user exists in mock DB
      await mockDb.createUser({
        id: 'admin-1',
        username: adminUsername,
        email: 'admin@example.com',
        roles: ['admin'],
      });

      const context = await browser.newContext();
      const page = await context.newPage();
      await page.goto('/login');
      await page.getByLabel('Username').fill(adminUsername);
      await page.getByLabel('Password').fill(adminPassword);
      await page.getByRole('button', { name: 'Login' }).click();
      await expect(page).toHaveURL('/admin-dashboard'); // Assuming admin has a different redirect
      await expect(page.locator(`text=Welcome, ${adminUsername}!`)).toBeVisible();

      await use(page);
      await page.close();
      await context.close();
      await mockDb.deleteUser('admin-1'); // Clean up admin user
    },
    { scope: 'test' }, // This runs once per test
  ],
});

export { expect }; // Re-export Playwright's expect for convenience