playwright-demo-typescript

Comprehensive Playwright test automation suite for the Icon Generator application.

Overview

This is a comprehensive test automation suite for the Icon Generator application using Playwright. The suite covers desktop and mobile browsers with extensive test coverage for functionality, configuration, responsiveness, and edge cases.

Application Under Test: https://engineer-coding-challenge-frontend.vercel.app/

Architecture

Page Object Model (POM)

The test suite implements the Page Object Model pattern for maintainability and scalability:

IconGeneratorPage Class

File: tests/pages/IconGeneratorPage.ts

The IconGeneratorPage class encapsulates all interactions with the Icon Generator application:

Navigation & Setup:

• goto() - Navigate to the application
• setViewportSize(width, height) - Set viewport for responsive testing
• wait(timeout) - Wait for specified duration

Prompt Input Methods:

• fillPrompt(text) - Fill the prompt input field
• getPromptValue() - Get current prompt input value
• clearPrompt() - Clear the prompt input
• focusPrompt() - Focus on the prompt input
• isPromptInputVisible() - Check if prompt is visible
• waitForPromptInput(timeout) - Wait for prompt to be visible

Generate Button Methods:

• clickGenerateButton() - Click the generate button
• isGenerateButtonVisible() - Check if button is visible
• waitForGenerateButton(timeout) - Wait for button to be visible

Icon Methods:

• generateIcons(prompt) - Generate icons with given prompt
• getIconCount() - Get count of generated icons

Utility Methods:

• getPageTitle() - Get page title
• getPage() - Access underlying Playwright page object

Usage Example:

import { test } from '../fixtures/fixture';

test('example test', async ({ page }) => {
  const iconGeneratorPage = new IconGeneratorPage(page);
  await iconGeneratorPage.goto();
  await iconGeneratorPage.fillPrompt('car');
  await iconGeneratorPage.clickGenerateButton();
  const count = await iconGeneratorPage.getIconCount();
  expect(count).toBeGreaterThan(0);
});

Test Fixtures & Utilities

Custom test fixtures and utilities for enhanced test capabilities:

• fixture.ts - Custom Playwright test fixtures

  • iconGeneratorPage - Pre-initialized page object instance
  • testLogger - Structured logging utility
  • debugHelper - Debugging and diagnostic utilities
  • assertions - Domain-specific custom assertions

• TestHelpers.ts - Reusable test utilities

  • TestLogger - Structured logging with timestamps (info, warn, error, success)
  • DebugHelper - Debugging utilities (screenshots, page HTML, network activity, element inspection)
  • IconGeneratorAssertions - Custom assertions for icon generation validation

Using Fixtures in Tests

import { test } from '../fixtures/fixture';

test('using fixtures', async ({ iconGeneratorPage, testLogger, debugHelper, assertions }) => {
  testLogger.info('Starting icon generation test');
  
  await iconGeneratorPage.goto();
  await iconGeneratorPage.fillPrompt('smile');
  await iconGeneratorPage.clickGenerateButton();
  
  const count = await iconGeneratorPage.getIconCount();
  testLogger.success(`Generated ${count} icons`);
  
  await debugHelper.takeScreenshot('icon-generation-result');
});

Test Configuration

• playwright.config.ts - Playwright configuration with multi-browser setup

Test Coverage

Icon Generator Tests (icon-generator.spec.ts)

Comprehensive test suite for the Icon Generator application covering:

• ✅ Icon Generation - Generate icons from various prompts
• ✅ Style Application - Apply different style configurations
• ✅ Color Customization - Apply color changes via color picker
• ✅ User Interactions - Handle user input and interactions
• ✅ UI Element Visibility - Verify all UI elements are visible
• ✅ Accessibility - Verify accessibility features
• ✅ Responsive Behavior - Test across different viewports

Test Metrics

• Test File: 1 spec file (icon-generator.spec.ts)
• Browsers Covered: 3 (Chrome, Firefox, WebKit)
• Test Status: Active and maintained

Project Structure

playwright-demo-typescript/
├── tests/
│   ├── specs/
│   │   └── icon-generator.spec.ts          # Main test suite
│   ├── pages/
│   │   └── IconGeneratorPage.ts            # Page Object Model
│   ├── fixtures/
│   │   └── fixture.ts                      # Custom Playwright fixtures
│   └── utils/
│       └── TestHelpers.ts                  # Test utilities & helpers
├── playwright.config.ts                    # Playwright configuration
├── tsconfig.json                           # TypeScript configuration
├── package.json                            # Dependencies & scripts
└── README.md                               # This file

Setup & Installation

Prerequisites

• Node.js (v14+)
• npm or yarn

Installation Steps

1. Install dependencies:

npm install

2. Install Playwright browsers:

npx playwright install

3. Build TypeScript (optional):

npm run build

Running Tests

Run All Tests

npm test

Run Specific Test File

npm test -- tests/specs/icon-generator.spec.ts

Run Tests in Specific Browser(s)

# Desktop browsers only
npm run test:desktop

# Mobile browsers only
npm run test:mobile

# Chrome only
npm test -- --project=chrome

Run Tests in Debug Mode

# Interactive debug mode with trace viewer
npm run test:debug

# UI mode (recommended for local development)
npm run test:ui

# Headed mode (with visible browser)
npx playwright test --headed

# Headed mode (with visible browser) - legacy
npm run test:headed

View Test Reports

npm run test:report

Configuration

Playwright Configuration (playwright.config.ts)

• Test Directory: tests/specs
• Timeout: Default 30s per test
• Retries: 0 (in dev), 2 (in CI)
• Parallel Workers: Automatic (development), 1 (CI)

Browser & Device Coverage

• Desktop: Chrome, Firefox, WebKit (Safari)
• Mobile: Pixel 5 (Android), iPhone 12 (iOS)

Artifacts Collection

• Screenshots: On test failure
• Videos: On test failure
• Traces: On first retry

Test Automation Strategy

1. Stability & Reliability

Strategies Implemented:

• Flexible selectors using attribute patterns for robustness
• Explicit waits with configurable timeouts
• Retry logic with exponential backoff for flaky operations
• Proper error handling and recovery mechanisms
• Comprehensive logging for failure diagnosis

Example:

// Flexible selectors that work across implementations
class IconGeneratorPage {
  readonly promptInput: Locator = this.page.locator(
          'input[placeholder*="prompt" i], textarea[placeholder*="prompt" i]'
  );
}

2. Code Structure & Maintainability

Best Practices:

• Page Object Model: Encapsulate UI interactions
• Custom Fixtures: Inject dependencies automatically
• Helper Functions: Reusable test utilities
• Configuration Management: Centralized constants
• Consistent Naming: Clear test and method names
• Documentation: Comprehensive comments and JSDoc

Example:

test('should generate exactly 8 icons from a simple prompt', async ({
  iconGeneratorPage,
  testLogger,
  assertions,
}) => {
  testLogger.step(1, 'Enter simple prompt');
  await iconGeneratorPage.generateIcons(prompt);
  
  testLogger.step(2, 'Verify exactly 8 icons were generated');
  await assertions.expectEightIconsGenerated(iconGeneratorPage.iconItems);
});

3. Debuggability

Debugging Features:

• Timestamped structured logging
• Step-by-step test execution logging
• Automatic screenshot capture on failure
• DOM structure logging
• Page state capture (URL, title, errors)
• Accessibility verification reports
• Performance metrics collection

Debug Output Example:

[2024-12-18T10:30:45.123Z] [should generate 8 icons] Step 1: Enter simple prompt
[2024-12-18T10:30:46.456Z] [should generate 8 icons] Step 2: Verify exactly 8 icons were generated
[2024-12-18T10:30:47.789Z] [should generate 8 icons] ✅ Generated 8 icons from simple prompt
📸 Screenshot saved: screenshots/test-name-description.png

4. Coverage Optimization

Coverage Areas:

1. Feature Coverage - All major features tested
2. Browser Coverage - 5 browser/device combinations
3. Viewport Coverage - 7 different viewport sizes
4. Path Coverage - Multiple user flows per feature
5. Error Path Coverage - Error scenarios and edge cases

Advanced Features

Custom Assertions

await assertions.expectEightIconsGenerated(iconItems);
await assertions.expectIconsVisible(iconItems);
await assertions.expectColorApplied(colorElement, '#FF0000');
await assertions.expectResponsiveLayout(container);

Test Data Management

const prompts = TestDataFactory.getTestPrompts();
const colors = TestDataFactory.getTestColors();
const styles = TestDataFactory.getTestStyles();
const viewports = TestDataFactory.getTestViewports();

Retry Helper

await RetryHelper.retryWithBackoff(async () => {
  return await page.locator(selector).click();
}, 3, 500);

await RetryHelper.waitFor(
  () => iconElements.count() === 8,
  10000,
  500
);

Debug Helper

await debugHelper.takeScreenshot('state-description');
await debugHelper.verifyAccessibility();
await debugHelper.capturePageState();
await debugHelper.logDOMStructure();

CI/CD Integration

GitHub Actions Example

- name: Run Playwright Tests
  run: npm test
  
- name: Upload Test Results
  if: always()
  uses: actions/upload-artifact@v2
  with:
    name: playwright-report
    path: test-results/

Performance Benchmarks

Based on test execution:

Metric	Threshold	Status
Icon Generation Time	<60s	✅ Acceptable
Page Load Time	<5s	✅ Good
Test Suite Execution	~15-20min (all browsers)	✅ Reasonable
Memory Usage	<100MB	✅ Efficient

Known Limitations & Future Improvements

Current Limitations

1. Tests cannot verify actual icon visual output (would require image comparison)
2. API responses are not mocked (tests hit real backend)
3. Audio/video playback features not covered
4. Offline mode not tested

Future Enhancements

1. Visual Regression Testing - Add image comparison for icons
2. API Mocking - Mock backend for faster, more reliable tests
3. Performance Monitoring - Integrate performance monitoring
4. Visual Accessibility - Add axe-accessibility plugin
5. Load Testing - Add k6 or Artillery for load testing
6. Test Report Dashboard - Build real-time test metrics dashboard

Troubleshooting

Common Issues

Issue: Tests timeout waiting for icons

Solution: Increase GENERATION timeout in testConfig.ts

Issue: Flaky tests on CI

Solution: Increase retries in playwright.config.ts or add explicit waits

Issue: Mobile tests fail

Solution: Ensure mobile device definitions match actual device specs

Contact & Support

For issues or improvements, please refer to the test documentation above or check the inline code comments for specific details.

---

Test Automation Framework: Playwright v1.40.0+ Language: TypeScript 5.5.3+ Last Updated: December 18, 2024