npm package: @scaffit/playwright
Description: Playwright E2E testing setup with framework-specific configurations for Next.js, React, Vue, Angular, Svelte, Express, Fastify, Node.js projects
Author: Santosh Hanumaiah Ranganatha
Latest version: 1.0.6

# @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)
```bash
# Add Playwright scaffold (no installation needed!)
npx scaffit add playwright
```

### Alternative: Global Installation
```bash
# Install CLI globally
npm install -g scaffit

# Add Playwright scaffold
scaffit add playwright
```

### Option 2: Direct npm package usage
```bash
# 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:

```bash
# 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:

```bash
# 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
```typescript
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
```typescript
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
```typescript
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