BDD React Demo with Cucumber.js and Playwright

This project is a demonstration of the integration of Behavior-Driven Development (BDD) practices with a modern React 19 application, utilizing Cucumber.js for BDD testing and Playwright for automated browser testing.

Technologies Used

• React 19: Modern web application framework
• Zustand: State management library for React
• TypeScript: Strongly-typed JavaScript for enhanced developer experience
• Cucumber.js: BDD test automation framework (see for more info)
• Playwright: Browser automation library for end-to-end testing
• TailwindCSS: Utility-first CSS framework for efficient styling

Note on .cts File Extension

This project uses Vite and specifies "type": "module" in the package.json, which enforces ECMAScript module (ESM) behavior by default. To ensure compatibility with CommonJS modules required by tools like Cucumber.js, TypeScript files in the tests directory use the .cts file extension. This explicitly marks them as CommonJS modules, allowing seamless integration with the testing framework.

The Value of BDD and Living Documentation

Behavior-Driven Development bridges the gap between technical and non-technical stakeholders by:

1. Creating a common language: Gherkin syntax (Given-When-Then) provides readable test scenarios that business stakeholders can understand
2. Documenting specifications: Test scenarios serve as living documentation that evolves with the application
3. Validating acceptance criteria: Ensures development meets business requirements
4. Facilitating collaboration: Promotes shared understanding across the entire team

This approach results in:

• Better alignment between business goals and development efforts
• Clearer requirements documentation
• More effective regression testing
• Improved communication between all stakeholders

The Value of TailwindCSS

TailwindCSS provides significant advantages to development teams by:

1. Accelerating UI Development: Utility-first approach eliminates the need to write custom CSS, allowing faster implementation of designs.
2. Maintaining Consistency: Pre-defined design system with constraints for spacing, colors, typography, and more ensures visual consistency.
3. Reducing CSS Complexity:
   • No need to create and maintain complex CSS class naming systems
   • Minimizes CSS specificity issues and selector conflicts
   • Results in smaller bundle sizes through optimized production builds
4. Improving Developer Experience:
   • Write styles directly in your markup without context switching
   • IntelliSense support in modern IDEs provides autocomplete
   • Predictable styling behavior with direct control over every element
5. Supporting Responsive Design: Built-in responsive modifiers (sm:, md:, lg:, etc.) make creating adaptive interfaces straightforward.

This project demonstrates how TailwindCSS integrates with Angular components to create maintainable, consistent UI patterns while reducing style-related technical debt.

Documentation

The following documentation is available to help you get started and understand the project:

1. Quick Start Guide: A step-by-step guide to set up and run the project.
2. Development Guide: Instructions for setting up and running the development environment.
3. Project Structure: Overview of the project's folder and file structure.
4. Live Demo: Information about the live demo of the project.
5. Would You Like to Know More?: Additional articles and tutorials about the methods and technologies used in this project.

Development Environment

Recommended VS Code Extensions

The project includes recommended VS Code extensions for an optimal development experience:

• Tailwind CSS IntelliSense: Smart Tailwind CSS tooling
• npm Intellisense: Autocompletes npm modules in import statements
• Cucumber (Gherkin) Full Support: Official Cucumber extension
• ESLint: JavaScript linting
• EditorConfig: Consistent coding style across editors
• Prettier: Code formatting
• Code Spell Checker: Spell checking for code and docs
• Stylelint: Modern CSS/SCSS linting
• Vitest: Test explorer for Vitest
• Pretty TypeScript Errors: Improves TypeScript error messages
• Browserslist: Browser compatibility highlighting

These extensions are configured in .vscode/extensions.json and will be recommended automatically when opening the project in VS Code.

Code Quality Tools

The project utilizes several tools to maintain code quality:

• ESLint: JavaScript and TypeScript linting
• Prettier: Code formatting
• Stylelint: CSS/SCSS linting
• Husky: Git hooks for pre-commit and pre-push validations
• lint-staged: Run linters on git staged files
• EditorConfig: Consistent editor configuration

The configuration for these tools can be found in their respective configuration files in the project root.