Web Application Test Framework

A modern testing framework built with Playwright for end-to-end testing of web applications with comprehensive reporting capabilities.

🚀 Key Features

• Visual Testing - Screenshot comparison and visual regression testing
• API Testing - RESTful API endpoint testing with validation
• Mobile Testing - Responsive design and mobile device simulation
• Parallel Execution - Run tests concurrently for faster feedback
• Rich Reporting - HTML, JSON, and JUnit reports
• CI/CD Integration - GitHub Actions workflow included

🛠 Technologies

• Playwright - Modern web testing framework
• TypeScript - Type-safe test development
• Node.js - Runtime environment
• HTML Reports - Beautiful test result visualization
• GitHub Actions - Automated testing pipeline
• Postman - API testing collection

📋 Prerequisites

• Node.js 18+ installed
• npm or yarn package manager

🔧 Setup Instructions

1. Clone the repository

   git clone <repository-url>
   cd webapp-testing-project

2. Install dependencies

   npm install

3. Install Playwright browsers

   npm run install:browsers

4. Configure environment (optional)

   cp .env.example .env
   # Edit .env file with your specific settings

🎯 Running Tests

All Tests

npm test

Specific Test Categories

# Visual tests
npm run test:visual

# API tests
npm run test:api

# Mobile tests
npm run test:mobile

Interactive Mode

# Run tests with UI mode
npm run test:ui

# Run tests in headed mode (see browser)
npm run test:headed

# Debug mode
npm run test:debug

View Reports

npm run test:report

📁 Project Structure

webapp-testing-project/
├── tests/
│   ├── visual/           # Visual regression tests
│   ├── api/             # API endpoint tests
│   ├── mobile/          # Mobile responsive tests
│   └── example.spec.ts  # Getting started examples
├── postman/             # Postman collection
├── .github/workflows/   # CI/CD pipeline
├── playwright.config.ts # Playwright configuration
└── package.json        # Dependencies and scripts

🧪 Test Examples

Visual Testing

test("should match homepage screenshot", async ({ page }) => {
  await page.goto("/");
  await expect(page).toHaveScreenshot("homepage.png");
});

API Testing

test("should get all posts", async ({ request }) => {
  const response = await request.get("${API_BASE_URL}/posts");
  expect(response.status()).toBe(200);
});

Mobile Testing

test("should work on iPhone 12", async ({ browser }) => {
  const context = await browser.newContext({
    ...devices["iPhone 12"],
  });
  const page = await context.newPage();
  await page.goto("/");
});

🔄 CI/CD Integration

The project includes a GitHub Actions workflow that:

• Runs on push/PR to main branch
• Installs dependencies and browsers
• Executes all tests in parallel
• Uploads test reports as artifacts
• Supports multiple browsers (Chromium, Firefox, WebKit)

📊 Postman Collection

Import the Postman collection from postman/JSONPlaceholder-API-Tests.postman_collection.json to test API endpoints manually or integrate with Postman's CLI runner.

🎨 Customization

Adding New Tests

1. Create test files in appropriate directories (tests/visual/, tests/api/, tests/mobile/)
2. Follow existing naming convention: *.spec.ts
3. Use Playwright's testing patterns and assertions

Configuration

• Modify playwright.config.ts for global settings
• Update browser configurations, timeouts, and reporters
• Add new test projects for different environments

Environment Variables

• BASE_URL - Target application URL
• API_BASE_URL - API endpoint base URL
• HEADLESS - Run browsers in headless mode
• SLOW_MO - Add delay between actions for debugging

📚 Learning Resources

• Playwright Documentation
• Playwright Test Best Practices
• Visual Testing Guide
• API Testing with Playwright

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Add tests for new functionality
4. Ensure all tests pass
5. Submit a pull request

📝 License

MIT License - feel free to use this project for learning and development purposes.

---

Happy Testing! 🎭