Add Playwright TypeScript test automation framework

Author: reevee-codes

README.md

@@ -143,3 +143,29 @@ mvn test -DbaseUrl=https://staging.ultimateqa.com -Dbrowser=firefox -Dheadless=t
 2. Add appropriate unit tests
 3. Update documentation
 4. Follow code style guidelines
+
+## �� Running Tests
+
+Now you can run the tests in several ways:
+
+1. Run all tests in headless mode:
+```bash
+npm test
+```
+
+2. Run tests in headed mode (browser visible):
+```bash
+npm run test:headed
+```
+
+3. Run tests with Playwright UI mode (interactive):
+```bash
+npm run test:ui
+```
+
+4. Run tests in debug mode:
+```bash
+npm run test:debug
+```
+
+Let's try running the tests in headed mode so you can see what's happening:

package.json

@@ -0,0 +1,15 @@
+{
+  "devDependencies": {
+    "@cucumber/cucumber": "^11.2.0",
+    "@playwright/test": "^1.50.1",
+    "@types/node": "^22.13.9",
+    "@typescript-eslint/eslint-plugin": "^8.26.0",
+    "@typescript-eslint/parser": "^8.26.0",
+    "cucumber-html-reporter": "^7.2.0",
+    "dotenv": "^16.4.7",
+    "eslint": "^9.21.0",
+    "prettier": "^3.5.3",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.8.2"
+  }
+}

playwright-typescript/.gitignore

@@ -0,0 +1,42 @@
+# Playwright TypeScript specific
+playwright-report/
+test-results/
+playwright/.cache/
+/playwright/.auth/
+
+# TypeScript
+dist/
+*.tsbuildinfo
+
+# Node
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Environment variables
+.env
+.env.local
+.env.*.local
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# Testing
+/coverage
+/screenshots
+/videos
+/traces
+
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Operating System
+.DS_Store
+Thumbs.db 

playwright-typescript/README.md

@@ -0,0 +1,182 @@
+# Playwright TypeScript UI Testing Framework
+
+A modern UI testing framework built with Playwright and TypeScript, implementing the Page Object Model with a three-layer architecture.
+
+## 🎯 Key Features
+
+- ✅ Three-layer Page Object Model (Components/Functions/State)
+- ✅ Strong TypeScript typing
+- ✅ Parallel test execution
+- ✅ Automatic screenshot capture on failure
+- ✅ Environment-based configuration
+- ✅ HTML and JSON reporting
+
+## 🏗 Architecture
+
+### Three-Layer Approach
+
+1. **Component Layer** (`src/components/`)
+   - Element locators
+   - Basic element interactions
+   - Example: `ComplicatedPageComponent.ts`
+
+2. **Functions Layer** (`src/functions/`)
+   - Business-level actions
+   - Complex interactions
+   - Example: `ComplicatedPageFunctions.ts`
+
+3. **State Layer** (`src/state/`)
+   - Test assertions
+   - State verification
+   - Example: `ComplicatedPageState.ts`
+
+### Core Components
+
+- `BasePage` - Base class with common page interactions
+- `TestContext` - Singleton for managing test state
+- `Configuration` - Environment configuration management
+
+## 🚀 Getting Started
+
+### Prerequisites
+
+- Node.js 14 or higher
+- npm/yarn
+- Git
+
+### Installation
+
+1. Clone the repository:
+   ```bash
+   git clone <repository-url>
+   cd playwright-typescript
+   ```
+
+2. Install dependencies:
+   ```bash
+   npm install
+   ```
+
+3. Set up environment:
+   ```bash
+   # Copy environment template
+   cp .env.template .env
+   
+   # Edit .env with your settings
+   ```
+
+### Running Tests
+
+```bash
+# Run all tests
+npm test
+
+# Run in headed mode (browser visible)
+npm run test:headed
+
+# Run with UI mode
+npm run test:ui
+
+# Run specific test file
+npx playwright test tests/complicated-page.spec.ts
+```
+
+## 📁 Project Structure
+
+```
+playwright-typescript/
+├── src/
+│   ├── components/    # Element locators & basic interactions
+│   │   └── ComplicatedPageComponent.ts
+│   ├── functions/     # Business logic & complex actions
+│   │   └── ComplicatedPageFunctions.ts
+│   ├── state/        # Assertions & state verification
+│   │   └── ComplicatedPageState.ts
+│   ├── core/         # Framework core
+│   │   ├── BasePage.ts
+│   │   └── TestContext.ts
+│   └── config/       # Configuration management
+│       └── Configuration.ts
+├── tests/            # Test specifications
+│   └── complicated-page.spec.ts
+├── playwright.config.ts
+└── package.json
+```
+
+## ⚙️ Configuration
+
+Configuration can be managed through:
+1. `.env` file (recommended for local development)
+2. Environment variables
+3. Command line parameters
+
+Example `.env`:
+```env
+BASE_URL=https://ultimateqa.com/complicated-page
+BROWSER=chromium
+HEADLESS=true
+DEFAULT_TIMEOUT=30000
+```
+
+## 🔍 Test Examples
+
+### Button Visibility Test
+```typescript
+test('verify button is visible on complicated page', async () => {
+  await complicatedPageState.assertButtonIsVisible();
+});
+```
+
+### Button Color Change Test
+```typescript
+test('verify button changes color on hover', async () => {
+  await complicatedPageState.assertButtonChangesColorOnHover();
+});
+```
+
+## 📝 Development Guidelines
+
+1. **Adding New Tests**
+   - Create component class for element interactions
+   - Create functions class for business logic
+   - Create state class for assertions
+   - Add test file in `tests/` directory
+
+2. **Code Style**
+   - Use TypeScript types
+   - Follow existing patterns
+   - Add JSDoc comments for functions
+
+3. **Best Practices**
+   - Keep components focused and small
+   - Use meaningful names
+   - Write self-documenting code
+   - Add appropriate error handling
+
+## 🐛 Debugging
+
+1. Run in headed mode:
+   ```bash
+   npm run test:headed
+   ```
+
+2. Use UI mode for interactive debugging:
+   ```bash
+   npm run test:ui
+   ```
+
+3. Check generated reports in:
+   - `playwright-report/` - HTML reports
+   - `test-results/` - Test artifacts
+
+## 🤝 Contributing
+
+1. Create feature branch
+2. Make changes
+3. Add/update tests
+4. Update documentation
+5. Submit pull request
+
+## 📄 License
+
+This project is licensed under the MIT License. 

playwright-typescript/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "playwright-typescript",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "playwright test",
+    "test:headed": "playwright test --headed",
+    "test:ui": "playwright test --ui",
+    "test:debug": "playwright test --debug",
+    "report": "playwright show-report"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@playwright/test": "^1.42.1",
+    "@types/node": "^20.11.24",
+    "typescript": "^5.3.3",
+    "dotenv": "^16.4.5"
+  }
+}

playwright-typescript/playwright.config.ts

@@ -0,0 +1,50 @@
+import { PlaywrightTestConfig, devices } from '@playwright/test';
+import dotenv from 'dotenv';
+
+dotenv.config();
+
+const config: PlaywrightTestConfig = {
+  testDir: './tests',
+  timeout: 30000,
+  expect: {
+    timeout: 5000
+  },
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: [
+    ['html'],
+    ['json', { outputFile: 'test-results/test-results.json' }]
+  ],
+  use: {
+    actionTimeout: 0,
+    baseURL: process.env.BASE_URL || 'http://localhost:3000',
+    trace: 'on-first-retry',
+    video: 'on-first-retry',
+    screenshot: 'only-on-failure'
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome']
+      }
+    },
+    {
+      name: 'firefox',
+      use: {
+        ...devices['Desktop Firefox']
+      }
+    },
+    {
+      name: 'webkit',
+      use: {
+        ...devices['Desktop Safari']
+      }
+    }
+  ],
+  outputDir: 'test-results/'
+};
+
+export default config; 

playwright-typescript/src/components/ComplicatedPageComponent.ts

@@ -0,0 +1,24 @@
+import { Page } from '@playwright/test';
+import { BasePage } from '../core/BasePage';
+
+export class ComplicatedPageComponent extends BasePage {
+  // Locators for Complicated Page elements
+  private readonly firstButton = "//a[@class='et_pb_button et_pb_button_0 et_pb_bg_layout_light']";
+
+  constructor(page: Page) {
+    super(page);
+  }
+
+  async isButtonVisible(): Promise<boolean> {
+    return await this.isVisible(this.firstButton);
+  }
+
+  async hoverOverButton(): Promise<void> {
+    await this.page.hover(this.firstButton);
+  }
+
+  async getButtonColor(): Promise<string> {
+    const button = await this.page.locator(this.firstButton);
+    return await button.evaluate((el) => window.getComputedStyle(el).color);
+  }
+}