​
BDD Mode with Playwright-BDD

Auto-Browse seamlessly integrates with playwright-bdd to enable behavior-driven development. This integration allows you to write expressive feature files and implement steps using natural language commands.

​
Setup

​
⚠️ Important: Playwright Version Requirements

When using Auto Browse with playwright-bdd, you must use specific Playwright versions for compatibility:

"@playwright/test": "1.52.0-alpha-1743011787000"
"playwright": "1.52.0-alpha-1743011787000"

To handle version conflicts:

  1. Remove any existing Playwright installations
  2. Clear npm cache if needed: npm cache clean --force
  3. Install dependencies with the legacy flag:
npm install --legacy-peer-deps

🔄 Future releases will support a wider range of Playwright versions.

​
Installation

  1. Install required dependencies:
npm install playwright-bdd
  1. Configure playwright.config.ts:
import { PlaywrightTestConfig } from "@playwright/test";

const config: PlaywrightTestConfig = {
	testDir: "./features",
	use: {
		baseURL: "https://playwright.dev"
	}
};

export default config;

​
Writing Tests

​
Feature Files

Create Gherkin feature files to describe your test scenarios:

# features/homepage.feature
Feature: Playwright Home Page

  Scenario: Check title
    Given navigate to https://playwright.dev
    When click link "Get started"
    Then assert title "Installation"

​
Step Definitions

Implement your steps using Auto-Browse’s natural language commands: Note, you only need one step definition for the When step, as it will handle all actions. (It can be when, given or then either of one step)

import { auto } from "@auto-browse/auto-browse";
import { Given, When as aistep, Then } from "./fixtures";

// Generic step that handles any natural language action
aistep(/^(.*)$/, async ({ page }, action: string) => {
	await auto(action, { page });
});

​
Example Implementation

Here’s a complete example showing how to test a login flow:

​
Feature File

# features/login.feature
Feature: User Login

  Scenario: Successful login
    Given navigate to the login page
    When enter "user@example.com" in email field
    And enter "password123" in password field
    And click the login button
    Then verify dashboard is visible
    And check welcome message contains "Hello, User"

​
Step Definitions

import { auto } from "@auto-browse/auto-browse";
import { Given, When aistep, Then } from "./fixtures";

// Generic step that handles any natural language action
aistep(/^(.*)$/, async ({ page }, action: string) => {
	await auto(action, { page });
});


## Next Steps

- Learn about [Standalone Mode](/usage/standalone-mode)
- Explore [Test Mode](/usage/playwright-test-mode)
- Check out [Supported Actions](/actions/clicking)