TypeScript Playwright Cucumber Framework

This is a TypeScript-based test automation framework using Playwright and Cucumber for testing the login functionality of https://practicetestautomation.com/practice-test-login/.

Project Structure

├── src/
│   ├── pages/              # Page Object Models
│   ├── step-definitions/   # Step definitions and hooks
│   ├── features/           # Cucumber feature files
│   └── utils/              # Utility classes and world setup
├── config/                 # Configuration files
├── reports/                # Test reports and screenshots
└── dist/                   # Compiled TypeScript files

Test Credentials

• Base URL: https://practicetestautomation.com/practice-test-login/
• Username: student
• Password: Password123

Installation

npm install
npx playwright install

Running Tests

# Run tests in headless mode (recommended)
npm run test:headless

# Run tests in headed mode (browser visible - requires display server)
npm run test:headed

# Run tests with default settings
npm test

# Run tests and generate HTML report
npm run test:report

# Build TypeScript files
npm run build

# Clean reports and dist folders
npm run clean

# Set up required directories
npm run setup

Test Scenarios

The framework includes the following login test scenarios:

1. Successful login with valid credentials
2. Failed login with invalid username
3. Failed login with invalid password
4. Failed login with empty credentials
5. Failed login with empty username
6. Failed login with empty password
7. Successful logout after login

Features

• TypeScript: Full TypeScript support for better code quality
• Page Object Model: Organized page objects for maintainable tests
• Cucumber BDD: Behavior-driven development with Gherkin syntax
• Playwright: Modern browser automation with multiple browser support
• Screenshots: Automatic screenshot capture on test failures
• Reports: HTML and JSON test reports
• Hooks: Setup and teardown for each test scenario

Configuration

• Playwright Config: playwright.config.ts
• Cucumber Config: cucumber.config.js
• TypeScript Config: tsconfig.json