A robust Web Application Automation framework using Playwright, BDD, POM (Page Object Model), and JavaScript for automated testing with ExtentReports integration for professional HTML reporting.

• BDD (Behavior Driven Development) approach using Cucumber and Playwright.
• POM (Page Object Model) design pattern for test maintenance and reusability.
• Automated Web Application Testing using Playwright.
• ExtentReports Integration for beautiful and detailed HTML reports.
• Parallel Test Execution and Cross-Browser Testing capabilities.
• Screenshots and Video Capturing on test failure.
• Customizable Configurations with config.js and playwright.config.js.

• JavaScript (Node.js)
• Playwright for end-to-end testing
• BDD with Cucumber
• Page Object Model (POM)
• ExtentReports for reporting
• NPM for package management

Before running the project, make sure you have the following installed:

• Node.js (v14 or later)

• npm (Node package manager)

• Playwright (v1.20 or later)

• Cucumber for BDD

Here’s the basic structure of the project:

.
├── config.js                  # Configuration for Playwright and testing
├── features/                   # BDD feature files (Cucumber)
│   ├── login.feature           # Example feature file
│   ├── leave.feature
│   ├── hooks.js                # Cucumber hooks for setup/teardown
│   ├── pages/                  # Page Object Model files
│   └── steps/                  # Step definitions for the features
├── reports/                    # Reports and screenshots
│   └── extent-report/
│       └── index.html          # HTML report generated by ExtentReports
├── cucumber.js                 # Cucumber configuration
├── playwright.config.js         # Playwright configuration
└── package.json                # NPM dependencies and scripts

git clone https://github.com/mookto/Playwright-web-automation-BDD-framework.git
cd Playwright-BDD-POM-Web-Application-Automation

npm install

npx playwright install

###🏃‍♂️ Running the Tests

npx cucumber-js
npx cucumber-js features/login.feature
npx cucumber-js --tags "@smoke"
npx cucumber-js --format json:reports/cucumber-report.json
npm run test:report

• ExtentReports will generate a detailed HTML report, including:
  • Test pass/fail status
  • Screenshots and videos for failed tests
  • Detailed logs for each test step
• Screenshots and Videos: Playwright will automatically capture screenshots and videos of failed tests. These are stored in the reports/screenshots/ and reports/videos/ directories.

We welcome contributions! To contribute to this repository:

• Fork the repository.
• Create a feature/bugfix branch.
• Commit your changes with descriptive commit messages.
• Submit a Pull Request for review.