Playwright, Javascript & Cucumber BDD Automation

Overview

This project provides a complete automation framework using Playwright for browser automation and Cucumber for Behavior-Driven Development (BDD). It generates advanced HTML reports for test results. No prior experience is required—just follow the steps below!

Tech Stack

• Playwright: Automates browsers for testing web applications.
• JavaScript: Main programming language.
• Cucumber BDD: Allows writing tests in plain English using Gherkin syntax.
• Multiple Cucumber HTML Reporter: Creates detailed HTML reports from test results.

Folder Structure

c:\Automation
│
├── tests
│   ├── features          # .feature files (test scenarios in plain English)
│   ├── stepDefinition    # Step definitions (JavaScript code for each step)
│   └── support           # World/hooks/helpers (shared logic)
├── package.json          # Project dependencies and scripts
├── cucumber.js           # Cucumber configuration
├── playwright.config.js  # Playwright configuration
├── report.js             # HTML report generator script
└── README.md             # This guide

Prerequisites

• Node.js: Download and install from nodejs.org. Use the LTS version for best compatibility.
• Git (optional): For cloning the repository.

Setup Instructions

1. Clone the repository (if you haven't already):

   git clone <your-repo-url>
   cd Automation

2. Install all dependencies:

   npm install

3. (Optional) If you see a missing module error for a reporter, install it:

   npm install multiple-cucumber-html-reporter --save-dev

How to Run Tests

1. Run all tests and generate JSON + HTML report:

   npm test

   • This runs all Cucumber tests and generates an advanced HTML report in reports/multiple_cucumber_report.
2. View the report:
   • Open reports/multiple_cucumber_report/index.html in your browser to see the results.

Writing and Organizing Tests

• Feature files: Write scenarios in plain English in tests/features/*.feature.
• Step definitions: Implement each step in JavaScript in tests/stepDefinition/*.js.
• Support files: Add shared logic, hooks, or custom world objects in tests/support/.
• Best Practice: Use only Given, When, Then in step definitions (not And).

Reporting

• After tests, the report.js script uses multiple-cucumber-html-reporter to create a detailed HTML report from the JSON output.
• Find your report at: reports/multiple_cucumber_report/index.html

Troubleshooting

• Module not found error: Run npm install to ensure all dependencies are installed.
• Node version warning: Use a recommended LTS version of Node.js.
• Playwright browser issues: If browsers are missing, run:

  npx playwright install

• Permission errors: Run your terminal as administrator.

FAQ

Q: How do I add a new test? A: Create a new .feature file in tests/features/ and a matching step definition in tests/stepDefinition/.

Q: How do I update dependencies? A: Run npm update.

Q: Where do I find test results? A: Open reports/multiple_cucumber_report/index.html after running tests.

Q: Can I run a single feature file? A: Yes. Use:

npx cucumber-js tests/features/<your-feature>.feature

Need Help?

• Check the official docs:
  • Playwright
  • Cucumber.js
  • Multiple Cucumber HTML Reporter
• Or ask your team for support!

---

This guide is designed for beginners. Just follow the steps and you'll be able to run and report automated tests easily!