@scaffit/playwright

Playwright E2E testing setup with framework-specific configurations for Next.js, React, Vue, Angular, Svelte, Express, Fastify, Node.js projects.

Features

• Framework Detection: Automatically detects your project framework and configures Playwright accordingly
• Multi-Browser Support: Test across Chromium, Firefox, and WebKit browsers
• Page Object Model: Pre-configured page object model examples
• Fixtures & Helpers: Reusable test fixtures and helper utilities
• Screenshot & Video: Automatic screenshot capture and video recording
• Trace Collection: Built-in trace collection for debugging
• CI/CD Ready: Pre-configured GitHub Actions workflow
• Test Data Management: Organized test data and fixtures
• Global Setup/Teardown: Support for global test environment setup

Supported Frameworks

• Next.js
• React (Vite, Create React App)
• Vue
• Angular
• Svelte
• Express
• Fastify
• Node.js

Installation

Option 1: Using Scaffit CLI (Recommended)

# Add Playwright scaffold (no installation needed!)
npx scaffit add playwright

Alternative: Global Installation

# Install CLI globally
npm install -g scaffit

# Add Playwright scaffold
scaffit add playwright

Option 2: Direct npm package usage

# Install scaffold directly
npm install @scaffit/playwright

# Use in your code
import { setupPlaywright, previewPlaywright } from '@scaffit/playwright';

// Setup Playwright with custom options
const result = await setupPlaywright({
  includeCI: true,
  includePageObjectModel: true,
  includeFixtures: true,
  includeHelpers: true,
  includeData: true,
  includeGlobalSetupTeardown: false,
  projectRoot: './my-project'
});

// Preview changes before applying
const preview = await previewPlaywright({
  includeCI: true,
  includePageObjectModel: true,
  includeFixtures: true
});

Note: Both approaches require @scaffit/core to be installed (automatically handled).

Usage

After installation, you can immediately run E2E tests:

# Run E2E tests
npm run test:e2e

# Run tests with UI
npm run test:e2e:ui

# Run tests in debug mode
npm run test:e2e:debug

# Run tests in headed mode
npm run test:e2e:headed

# Show test report
npm run test:e2e:report

Note: E2E testing is ready to use immediately after installation. Browsers are installed automatically.

Configuration Options

• Include CI/CD: Add GitHub Actions workflow for E2E testing
• Include Page Object Model: Add page object model structure
• Include Fixtures: Add custom test fixtures
• Include Helpers: Add test helper utilities
• Include Test Data: Add test data management
• Include Global Setup/Teardown: Add global test setup and teardown

Generated Files

• playwright.config.ts - Main Playwright configuration
• tests/example.spec.ts - Example test file
• tests/setup.ts - Test setup and fixtures (optional)
• tests/fixtures.ts - Custom test fixtures (optional)
• tests/pages/ - Page object model examples (optional)
• tests/helpers/ - Test helper utilities (optional)
• tests/data/ - Test data management (optional)
• .github/workflows/playwright.yml - CI/CD configuration (optional)

Usage

After installation, you can immediately run tests:

# Run tests
npm run test:e2e

# Run tests with UI
npm run test:e2e:ui

# Run tests in debug mode
npm run test:e2e:debug

# Run tests in headed mode
npm run test:e2e:headed

# Show test report
npm run test:e2e:report

Note: Browsers are automatically installed during scaffold setup, so no additional installation steps are required.

Configuration

The scaffold will prompt you for:

• Browsers: Which browsers to test (Chromium, Firefox, WebKit)
• Setup Files: Include test setup files
• Fixtures: Include test fixtures
• Page Objects: Include page object model examples
• Helpers: Include test helper utilities
• Global Setup/Teardown: Include global test environment setup
• Test Data: Include test data management
• Screenshots: Enable screenshot capture on failure
• Videos: Enable video recording
• Traces: Enable trace collection for debugging
• Reports: Include HTML test reports
• CI/CD: Include GitHub Actions workflow

Framework-Specific Features

Next.js

• Pre-configured for Next.js development server
• App Router and Pages Router support
• API route testing examples

React

• Component testing with Playwright CT
• React-specific selectors and utilities
• Vite and Create React App support

Vue

• Component testing with Playwright CT
• Vue-specific selectors and utilities
• Vue 3 Composition API support

Angular

• Angular-specific testing utilities
• Component testing examples
• Angular Material support

Svelte

• Svelte-specific testing utilities
• Component testing examples
• SvelteKit support

Express/Fastify

• API endpoint testing
• Server-side testing utilities
• Database integration examples

Examples

Basic Test

import { test, expect } from '@playwright/test';

test('homepage has correct title', async ({ page }) => {
  await page.goto('/');
  await expect(page).toHaveTitle(/My App/);
});

Page Object Model

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

export class LoginPage {
  readonly page: Page;
  readonly emailInput: Locator;
  readonly passwordInput: Locator;
  readonly loginButton: Locator;

  constructor(page: Page) {
    this.page = page;
    this.emailInput = page.locator('[data-testid="email"]');
    this.passwordInput = page.locator('[data-testid="password"]');
    this.loginButton = page.locator('[data-testid="login-button"]');
  }

  async login(email: string, password: string) {
    await this.emailInput.fill(email);
    await this.passwordInput.fill(password);
    await this.loginButton.click();
  }
}

Custom Fixtures

import { test as base } from '@playwright/test';

type MyFixtures = {
  loggedInUser: LoggedInUser;
};

export const test = base.extend<MyFixtures>({
  loggedInUser: async ({ page }, use) => {
    const user = new LoggedInUser(page);
    await user.login();
    await use(user);
    await user.logout();
  },
});

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT