Migrating Playwright E2E Tests to TypeScript

// Without explicit typing - TypeScript guesses
async function login() {
  // TypeScript doesn't know what this returns
}

// With explicit typing - Clear contract
async function login(): Promise {
  // TypeScript knows this returns nothing
}

// JavaScript - This would run and cause runtime errors
function login(email, password) {
  email.toUpperCase(); // What if email is null?
  password.length;     // What if password is undefined?
}

// TypeScript - This catches errors at compile time
function login(email: string, password: string): void {
  email.toUpperCase(); // TypeScript knows email is string
  password.length;     // TypeScript knows password is string
}

interface User {
  email: string;
  password: string;
  firstName: string;
}

// TypeScript ensures all required fields are present
const user: User = {
  email: "test@example.com",
  password: "password123",
  firstName: "John"
  // lastName missing - TypeScript error!
};

// TypeScript ensures proper Playwright types
export class HomePage {
  readonly page: Page;           // Must be Playwright Page
  readonly searchBox: Locator;   // Must be Playwright Locator
  
  constructor(page: Page) {      // Constructor must receive Page
    this.page = page;
    this.searchBox = page.getByPlaceholder("Search");
  }
  
  async search(text: string): Promise {  // Clear method signature
    await this.searchBox.fill(text);
  }
}

// tsconfig.json - Can include both file types
{
  "include": [
    "tests/**/*.ts",    // TypeScript files
    "tests/**/*.js",    // JavaScript files (temporary)
    "pages/**/*.ts",
    "utils/**/*.ts"
  ]
}

// Gradual migration approach
// Week 1: Convert page objects to TS
// Week 2: Convert test files to TS  
// Week 3: Add interfaces and types
// Week 4: Remove .js files

interface User {
  email: string;
  password: string;
  firstName?: string;        // Optional property
  lastName?: string;         // Optional property
  age?: number;             // Optional number
  isActive: boolean;        // Required property
}

// Usage with optional properties
const user: User = {
  email: "test@example.com",
  password: "password123",
  isActive: true
  // firstName and lastName are optional
};

// Generic type for different test data
type TestData = {
  scenario: string;
  data: T;
  expectedResult: string;
};

// Union type for different user types
type UserType = 'admin' | 'customer' | 'guest';

// Type alias for complex locator patterns
type LocatorPattern = {
  selector: string;
  timeout?: number;
  visible?: boolean;
};

// Usage
const loginTest: TestData<{email: string, password: string}> = {
  scenario: "Valid login",
  data: { email: "test@example.com", password: "password123" },
  expectedResult: "Dashboard loaded"
};

// Proper async method typing
async function performLogin(credentials: UserCredentials): Promise {
  try {
    await page.fill('#email', credentials.email);
    await page.fill('#password', credentials.password);
    await page.click('#login-button');
    return true;
  } catch (error) {
    console.error('Login failed:', error);
    return false;
  }
}

// Parallel async operations with typing
async function loadMultiplePages(pages: Page[]): Promise {
  const promises: Promise[] = pages.map(page => page.goto('/'));
  await Promise.all(promises);
}