PlaywrightPomGenerator 1.0.0

Playwright POM Generator (ppg)

A .NET CLI tool that automatically generates Playwright Page Object Model (POM) tests for Angular applications.

Features

• 🎯 Automatic Angular Analysis - Scans Angular workspaces and applications to detect components
• 📄 Page Object Generation - Creates type-safe TypeScript page objects with locators
• 🧪 Test Scaffolding - Generates Playwright test specs with fixture integration
• 🔌 SignalR Mock Support - Generates RxJS-based SignalR mock fixtures for real-time testing
• ⚙️ Configurable Output - Customizable file headers and test file suffixes
• 🛠️ CI/CD Ready - Command-line interface for easy automation

Installation

Install as a global .NET tool:

dotnet tool install -g PlaywrightPomGenerator

Usage

Generate tests for an Angular application

ppg app /path/to/angular-app -o /output/directory

Generate tests for an Angular workspace

ppg workspace /path/to/workspace -o /output/directory

# For a specific project within the workspace
ppg workspace /path/to/workspace -o /output/directory -p my-project

Generate specific artifacts only

ppg artifacts /path/to/angular-app --all
ppg artifacts /path/to/angular-app --fixtures --page-objects
ppg artifacts /path/to/angular-app --selectors --configs

Generate SignalR mock fixture

ppg signalr-mock /output/directory

Global Options

# Custom file header (supports placeholders: {FileName}, {GeneratedDate}, {ToolVersion})
ppg app /path/to/app -o /output --header "// Generated by MyTool - {FileName}"

# Custom test file suffix (default: spec)
ppg app /path/to/app -o /output --test-suffix test  # Creates *.test.ts instead of *.spec.ts

Generated Output

The tool generates a complete Playwright test structure:

output/
├── playwright.config.ts    # Playwright configuration
├── fixtures.ts             # Test fixtures with page objects
├── helpers.ts              # Utility functions
├── signalr-mock.fixture.ts # SignalR mock (if requested)
├── pages/
│   ├── home.page.ts        # Page object classes
│   └── login.page.ts
├── selectors/
│   ├── home.selectors.ts   # Selector constants
│   └── login.selectors.ts
└── tests/
    ├── home.spec.ts        # Test specs
    └── login.spec.ts

Example Generated Page Object

import { Page, Locator } from '@playwright/test';

export class LoginPage {
  readonly page: Page;
  readonly usernameInput: Locator;
  readonly passwordInput: Locator;
  readonly submitButton: Locator;

  constructor(page: Page) {
    this.page = page;
    this.usernameInput = page.locator("[formControlName='username']");
    this.passwordInput = page.locator("[formControlName='password']");
    this.submitButton = page.getByRole('button', { name: 'Login' });
  }

  async fillUsernameInput(value: string): Promise<void> {
    await this.usernameInput.fill(value);
  }

  async fillPasswordInput(value: string): Promise<void> {
    await this.passwordInput.fill(value);
  }

  async clickSubmitButton(): Promise<void> {
    await this.submitButton.click();
  }

  async waitForLoad(): Promise<void> {
    await this.page.waitForSelector('app-login');
  }
}

Configuration

appsettings.json

Place an appsettings.json in your working directory:

{
  "Generator": {
    "FileHeader": "// Custom header for {FileName}",
    "TestFileSuffix": "spec",
    "ToolVersion": "1.0.0",
    "OutputDirectoryName": "e2e",
    "GenerateJsDocComments": true,
    "DefaultTimeout": 30000,
    "BaseUrlPlaceholder": "http://localhost:4200"
  }
}

Environment Variables

Use the POMGEN_ prefix:

export POMGEN_Generator__FileHeader="// My Header"
export POMGEN_Generator__TestFileSuffix="test"

Requirements

• .NET 8.0 SDK or later
• Angular application or workspace

Building from Source

git clone https://github.com/anthropics/PlaywrightPomGenerator
cd PlaywrightPomGenerator
dotnet build
dotnet test

Creating the NuGet Package

dotnet pack src/PlaywrightPomGenerator.Cli -c Release

Installing Locally

dotnet tool install -g --add-source ./src/PlaywrightPomGenerator.Cli/nupkg PlaywrightPomGenerator

License

MIT License - see LICENSE file for details.

Contributing

Contributions are welcome! Please open an issue or submit a pull request.