🎭 Playwright Automation Framework

📋 Overview

As my first hands-on project with Playwright, this test automation framework implements core E2E testing concepts using TypeScript and Gherkin (BDD). The structure follows professional standards to be scalable and maintainable

✨ Key Features

• ⚡ Blazing Fast E2E Testing: Leverages Playwright's auto-wait, tracing, and parallel execution capabilities.
• 🛡️ Type-Safe Code: Written entirely in TypeScript to reduce runtime errors and improve code maintainability.
• 📖 Behavior-Driven Development (BDD): Uses Gherkin syntax (.feature files) to write human-readable test scenarios, bridging the gap between technical and non-technical stakeholders.
• 🧹 Clean Architecture: Project structure is organized for separation of concerns (locators, page objects, features, steps).
• 📊 Automatic Reporting: Generates detailed HTML test reports with screenshots and videos for failed tests (Playwright's built-in reporter).
• 🔧 Cross-Browser & Mobile: Can be configured to run tests on Chromium, Firefox, WebKit, and simulated mobile devices.
• 🌐 Azure DevOps / GitHub Actions Ready: Includes a base configuration for Continuous Integration (CI).

🛠️ Tech Stack

Technology	Purpose
Playwright	E2E test runner and automation library
TypeScript	Primary programming language
Gherkin (Cucumber)	BDD syntax for writing test scenarios
Node.js	Runtime environment
Git/GitHub	Version control and project hosting

📁 Project Structure

playwright/
├── .features-gen/ # Auto-generated step definitions from .feature files
│ └── tests/features/
├── .idea/ # IntelliJ/WebStorm project settings
├── .vscode/ # VS Code workspace settings
├── env/ # Environment configuration files (.env.staging, etc.)
├── tests/ # Main test folder
│ ├── features/ # Gherkin feature files (.feature)
│ │ ├── changeName.feature
│ │ └── ecomlogin.feature
│ ├── steps/ # Step definitions mapping Gherkin to Playwright actions
│ │ ├── changeNamesteps.js
│ │ └── ecomloginsteps.js
│ └── fixtures/ # Custom Playwright fixtures
│ ├── fixtures.js
│ └── pages.js
├── .gitignore # Files ignored by Git
├── package.json # Project metadata and scripts
├── package-lock.json # Dependency lockfile
└── playwright.config.js # Central Playwright configuration

💡 Key Best Practices Applied

• Page Object Model (POM)
• Web-First Assertions:
• TypeScript

📦 Installation

Prerequisites

1. Node.js (v18 or higher) Download from Node.js official website

2. Git (for cloning the repository) Download from Git official website

Quick Start

# Clone the repository
git clone https://github.com/yourusername/playwright.git
cd playwright

# Install dependencies
npm install

# Install Playwright browsers
npx playwright install

# Generate feature files from existing tests (optional)
npm run bddgen

# Run tests with HTML reporter
npm test

# View test report
npm run report