Playwright-Cucumber-BDD Framework

This project is a Behavior-Driven Development (BDD) framework that integrates Playwright with Cucumber.js. It allows you to write end-to-end tests in Gherkin syntax and execute them using Playwright's powerful browser automation capabilities.

---

Project Structure

The project is organized as follows:

playwright-bdd-framework/
├── src/
│   ├── test/
│   │   ├── features/                # Gherkin feature files
│   │   │   └── login.feature        # Example feature file
│   │   ├── step-definitions/        # Step definitions for Gherkin steps
│   │   │   └── loginSteps.js        # Step definitions for login feature
│   │   ├── utils/                   # Utility functions
│   │   │   └── manageStepsDefinitions.js # Helper functions for step definitions
│   ├── support/
│   │   ├── hooks.js                 # Cucumber hooks (e.g., Before, After)
│   │   ├── world.js                 # CustomWorld for shared test context
│   │   └── report_chart.js          # HTML report generation script
├── reports/                         # Test reports (ignored by Git)
│   ├── cucumber_report.json         # JSON report generated by Cucumber.js
│   ├── html-report/                 # HTML report generated by multiple-cucumber-html-reporter
├── config.json                      # Custom configuration for environments and settings
├── package.json                     # Project dependencies and scripts
├── .gitignore                       # Ignored files and folders

---

How to Run the Project

Prerequisites

• Node.js (v16 or later)
• npm (comes with Node.js)
• Playwright (installed via npm)

Installation

1. Clone the repository:

   git clone <repository-url>
   cd playwright-bdd-framework

2. Install dependencies:

   npm install

3. Install Playwright browsers:

   npx playwright install

Running Tests

1. Run all tests:

   npm test

2. Run tests with specific tags:

   TAGS="@smoke" npm test

3. Debug a specific feature file:

   npm run debug

4. Generate an HTML report: After running tests, the HTML report will be automatically generated in the reports/html-report folder. Open index.html in your browser to view the report.

---

Code Conventions

General Guidelines

• Use ESLint for consistent code formatting.
• Follow JavaScript best practices for readability and maintainability.

Step Definitions

• Use async/await for all asynchronous operations.
• Wrap critical steps in try-catch blocks to handle errors gracefully.
• Use this.config to access shared configuration values.

Example:

Given('I navigate to url {word}', async function (url) {
  const targetUrl = await go_to_url(url, this.config);
  await this.page.goto(targetUrl, { waitUntil: 'load' });
});

Hooks

• Use Before and After hooks to set up and tear down the browser context.
• Take screenshots for failed scenarios in the After hook.

Example:

After(async function (scenario) {
  if (scenario.result?.status === 'FAILED') {
    const screenshotPath = `reports/screenshots/${scenario.pickle.name.replace(/[^a-zA-Z0-9]/g, '_')}.png`;
    await this.page.screenshot({ path: screenshotPath });
    console.log(`Screenshot saved at: ${screenshotPath}`);
  }
  await this.closeBrowser();
});

Configuration

• Store environment-specific settings in config.json or playwright.config.ts.
• Use this.config in step definitions to dynamically fetch configuration values.

---

Key Features

1. Gherkin Syntax:

   • Write tests in plain English using .feature files.
   • Example:

     Feature: Login functionality
     
       Scenario: Verify login with valid credentials
         Given I navigate to url "login"
         Then I verify title this page is "Dashboard"

2. Playwright Integration:

   • Automate browsers like Chromium, Firefox, and WebKit.
   • Use Playwright's powerful API for browser interactions.

3. HTML Reporting:

   • Automatically generate detailed HTML reports after test execution.

4. Environment-Specific Configurations:

   • Manage multiple environments (e.g., QA, Staging, Production) using config.json.

---

Troubleshooting

1. No Scenarios Found:

   • Ensure the tags in config.json or the TAGS environment variable match the tags in your .feature files.

2. HTML Report Not Generated:

   • Verify that the cucumber_report.json file is generated in the reports folder.
   • Ensure the posttest script in package.json is correctly configured.

3. Browser Not Launching:

   • Ensure Playwright browsers are installed:

     npx playwright install