playwright-cucumber-e2e-steps-generator

Playwright Cucumber Steps Generator

Generate TypeScript step definitions and Page Object classes from Cucumber feature files for Playwright E2E testing.

Workflow Overview

1. Parse feature file → Extract scenarios and steps
2. Check existing implementations → Identify which steps need implementation
3. Determine selector strategy → Ask user: auto-detect via MCP or manual input
4. Generate Page Object → Create/update POM class with selectors and methods
5. Generate step definitions → Create step file with Given/When/Then implementations

Step 1: Parse Feature File

Read the provided .feature file and extract:

• Feature name and description
• Background steps (if any)
• All scenarios with their steps
• Step parameters (quoted strings, numbers, data tables)

// Example parsed structure
interface ParsedFeature {
  featureName: string;
  scenarios: Array<{
    name: string;
    steps: Array<{
      keyword: 'Given' | 'When' | 'Then' | 'And' | 'But';
      text: string;
      params: string[];
    }>;
  }>;
}

Step 2: Check Existing Implementations

Before generating, scan src/step_definitions/web/ for existing step patterns:

grep -r "Given\|When\|Then" src/step_definitions/web/*.ts

Report to user:

• ✅ Steps already implemented (skip these)
• ⚠️ Steps needing implementation (generate these)

Step 3: Selector Strategy Decision

Always ask user before proceeding:

Để implement các steps này, tôi cần selectors cho các elements trên trang. Bạn muốn tôi:

1. Tự động lấy - Sử dụng Playwright MCP để đọc page và tìm selectors
2. Bạn cung cấp - Bạn sẽ cho tôi selectors cho từng element

Chọn option nào?

Option 1: Auto-detect via MCP

Use read_page or find tools from Playwright MCP:

// Use find tool to locate elements
find({ query: "login button", tabId: <tabId> })
find({ query: "username input field", tabId: <tabId> })

Option 2: Manual Input

Ask user for each element needed: