x-bdd-browser

Standardize browser-focused BDD authoring and execution with Playwright and TypeScript steps.

2|Updated Apr 12, 2026
One-click install
npx skills add https://github.com/pure-golang/level85 --skill x-bdd-browser
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: x-bdd-browser
Source: https://github.com/pure-golang/level85/tree/main/.agents/skills/x-bdd-browser
Command: npx skills add https://github.com/pure-golang/level85 --skill x-bdd-browser

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill removes the confusion and inconsistencies in browser-focused BDD by defining how to author, place, and implement Playwright BDD runners for @browser scenarios across monorepos and frontend-only projects.

Core Features & Use Cases

  • Consistent Browser BDD structure: Keeps Gherkin features in the shared features/NN_epic folder while placing Playwright runner code in the correct runner directory.
  • TypeScript step definitions that reflect real UI behavior: Enforces When/Then rules using Playwright actions and assertions against visible outcomes.
  • Proper use of fixtures and page objects: Separates environment/browser context (fixtures) from stable UI operations (pages) without turning page objects into oracles.

Use case: You need to add a new UI flow and its scenarios to a monorepo where product features are shared, and you want only @browser-tagged scenarios to run via Playwright BDD with TypeScript steps, fixtures, and page objects.

Quick Start

Tell the AI: “How should I structure my new browser BDD feature under features/NN_epic and implement matching Playwright TypeScript steps/fixtures/pages for @browser scenarios?”

Frequently Asked Questions about x-bdd-browser

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure Playwright BDD tests in a monorepo with shared Gherkin features?

To structure Playwright BDD in a monorepo, keep Gherkin feature files in a shared features/NN_epic directory while placing the runner code and TypeScript step definitions in a separate runner directory. This enforces separation between shared product features and runner-owned test code.

What is the best way to run specific browser UI scenarios using Playwright and Gherkin?

The best way to run specific browser UI scenarios is to tag targeted Gherkin features with @browser and filter execution by that tag. This approach ensures only scenarios intended for Playwright automation are executed via the browser BDD runner.

How do I organize fixtures and page objects for TypeScript UI automation steps?

Organize fixtures and page objects by separating browser context into fixtures, while placing stable UI operations into page objects. Avoid turning page objects into oracles by keeping them focused on UI interactions rather than asserting complex business logic.

Does Playwright BDD require API mocks for frontend testing assertions?

Playwright BDD does not require API mocks as the default execution path for frontend testing. It enforces UI-visible assertions using Playwright actions to validate real user outcomes directly against the interface without relying on mocked API responses.

Can I generate Playwright tests directly from Gherkin feature files using TypeScript?

Yes, you can generate Playwright tests from Gherkin feature files using the playwright-bdd framework with TypeScript. This process converts your feature files located in the features/NN_epic directory into executable Playwright test scripts.

When should I not use API mocks in my Playwright BDD browser tests?

You should not use API mocks as the default execution path when writing Playwright BDD browser tests. The approach requires enforcing UI-visible assertions to validate actual outcomes, ensuring tests reflect real user behavior rather than bypassing the interface.