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
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 as aistep, Then } from "./fixtures";
// Generic step that handles any natural language action
aistep(/^(.*)$/, async ({ page }, action: string) => {
await auto(action, { page });
});
Next Steps