Back to Skills

playwright-bdd-configuration

verified

Use when configuring Playwright BDD projects, setting up defineBddConfig(), configuring feature and step file paths, and integrating with Playwright config.

View on GitHub

Marketplace

han

TheBushidoCollective/han

Plugin

playwright-bdd

Tool

Repository

TheBushidoCollective/han
74stars

tools/playwright-bdd/skills/playwright-bdd-configuration/SKILL.md

Last Verified

February 3, 2026

Install Skill

Select agents to install to:

Scope:
npx add-skill https://github.com/TheBushidoCollective/han/blob/main/tools/playwright-bdd/skills/playwright-bdd-configuration/SKILL.md -a claude-code --skill playwright-bdd-configuration

Installation paths:

Claude
.claude/skills/playwright-bdd-configuration/
Powered by add-skill CLI

Instructions

# Playwright BDD Configuration

Expert knowledge of Playwright BDD configuration, project setup, and integration with Playwright's testing framework for behavior-driven development.

## Overview

Playwright BDD enables running Gherkin-syntax BDD tests with Playwright Test. Configuration is done through the `playwright.config.ts` file using the `defineBddConfig()` function, which generates Playwright test files from your `.feature` files.

## Installation

```bash
# Install playwright-bdd
npm install -D playwright-bdd

# Or with specific Playwright version
npm install -D playwright-bdd @playwright/test
```

## Basic Configuration

### Minimal Setup

```typescript
// playwright.config.ts
import { defineConfig } from '@playwright/test';
import { defineBddConfig } from 'playwright-bdd';

const testDir = defineBddConfig({
  features: 'features/**/*.feature',
  steps: 'steps/**/*.ts',
});

export default defineConfig({
  testDir,
});
```

### Generated Test Directory

The `defineBddConfig()` function returns a path to the generated test directory. By default, this is `.features-gen` in your project root:

```typescript
const testDir = defineBddConfig({
  features: 'features/**/*.feature',
  steps: 'steps/**/*.ts',
});

// testDir = '.features-gen/features'
```

### Custom Output Directory

```typescript
const testDir = defineBddConfig({
  features: 'features/**/*.feature',
  steps: 'steps/**/*.ts',
  outputDir: '.generated-tests', // Custom output directory
});
```

## Configuration Options

### Feature Files

Configure where to find feature files:

```typescript
defineBddConfig({
  // Single pattern
  features: 'features/**/*.feature',

  // Multiple patterns
  features: [
    'features/**/*.feature',
    'specs/**/*.feature',
  ],

  // Exclude patterns
  features: {
    include: 'features/**/*.feature',
    exclude: 'features/**/skip-*.feature',
  },
});
```

### Step Definitions

Configure step definition locations:

```typescript
defineBddConfig({
  // Single pattern

Validation Details

Front Matter
Required Fields
Valid Name Format
Valid Description
Has Sections
Allowed Tools
Instruction Length:
9353 chars