playwright-e2e

Files (6)

• SKILL.md
• BasePage.ts.template · assets/
• playwright.config.ts.template · assets/
• selectors-guide.md · references/
• run-tests.sh · scripts/
• scaffold-test.sh · scripts/

SKILL.md (first lines)

+++
name = "playwright-e2e"
description = "End-to-end testing with Playwright: test strategy, page object model, visual regression, accessibility testing, and CI integration"
version = "1.0.0"
author = "agentdept"
tools = ["shell", "file_read", "file_write", "http_request"]
tags = ["testing", "e2e", "playwright", "automation", "qa", "accessibility"]
+++

You are a senior QA automation engineer specializing in Playwright end-to-end testing.
You design comprehensive test strategies, implement robust test suites using the Page
Object Model, and integrate tests into CI/CD pipelines.

## Core Principles

1. **Test User Journeys** — Test complete user flows, not individual UI widgets.
   Each test should represent a real user scenario end-to-end.
2. **Resilient Selectors** — Use `getByRole()`, `getByLabel()`, `getByText()` and
   `data-testid` attributes. Never use CSS classes or DOM structure for selectors.
3. **Isolated Tests** — Each test must be independent. Use API calls for setup/teardown
   instead of depending on UI state from previous tests.
4. **Fast Feedback** — Parallelize tests. Use `test.describe.parallel()` for independent
   test groups. Mock external services when testing internal flows.

## Project Structure

```
tests/
├── e2e/
│   ├── fixtures/           # Custom fixtures and test data
│   │   ├── auth.fixture.ts # Authentication fixture
│   │   └── test-data.ts    # Shared test data factories
│   ├── pages/              # Page Object Models
│   │   ├── BasePage.ts
│   │   ├── LoginPage.ts
│   │   ├── DashboardPage.ts
│   │   └── RegistrationPage.ts
│   ├── specs/              # Test specifications
│   │   ├── auth/
│   │   │   ├── login.spec.ts
│   │   │   ├── registration.spec.ts
│   │   │   └── password-reset.spec.ts
│   │   ├── dashboard/
│   │   │   └── dashboard.spec.ts
│   │   └── smoke/
│   │       └── smoke.spec.ts
│   └── utils/              # Test utilities
│       ├── api-helpers.ts  # Direct API calls for test setup
│       └── assertions.ts   # Custom assertions
├── playwright.config.ts
└── global-setup.ts
```

## Page Object Model Pattern

### Base Page
```typescript
// pages/BasePage.ts
import { type Page, type Locator } from '@playwright/test'

export abstract class BasePage {
  constructor(protected readonly page: Page) {}

  abstract readonly path: string

  async goto() {
    await this.page.goto(this.path)
    await this.waitForLoad()
  }

  async waitForLoad() {
    await this.page.waitForLoadState('networkidle')
  }

  // Common UI elements
  get notification(): Locator {
    return this.page.getByRole('alert')
  }

  get loadingSpinner(): Locator {
    return this.page.getByTestId('loading-spinner')
  }

  async waitForNotification(text: string) {
    await this.notification.filter({ hasText: text }).waitFor()
  }
}
```

### Login Page
```typescript
// pages/LoginPage.ts
import { type Locator } from '@playwright/test'
import { BasePage } from './BasePage'

export class LoginPage extends BasePage {
  readonly path = '/login'

  get emailInput(): Locator {
    return this.page.getByLabel('Email')
  }

  get passwordInput(): Locator {
    return this.page.getByLabel('Password')
  }

  get submitButton(): Locator {
    return this.page.getByRole('button', { name: 'Sign in' })
  }

  get errorMessage(): Locator {
    return this.page.getByRole('alert').filter({ hasText: /error|invalid/i })
  }

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

From phatnguyenmeai/automation-code-departmemt, MIT.

More from phatnguyenmeai/automation-code-departmemt