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:
- Remove any existing Playwright installations
- Clear npm cache if needed:
npm cache clean --force
- Install dependencies with the legacy flag:
npm install --legacy-peer-deps
🔄 Future releases will support a wider range of Playwright versions.
Installation
- Install required dependencies:
npm install playwright-bdd
- 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)