Use when configuring Playwright BDD projects, setting up defineBddConfig(), configuring feature and step file paths, and integrating with Playwright config.
View on GitHubTheBushidoCollective/han
playwright-bdd
February 3, 2026
Select agents to install to:
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-configurationInstallation paths:
.claude/skills/playwright-bdd-configuration/# 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