# Pom Generator

> Interactive Page Object Model generator using Playwright MCP - navigates to web pages, analyzes HTML structure, and generates TypeScript POM classes with BasePage pattern.

- **Type:** Skill
- **Install:** `agentstack add skill-cuongtl1992-vibe-skills-pom-generator`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [cuongtl1992](https://agentstack.voostack.com/s/cuongtl1992)
- **Installs:** 0
- **Category:** [Web & Browser](https://agentstack.voostack.com/c/web-and-browser)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [cuongtl1992](https://github.com/cuongtl1992)
- **Source:** https://github.com/cuongtl1992/vibe-skills/tree/main/skills/testing/pom-generator

## Install

```sh
agentstack add skill-cuongtl1992-vibe-skills-pom-generator
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# POM Generator Skill

> Automatically generate Page Object Model classes by analyzing live web pages using Playwright MCP.

## When to Use

- Creating a new Page Object for a web page
- Analyzing page elements to identify selectors
- Generating POM code following best practices
- Setting up POM structure for a new project

---

## Workflow

### Step 1: Navigate to Page

Use Playwright MCP to navigate to the target URL:

```
mcp__playwright__playwright_navigate(url: "https://example.com/login")
```

### Step 2: Capture Page State

Take a screenshot and get HTML for analysis:

```
mcp__playwright__playwright_screenshot(name: "page_analysis", fullPage: true)
mcp__playwright__playwright_get_visible_html(cleanHtml: true, removeStyles: true)
```

### Step 3: Analyze Elements

Identify interactive elements from HTML:

| Element Type | Look For |
|--------------|----------|
| **Inputs** | ``, ``, `` |
| **Buttons** | ``, `input[type="submit"]`, clickable ``, `` |
| **Forms** | `` with action/method |
| **Navigation** | ``, routing links |
| **Feedback** | Error divs, alerts, toasts, modals |

### Step 4: Generate Code

1. **Check for BasePage** - If project doesn't have BasePage, create it first (see [base-page-template.md](references/base-page-template.md))
2. **Generate Page Object** - Create class extending BasePage with:
   - Selectors object (private readonly)
   - Navigation method
   - Form filling methods
   - Action methods
   - Validation methods

### Step 5: Close Browser

```
mcp__playwright__playwright_close()
```

---

## Code Generation Rules

### Naming Conventions

| Item | Convention | Example |
|------|------------|---------|
| **File** | `snake_case.ts` | `login_page.ts` |
| **Class** | `PascalCase` | `LoginPage` |
| **Methods** | `camelCase` | `fillUsername()` |
| **Selectors** | `camelCase` | `usernameInput` |

### Selector Priority

Choose selectors in this order (see [selector-strategies.md](references/selector-strategies.md)):

1. **ID** - `#username` (most stable)
2. **data-testid** - `[data-testid="username"]`
3. **name** - `[name="username"]`
4. **aria-label** - `[aria-label="Username"]`
5. **Dual selector** - `#username, [name="username"]` (fallback)

### Method Categories

Generate methods based on element types (see [pom-patterns.md](references/pom-patterns.md)):

```typescript
// Navigation
async navigate(): Promise

// Form filling (individual)
async fillUsername(value: string): Promise
async fillPassword(value: string): Promise

// Form filling (combined)
async fillCredentials(credentials: {...}): Promise

// Actions
async clickSubmit(): Promise
async clickForgotPassword(): Promise

// Validation
async getErrorMessage(): Promise
async isLoggedIn(): Promise
```

### Wait Strategies

Always include proper waits:

```typescript
// After navigation
await this.page.waitForLoadState('domcontentloaded');

// After form submit
await this.page.waitForLoadState('networkidle', { timeout: 30000 });

// For element visibility
await locator.waitFor({ state: 'visible', timeout: 5000 });
```

---

## Output Template

### BasePage (if needed)

See [base-page-template.md](references/base-page-template.md) for full implementation.

### Page Object Template

```typescript
import { Page } from 'playwright';
import { BasePage } from './BasePage';

export class [PageName]Page extends BasePage {
    private readonly selectors = {
        // Form inputs
        inputName: '#selector',
        // Buttons
        buttonName: '#selector',
        // Feedback
        errorMessage: '#selector',
    };

    constructor(
        page: Page,
        private readonly baseUrl: string = 'https://example.com',
    ) {
        super(page);
    }

    // Navigation
    async navigate(): Promise {
        await super.navigate(`${this.baseUrl}/path`);
        await this.page.waitForLoadState('domcontentloaded');
    }

    // Form Methods
    async fillField(value: string): Promise {
        await this.page.fill(this.selectors.inputName, value);
    }

    // Actions
    async clickButton(): Promise {
        await this.page.click(this.selectors.buttonName);
        await this.page.waitForLoadState('networkidle', { timeout: 30000 });
    }

    // Validation
    async getErrorMessage(): Promise {
        const locator = this.page.locator(this.selectors.errorMessage);
        try {
            await locator.waitFor({ state: 'visible', timeout: 5000 });
            return (await locator.textContent())?.trim() || '';
        } catch {
            return '';
        }
    }
}
```

---

## Usage Examples

### Example 1: Generate Login Page POM

```
User: Tạo POM cho trang https://example.com/login

Assistant:
1. Navigate đến trang sử dụng Playwright MCP
2. Chụp screenshot và phân tích HTML
3. Xác định elements: inputs, buttons, forms
4. Generate POM class với selectors và methods phù hợp
```

### Example 2: Setup POM cho project mới

```
User: Setup Page Object Model structure cho project mới

Assistant:
1. Tạo BasePage class (nếu chưa có)
2. Hỏi user về pages cần tạo
3. Generate từng Page Object theo workflow
```

---

## References

- [base-page-template.md](references/base-page-template.md) - BasePage implementation
- [selector-strategies.md](references/selector-strategies.md) - Selector priority guide
- [pom-patterns.md](references/pom-patterns.md) - Common POM method patterns

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [cuongtl1992](https://github.com/cuongtl1992)
- **Source:** [cuongtl1992/vibe-skills](https://github.com/cuongtl1992/vibe-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-cuongtl1992-vibe-skills-pom-generator
- Seller: https://agentstack.voostack.com/s/cuongtl1992
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.