TypeScript

This is the bridge between learning TypeScript and building real Playwright automation. You will set up a Playwright TypeScript project, learn exactly which TypeScript concepts matter for testing, and build typed tests, page objects and fixtures step by step.

🎯 Why Use TypeScript with Playwright?

Playwright supports JavaScript, TypeScript, Python, Java and .NET, but TypeScript is the most popular choice for Playwright projects, and it is what the official documentation uses in its examples. The reasons are practical:

• Autocomplete everywhere: type page. and your editor lists every method with its parameters.
• Errors before you run: a typo like page.gotoo() or a missing await on a typed value is flagged instantly.
• Zero setup: Playwright runs .ts test files directly; you do not need to configure a separate compiler.
• Safer refactoring: rename a page object method and every usage is updated or highlighted.
• Better job prospects: “Playwright + TypeScript” is one of the most requested combinations in QA automation job posts.

🗺️ TypeScript Concepts You Need for Playwright

You do not need to master all of TypeScript before writing tests. This is the practical checklist, in learning order, with a guide for each:

⚙️ Step 1: Set Up a Playwright TypeScript Project

You need Node.js (LTS version) and VS Code. Then run one command in an empty folder:

npm init playwright@latest

Choose TypeScript when asked, accept the default tests folder, add a GitHub Actions workflow if you want CI, and let it install the browsers. Then install the official Playwright Test for VS Code extension to run and debug tests from the editor.

The generated project looks like this:

my-project/
├── tests/
│   └── example.spec.ts      # your tests
├── playwright.config.ts     # Playwright settings (typed!)
├── package.json
└── package-lock.json

🛠️ Step 2: Understand playwright.config.ts

The config file is plain TypeScript. defineConfig gives you autocomplete and type checking for every option.

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  timeout: 30_000,               // max time per test (ms)
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 2 : undefined,
  reporter: [['html', { open: 'never' }]],
  use: {
    baseURL: 'https://www.saucedemo.com',
    trace: 'on-first-retry',     // record a trace when a test is retried
    screenshot: 'only-on-failure',
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox',  use: { ...devices['Desktop Firefox'] } },
  ],
});

✍️ Step 3: Your First TypeScript Test

// tests/login.spec.ts
import { test, expect } from '@playwright/test';

test('valid user can log in', async ({ page }) => {
  await page.goto('/');                                   // uses baseURL
  await page.getByPlaceholder('Username').fill('standard_user');
  await page.getByPlaceholder('Password').fill('secret_sauce');
  await page.getByRole('button', { name: 'Login' }).click();

  await expect(page).toHaveURL(/inventory/);
  await expect(page.locator('.title')).toHaveText('Products');
});

Run it:

npx playwright test                 # run all tests headless
npx playwright test --ui            # interactive UI mode
npx playwright test login.spec.ts   # run one file
npx playwright show-report          # open the HTML report

⏳ async, await and Promise<T>

Almost every Playwright action talks to the browser, so it returns a Promise. Always put await in front, otherwise the next line runs before the action finishes.

// ✅ correct
await page.getByRole('button', { name: 'Login' }).click();

// ❌ missing await: the test may finish before the click happens
page.getByRole('button', { name: 'Login' }).click();

// Helper functions return Promise<T>
async function getCartCount(page: Page): Promise<number> {
  const text = await page.locator('.shopping_cart_badge').textContent();
  return Number(text ?? 0);
}

🏷️ The Playwright Types You Will Use Most

Import these from @playwright/test to type your helpers and page objects:

import { Page, Locator, expect } from '@playwright/test';

async function addToCart(page: Page, productName: string): Promise<void> {
  const item: Locator = page.locator('.inventory_item').filter({ hasText: productName });
  await item.getByRole('button', { name: 'Add to cart' }).click();
  await expect(page.locator('.shopping_cart_badge')).toBeVisible();
}

📦 Typing Test Data

Use interfaces and union types so wrong test data is impossible to write.

// test-data/users.ts
export type Role = 'standard' | 'locked' | 'problem';

export interface TestUser {
  username: string;
  password: string;
  canLogin: boolean;
}

export const USERS: Record<Role, TestUser> = {
  standard: { username: 'standard_user',   password: 'secret_sauce', canLogin: true },
  locked:   { username: 'locked_out_user', password: 'secret_sauce', canLogin: false },
  problem:  { username: 'problem_user',    password: 'secret_sauce', canLogin: true },
};

// tests/users.spec.ts
import { test, expect } from '@playwright/test';
import { USERS } from '../test-data/users';

for (const [role, user] of Object.entries(USERS)) {
  test('login behaviour for ' + role + ' user', async ({ page }) => {
    await page.goto('/');
    await page.getByPlaceholder('Username').fill(user.username);
    await page.getByPlaceholder('Password').fill(user.password);
    await page.getByRole('button', { name: 'Login' }).click();

    if (user.canLogin) {
      await expect(page).toHaveURL(/inventory/);
    } else {
      await expect(page.locator('[data-test="error"]')).toBeVisible();
    }
  });
}

🏛️ Page Objects with Classes

As tests grow, move locators and actions into classes. This is the Page Object Model:

// pages/InventoryPage.ts
import { Page, Locator, expect } from '@playwright/test';

export class InventoryPage {
  readonly title: Locator;
  readonly cartBadge: Locator;

  constructor(private readonly page: Page) {
    this.title = page.locator('.title');
    this.cartBadge = page.locator('.shopping_cart_badge');
  }

  async addItem(name: string): Promise<void> {
    await this.page.locator('.inventory_item').filter({ hasText: name })
      .getByRole('button', { name: 'Add to cart' }).click();
  }

  async expectCartCount(count: number): Promise<void> {
    await expect(this.cartBadge).toHaveText(String(count));
  }
}

Full walkthrough: Playwright Page Object Model step by step.

🧩 Typed Fixtures with Generics

Custom fixtures inject ready-made page objects into every test. test.extend<T>() is a generic, so each fixture is fully typed.

// fixtures.ts
import { test as base } from '@playwright/test';
import { InventoryPage } from './pages/InventoryPage';

type Pages = { inventoryPage: InventoryPage };

export const test = base.extend<Pages>({
  inventoryPage: async ({ page }, use) => {
    await use(new InventoryPage(page));
  },
});
export { expect } from '@playwright/test';

// tests/cart.spec.ts
import { test } from '../fixtures';

test('add two items to the cart', async ({ page, inventoryPage }) => {
  // log in first (or reuse a saved session with storageState)
  await inventoryPage.addItem('Sauce Labs Backpack');
  await inventoryPage.addItem('Sauce Labs Bike Light');
  await inventoryPage.expectCartCount(2);
});

🔍 Important: Playwright Does Not Type-Check Your Tests

Playwright transpiles TypeScript so it can run it fast, but it does not report type errors when you run npx playwright test. Your editor shows them, but a CI run can still pass with type errors. Add a type-check step:

npx tsc --noEmit

Add a minimal tsconfig.json if your project does not have one:

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "noEmit": true
  },
  "include": ["tests", "pages", "test-data", "*.ts"]
}

🐞 Common TypeScript Errors in Playwright (and Fixes)

🚀 Recommended Learning Path

1. Learn the TypeScript basics from the table above (1 to 2 weeks).
2. Write simple tests with locators and assertions: Locators, Assertions.
3. Learn fixtures and annotations.
4. Build a framework with the Page Object Model and external test data (JSON, CSV, .env).
5. Complete the beginner automation project.
6. Prepare with 200 Playwright + TypeScript interview questions.

❓ FAQ

🤔 Do I need to learn TypeScript before Playwright?

You need the basics: variables, functions, async/await, arrays and objects. You can learn interfaces, classes and generics while building your first framework.

🤔 Is TypeScript or JavaScript better for Playwright?

TypeScript is recommended. It runs with zero extra setup, gives autocomplete and catches mistakes before tests run. JavaScript works too, but large suites are harder to maintain.

🤔 How long does it take to learn TypeScript for Playwright?

Most testers with basic programming knowledge are productive in 2 to 4 weeks of regular practice, following the learning path above.

🤔 Does Playwright check TypeScript types when running tests?

No. Playwright only transpiles TypeScript. Run npx tsc --noEmit separately (locally and in CI) to catch type errors.

🤔 Which TypeScript version does Playwright need?

Playwright bundles its own TypeScript transpiler, so you do not need to install TypeScript to run tests. Install the typescript package only for tsc type checking and editor tooling.

🎯 Next Steps

• 📘 TypeScript Interview Questions for Beginners
• 🎭 Playwright Automation Project for Beginners
• 🎭 Real-World Enterprise Playwright Framework
• 🎭 Playwright with TypeScript Training Notes: the full course roadmap

Generics sound advanced, but the idea is simple: write code once and let it work safely with any type. This guide explains TypeScript generics step by step for beginners, with clear examples and the places you already meet them in Playwright.

🧪 What Are Generics? (Explained Simply)

Generics let you write code that works with many types while still keeping full type safety. You write the logic once and leave a “blank” for the type. The blank is filled in when the code is used.

A useful analogy is a labelled storage box. The box works the same whether it holds books or shoes, but once you write “Books” on the label, you can only put books in it and you know you will get books out. In TypeScript that label is the type parameter, usually written <T>.

🤔 The Problem Generics Solve

Imagine a function that returns the first item of an array. Without generics you have two bad options:

// Option 1: one function per type (repetitive)
function firstString(items: string[]): string { return items[0]; }
function firstNumber(items: number[]): number { return items[0]; }

// Option 2: use any (no type safety)
function firstAny(items: any[]): any { return items[0]; }

const value = firstAny(['chromium', 'firefox']);
value.toFixed(2); // ❌ no error in the editor, but crashes at runtime!

✨ Your First Generic Function

Add <T> after the function name. T is a placeholder for “whatever type the caller uses”.

function first<T>(items: T[]): T {
  return items[0];
}

const browser = first(['chromium', 'firefox']); // T is string, so browser: string
const score = first([90, 85, 70]);              // T is number, so score: number

browser.toUpperCase(); // ✅ string method allowed
// browser.toFixed(2); // ❌ Error: toFixed does not exist on type string

TypeScript usually infers T from the arguments. You can also pass it explicitly: first<string>(['a', 'b']).

➡️ Generic Arrow Functions

Arrow functions use the same idea; the <T> goes before the parameters.

const last = <T>(items: T[]): T => items[items.length - 1];

const wrapInArray = <T>(value: T): T[] => [value];

last(['login', 'checkout', 'logout']); // 'logout'
wrapInArray(42);                       // [42]

🔢 Multiple Type Parameters

function pair<K, V>(key: K, value: V): [K, V] {
  return [key, value];
}

const p1 = pair('timeout', 30000); // [string, number]
const p2 = pair(1, true);          // [number, boolean]

function mapValues<T, R>(items: T[], fn: (item: T) => R): R[] {
  return items.map(fn);
}

const lengths = mapValues(['a', 'abc'], s => s.length); // number[]

🚧 Generic Constraints with extends

Sometimes T should not be “anything”. A constraint says “T must have at least these properties”. Use extends for that.

// T must have a length property
function longest<T extends { length: number }>(a: T, b: T): T {
  return a.length >= b.length ? a : b;
}

longest('playwright', 'ts');  // ✅ strings have length
longest([1, 2, 3], [1]);      // ✅ arrays have length
// longest(10, 20);           // ❌ Error: number has no length

A very common constraint is K extends keyof T, which means “K must be one of the property names of T”.

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const user = { name: 'Deepesh', role: 'SDET', years: 8 };

getProperty(user, 'name');   // string
getProperty(user, 'years');  // number
// getProperty(user, 'email'); // ❌ Error: 'email' is not a key of user

📦 Generic Interfaces and Types

Generics are especially powerful in interfaces. A classic example is a wrapper for API responses where only the data part changes.

interface ApiResponse<T> {
  status: number;
  message: string;
  data: T;
}

interface User { id: number; name: string }
interface Product { sku: string; price: number }

const userRes: ApiResponse<User> = {
  status: 200, message: 'OK', data: { id: 1, name: 'Asha' },
};

const productsRes: ApiResponse<Product[]> = {
  status: 200, message: 'OK', data: [{ sku: 'LP-01', price: 55000 }],
};

// Default type parameter
type Paginated<T = string> = { page: number; items: T[] };
const tags: Paginated = { page: 1, items: ['smoke', 'regression'] };

🏛️ Generic Classes

Classes can be generic too. This simple typed store keeps test data of one type only.

class DataStore<T> {
  private items: T[] = [];

  add(item: T): void {
    this.items.push(item);
  }

  getAll(): T[] {
    return [...this.items];
  }

  find(predicate: (item: T) => boolean): T | undefined {
    return this.items.find(predicate);
  }
}

const users = new DataStore<{ email: string; active: boolean }>();
users.add({ email: 'a@test.com', active: true });
// users.add('hello'); // ❌ Error: string is not the stored type

const active = users.find(u => u.active);

🧰 Built-in Generic Utility Types

TypeScript ships with ready-made generics you will use every day:

interface User { id: number; name: string; email: string; password: string }

type PublicUser = Omit<User, 'password'>;        // no password
type UserUpdate = Partial<Pick<User, 'name' | 'email'>>;

const patch: UserUpdate = { email: 'new@test.com' };

🎭 Generics in Playwright: Real Examples

You already use generics in Playwright, maybe without noticing: every async method returns a Promise<T>, and test.extend<T>() is a generic.

1. A typed API helper

import { APIRequestContext, expect } from '@playwright/test';

export async function getJson<T>(request: APIRequestContext, url: string): Promise<T> {
  const response = await request.get(url);
  expect(response.ok()).toBeTruthy();
  return (await response.json()) as T;
}

// usage in a test
interface Todo { id: number; title: string; completed: boolean }

const todo = await getJson<Todo>(request, 'https://jsonplaceholder.typicode.com/todos/1');
expect(todo.completed).toBe(false); // todo is fully typed

2. Typed custom fixtures with test.extend<T>()

import { test as base } from '@playwright/test';
import { LoginPage } from '../pages/LoginPage';

type MyFixtures = {
  loginPage: LoginPage;
  testUser: { username: string; password: string };
};

export const test = base.extend<MyFixtures>({
  testUser: async ({}, use) => {
    await use({ username: 'standard_user', password: 'secret_sauce' });
  },
  loginPage: async ({ page }, use) => {
    await use(new LoginPage(page));
  },
});

Learn more in Playwright Custom Fixtures with Examples.

3. A generic test data loader

import fs from 'fs';

export function loadJson<T>(path: string): T {
  return JSON.parse(fs.readFileSync(path, 'utf-8')) as T;
}

const users = loadJson<{ username: string; password: string }[]>('test-data/users.json');

See the full approach in Read JSON data in Playwright.

✅ Best Practices

• Use generics when the same logic works for different types; do not add <T> when one type is enough.
• Let TypeScript infer T whenever possible; pass it explicitly when inference cannot know it (for example API responses).
• Add constraints (extends) so the function only accepts types it can really handle.
• Prefer generics over any. any switches off type checking; generics keep it on.
• Remember that as T is a promise you make to the compiler; validate important API responses with assertions.

🏋️ Practice Exercises

1. Write a generic function lastItem<T>(arr: T[]): T | undefined.
2. Write toMap<T, K extends keyof T>(items: T[], key: K) that returns a Map keyed by that property.
3. Create interface Result<T> { ok: boolean; value?: T; error?: string } and a function that returns it.
4. Build a generic Queue<T> class with enqueue, dequeue and size.

❓ FAQ

🤔 What are generics in TypeScript in simple terms?

A way to write a function, interface or class once and use it with any type, while TypeScript still tracks exactly which type is used each time.

🤔 What does <T> mean in TypeScript?

T is a type parameter: a placeholder name for a type that will be provided (or inferred) when the code is used.

🤔 What is the difference between generics and any?

any turns off type checking. Generics keep type checking: if you pass strings in, TypeScript knows you get strings out.

🤔 What does T extends mean in generics?

It is a constraint. T extends { id: number } means T can be any type, as long as it has a numeric id property.

🤔 Where are generics used in Playwright?

In Promise<T> return types, test.extend<Fixtures>() for custom fixtures, and typed helpers such as a getJson<T>() API function.

🎯 Next Steps

• 📘 TypeScript with Playwright: put it all together
• 📘 TypeScript Classes
• 📘 TypeScript Interfaces
• 🎭 Playwright API Automation with Page Object Model
• 🎭 Playwright with TypeScript Training Notes

✎ Practise what you learned: 30 TypeScript generics programs with solutions →

Classes are the heart of object-oriented programming and the reason Playwright frameworks stay clean as they grow. This beginner guide explains TypeScript classes in plain language, from your first constructor to a working Page Object Model.

🏗️ What Is a Class?

A class is a template for creating objects. It bundles data (properties) and behavior (methods) together. Each object created from a class is called an instance.

A simple analogy: a class is the architect’s plan for a house, and each house built from that plan is an object. Every house has the same rooms (properties) and the same doors and switches (methods), but each one can have different paint and furniture (values).

In Playwright, classes are the foundation of the Page Object Model: each page of your application becomes a class with locators as properties and user actions as methods.

✍️ Creating Your First Class

class Car {
  brand: string;
  speed: number;

  constructor(brand: string, speed: number) {
    this.brand = brand;
    this.speed = speed;
  }

  describe(): string {
    return this.brand + ' runs at ' + this.speed + ' km/h';
  }
}

const car1 = new Car('Tata', 120);   // create an instance (object)
const car2 = new Car('Honda', 140);

console.log(car1.describe()); // Tata runs at 120 km/h
console.log(car2.brand);      // Honda

Key words to remember:

• class declares the template.
• constructor runs once when you call new and sets up the starting values.
• this refers to the current object.
• new creates a fresh object from the class.

⚡ Parameter Properties: The Short Way

TypeScript lets you declare and assign properties directly in the constructor by adding an access modifier (public, private, protected or readonly) before the parameter. You will see this in almost every Playwright page object.

// Long form
class UserLong {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}

// Short form: same result, less code
class User {
  constructor(public name: string, private password: string) {}
}

const u = new User('admin', 'secret');
console.log(u.name);       // admin
// console.log(u.password); // ❌ Error: 'password' is private

🔐 Access Modifiers: public, private, protected, readonly

Access modifiers control who can use a property or method.

class BankAccount {
  readonly accountNumber: string;
  private balance = 0;

  constructor(accountNumber: string) {
    this.accountNumber = accountNumber;
  }

  deposit(amount: number): void {
    if (amount <= 0) throw new Error('Amount must be positive');
    this.balance += amount;
  }

  getBalance(): number {
    return this.balance;
  }
}

const acc = new BankAccount('SB-1001');
acc.deposit(500);
console.log(acc.getBalance()); // 500
// acc.balance = 1000000;      // ❌ Error: private

🧬 Inheritance with extends and super

Inheritance lets one class reuse another class. The child class gets every property and method of the parent and can add or override its own. Call super() in the child constructor to run the parent constructor first.

class Employee {
  constructor(public name: string, protected salary: number) {}

  getDetails(): string {
    return this.name + ' earns ' + this.salary;
  }
}

class Manager extends Employee {
  constructor(name: string, salary: number, public teamSize: number) {
    super(name, salary); // must come first
  }

  // Override the parent method
  getDetails(): string {
    return super.getDetails() + ' and manages ' + this.teamSize + ' people';
  }
}

const m = new Manager('Neha', 150000, 8);
console.log(m.getDetails()); // Neha earns 150000 and manages 8 people

🧰 Getters, Setters and Static Members

Getters and setters look like properties but run code. Static members belong to the class itself, not to each object. They are handy for shared constants and utility methods.

class Temperature {
  private celsius = 0;

  get fahrenheit(): number {
    return this.celsius * 9 / 5 + 32;
  }

  set value(c: number) {
    if (c < -273.15) throw new Error('Below absolute zero');
    this.celsius = c;
  }
}

const t = new Temperature();
t.value = 25;
console.log(t.fahrenheit); // 77

class TestUtils {
  static readonly DEFAULT_TIMEOUT = 30000;

  static randomEmail(): string {
    return 'user' + Date.now() + '@test.com';
  }
}

console.log(TestUtils.DEFAULT_TIMEOUT); // no "new" needed
console.log(TestUtils.randomEmail());

🧱 Abstract Classes

An abstract class cannot be created directly with new. It is a base for other classes and can force them to implement certain methods. This is useful for a BasePage that every page must extend.

abstract class Shape {
  abstract area(): number; // child classes MUST implement this

  describe(): string {
    return 'Area is ' + this.area().toFixed(2);
  }
}

class Circle extends Shape {
  constructor(private radius: number) { super(); }
  area(): number { return Math.PI * this.radius ** 2; }
}

console.log(new Circle(2).describe()); // Area is 12.57
// new Shape(); // ❌ Error: cannot create an instance of an abstract class

🤝 Classes and Interfaces Together

A class can implement an interface. The interface describes *what* must exist and the class provides *how* it works. If the class misses a member, TypeScript reports an error.

interface Reporter {
  report(testName: string, passed: boolean): void;
}

class ConsoleReporter implements Reporter {
  report(testName: string, passed: boolean): void {
    console.log((passed ? '✅ ' : '❌ ') + testName);
  }
}

Classes vs interfaces in one line: an interface is a compile-time contract with no code, while a class is real code that creates objects at runtime.

🎭 Classes in Playwright: Page Object Model

Here is a small but realistic Page Object Model built with everything you learned: readonly locators, a constructor, a protected base helper, inheritance and public action methods.

1. Base page

// pages/BasePage.ts
import { Page } from '@playwright/test';

export abstract class BasePage {
  constructor(protected readonly page: Page) {}

  abstract readonly path: string;

  async open(): Promise<void> {
    await this.page.goto('https://www.saucedemo.com' + this.path);
  }
}

2. Login page

// pages/LoginPage.ts
import { Page, Locator } from '@playwright/test';
import { BasePage } from './BasePage';

export class LoginPage extends BasePage {
  readonly path = '/';
  readonly username: Locator;
  readonly password: Locator;
  readonly loginButton: Locator;
  readonly error: Locator;

  constructor(page: Page) {
    super(page);
    this.username = page.getByPlaceholder('Username');
    this.password = page.getByPlaceholder('Password');
    this.loginButton = page.getByRole('button', { name: 'Login' });
    this.error = page.locator('[data-test="error"]');
  }

  async login(user: string, pass: string): Promise<void> {
    await this.username.fill(user);
    await this.password.fill(pass);
    await this.loginButton.click();
  }
}

3. The test stays short and readable

// tests/login.spec.ts
import { test, expect } from '@playwright/test';
import { LoginPage } from '../pages/LoginPage';

test('valid user can log in', async ({ page }) => {
  const loginPage = new LoginPage(page);
  await loginPage.open();
  await loginPage.login('standard_user', 'secret_sauce');
  await expect(page).toHaveURL(/inventory/);
});

test('locked user sees an error', async ({ page }) => {
  const loginPage = new LoginPage(page);
  await loginPage.open();
  await loginPage.login('locked_out_user', 'secret_sauce');
  await expect(loginPage.error).toContainText('locked out');
});

Go deeper with Playwright Page Object Model step by step and Playwright Custom Fixtures, which can create page objects for you automatically.

✅ Best Practices

• One class per page or component; keep each class focused on one responsibility (see SOLID principles with Playwright).
• Mark locators readonly so they cannot be reassigned by accident.
• Keep assertions in tests, and keep actions in page classes.
• Use private for helpers the tests should not call directly.
• Prefer composition (a page that *has* a header component) over deep inheritance chains.

❓ FAQ

🤔 What is the difference between a class and an object in TypeScript?

A class is the template; an object is a real value created from it with new. One class can create many objects.

🤔 What is a constructor in TypeScript?

A special method named constructor that runs automatically when you create an object with new. It sets the starting values of properties.

🤔 When should I use a class instead of an interface?

Use a class when you need real behavior and to create objects at runtime, such as page objects. Use an interface when you only need to describe a shape or contract.

🤔 Why do Playwright page objects use classes?

Classes group a page’s locators and actions in one place, so tests read like user steps and a UI change only needs one fix in the page class.

🤔 What does super() do?

In a child class constructor, super() calls the parent class constructor. It must run before you use this.

🎯 Next Steps

• 📘 TypeScript Generics
• 📘 TypeScript OOP Practice Questions
• 📘 TypeScript with Playwright
• 🎭 Advanced Playwright Design Patterns
• 🎭 Playwright with TypeScript Training Notes

✎ Practise what you learned: 30 TypeScript class programs with solutions →

Interfaces are how TypeScript describes the shape of your data. In test automation they keep test data, API responses and page objects consistent, so typos are caught in the editor instead of in a failed CI run. This guide explains interfaces from scratch with simple examples.

📐 What Is an Interface in TypeScript?

An interface is a named description of what an object must look like: which properties it has, what type each one is, and which methods it provides. Think of it as a contract or a blueprint. Any object that claims to follow the interface must match it, or TypeScript shows an error before your code runs.

Interfaces do not exist at runtime. They are removed when TypeScript compiles to JavaScript, so they add safety without adding any code to your tests.

interface User {
  username: string;
  password: string;
  age: number;
}

const tester: User = {
  username: 'standard_user',
  password: 'secret_sauce',
  age: 28,
};

// ❌ Error: Property 'age' is missing in type
// const broken: User = { username: 'x', password: 'y' };

🧩 Interface Example: Optional and Readonly Properties

Just like object types, interface properties can be optional (?) or readonly.

interface TestEnvironment {
  readonly name: string;    // cannot change after creation
  baseUrl: string;
  apiKey?: string;          // optional
  timeout?: number;         // optional
}

const qa: TestEnvironment = { name: 'QA', baseUrl: 'https://qa.sqatools.in' };

qa.baseUrl = 'https://qa2.sqatools.in'; // ✅
// qa.name = 'PROD';                    // ❌ read-only

🎚️ Default Values for Interface Properties

A common beginner question is “how do I give an interface a default value?”. Interfaces only describe types, so they cannot hold values. Instead, set defaults where the object is created, usually with the spread operator or default parameters.

interface BrowserOptions {
  browser: 'chromium' | 'firefox' | 'webkit';
  headless?: boolean;
  slowMo?: number;
}

const defaultOptions: Required<BrowserOptions> = {
  browser: 'chromium',
  headless: true,
  slowMo: 0,
};

function createOptions(custom: Partial<BrowserOptions> = {}): Required<BrowserOptions> {
  return { ...defaultOptions, ...custom };
}

createOptions({ headless: false });
// { browser: 'chromium', headless: false, slowMo: 0 }

🛠️ Methods and Functions in Interfaces

Interfaces can describe methods too. This is exactly how you describe what a page object must be able to do.

interface LoginActions {
  open(): Promise<void>;
  login(username: string, password: string): Promise<void>;
  getErrorMessage(): Promise<string>;
}

// An interface can also describe a standalone function type
interface Formatter {
  (value: number): string;
}

const toPrice: Formatter = (value) => '₹' + value.toFixed(2);
console.log(toPrice(499)); // ₹499.00

🔗 Extending Interfaces

Interfaces can extend other interfaces to reuse properties. The new interface gets everything from the parent plus its own properties. You can extend more than one interface at once.

interface Person {
  firstName: string;
  lastName: string;
}

interface Employee extends Person {
  employeeId: number;
  department: string;
}

interface Timestamps {
  createdAt: Date;
}

interface Admin extends Employee, Timestamps {
  permissions: string[];
}

const lead: Admin = {
  firstName: 'Ravi',
  lastName: 'Kumar',
  employeeId: 101,
  department: 'QA',
  createdAt: new Date(),
  permissions: ['create-user', 'delete-user'],
};

📚 Interfaces for Arrays, Nested Data and Dynamic Keys

interface Address { city: string; zip: string }

interface Customer {
  id: number;
  name: string;
  address: Address;          // nested interface
  tags: string[];            // array of strings
  orders: { id: number; total: number }[]; // array of objects
}

// Index signature: any number of string keys
interface Headers {
  [header: string]: string;
}

const headers: Headers = { 'Content-Type': 'application/json', Accept: '*/*' };

⚔️ Interface vs Type: What Is the Difference?

This is one of the most searched TypeScript questions. For describing objects, both work and look almost the same. The differences:

// Same shape, two ways
interface UserA { name: string }
type UserB = { name: string };

// Extending
interface AdminA extends UserA { role: string }
type AdminB = UserB & { role: string };

// Only a type can do this
type Browser = 'chromium' | 'firefox' | 'webkit';
type Point = [number, number];

// Only an interface can do this (declaration merging)
interface Settings { theme: string }
interface Settings { language: string }
const s: Settings = { theme: 'dark', language: 'en' };

🏛️ Interface vs Class

An interface only describes shape and is removed at compile time. A class creates real objects at runtime and can contain code, constructors and default values. A class can implement an interface to promise it follows that contract.

interface Logger {
  log(message: string): void;
}

class ConsoleLogger implements Logger {
  log(message: string): void {
    console.log('[test] ' + message);
  }
}

// ❌ Error if the class forgets the log() method

🎭 Interfaces in Playwright: Real Examples

1. Typing test data

// test-data/users.ts
export interface UserData {
  username: string;
  password: string;
  expectedPage: string;
}

export const users: Record<'standard' | 'problem', UserData> = {
  standard: { username: 'standard_user', password: 'secret_sauce', expectedPage: '/inventory.html' },
  problem:  { username: 'problem_user',  password: 'secret_sauce', expectedPage: '/inventory.html' },
};

2. Typing an API response

import { test, expect } from '@playwright/test';

interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

test('GET a post returns the correct shape', async ({ request }) => {
  const response = await request.get('https://jsonplaceholder.typicode.com/posts/1');
  expect(response.ok()).toBeTruthy();

  const post: Post = await response.json();
  expect(post.id).toBe(1);
  expect(typeof post.title).toBe('string'); // editor autocompletes post.title
});

3. A contract for page objects

import { Page } from '@playwright/test';

interface BasePage {
  readonly page: Page;
  readonly url: string;
  open(): Promise<void>;
}

export class LoginPage implements BasePage {
  readonly url = 'https://www.saucedemo.com/';
  constructor(readonly page: Page) {}

  async open() {
    await this.page.goto(this.url);
  }

  async login(user: { username: string; password: string }) {
    await this.page.getByPlaceholder('Username').fill(user.username);
    await this.page.getByPlaceholder('Password').fill(user.password);
    await this.page.getByRole('button', { name: 'Login' }).click();
  }
}

Read the full pattern in Playwright Page Object Model step by step.

✅ Best Practices

• Name interfaces after what they represent: UserData, ApiResponse, CheckoutPage.
• Keep shared interfaces in one folder (for example types/) and export them.
• Use extends to build specific interfaces from general ones instead of copy-pasting properties.
• Type every API response you assert on. Autocomplete then prevents typos in property names.
• Prefer Partial<T> for “update” or “override” objects instead of making every property optional.

❓ FAQ

🤔 What is an interface in TypeScript in simple words?

It is a named blueprint that lists the properties and methods an object must have. TypeScript checks every object against it while you write code.

🤔 Should I use interface or type in TypeScript?

Both work for objects. Use interface for object shapes and class contracts, and type for unions, tuples and other combinations. Pick one style per project and stay consistent.

🤔 Can a TypeScript interface have default values?

No. Interfaces only describe types. Set defaults when creating the object, for example const opts = { ...defaults, ...custom }.

🤔 Can an interface extend multiple interfaces?

Yes: interface Admin extends Employee, Timestamps {} combines all properties from both parents.

🤔 Do interfaces slow down my tests?

No. Interfaces are removed during compilation and produce zero JavaScript, so they have no runtime cost.

🎯 Next Steps

• 📘 TypeScript Objects
• 📘 TypeScript Classes: implement interfaces in classes
• 📘 TypeScript Generics: reusable interfaces like ApiResponse<T>
• 📘 TypeScript with Playwright
• 🎭 Playwright with TypeScript Training Notes

✎ Practise what you learned: 30 TypeScript interface programs with solutions →

Objects are the backbone of test automation: login credentials, form data, API payloads and even your Playwright config are all objects. In this beginner-friendly guide you will learn how TypeScript objects work, how to give them types, and how to use them in real Playwright tests.

🧱 What Is an Object in TypeScript?

An object is a way to group related values together under one name. Instead of creating five separate variables for a user’s name, email, password, role and age, you put them in one object. Each value is stored as a property: a key (the name) and a value.

In plain JavaScript, objects can hold anything and you only find mistakes when the code runs. TypeScript adds types to objects, so your editor warns you the moment you misspell a property or put a number where a string belongs. For test automation this matters a lot, because most test data, such as login users, form inputs and API payloads, is stored in objects.

// A simple object: TypeScript infers the type automatically
const user = {
  name: 'Deepesh',
  email: 'deepesh@sqatools.in',
  age: 30,
  isActive: true,
};

console.log(user.name);   // Deepesh
console.log(user['email']); // deepesh@sqatools.in (bracket notation)

✍️ Declaring an Object Type

You can describe the shape of an object explicitly. This is called an object type annotation. It lists every property and its type, separated by semicolons.

let loginUser: { username: string; password: string; rememberMe: boolean };

loginUser = {
  username: 'standard_user',
  password: 'secret_sauce',
  rememberMe: false,
};

// ❌ Error: Property 'rememberMe' is missing
// loginUser = { username: 'admin', password: '1234' };

// ❌ Error: Type 'number' is not assignable to type 'string'
// loginUser = { username: 101, password: 'x', rememberMe: true };

Writing the shape inline works, but it gets repetitive. In real projects you give the shape a name with a type alias (or an interface) and reuse it everywhere.

type User = {
  username: string;
  password: string;
  role: string;
};

const admin: User = { username: 'admin', password: 'Admin@123', role: 'admin' };
const guest: User = { username: 'guest', password: 'Guest@123', role: 'viewer' };

❓ Optional and Readonly Properties

Not every property is always present. Add a ? after the name to make it optional. Add readonly in front to stop anyone from changing it after the object is created.

type TestConfig = {
  readonly baseUrl: string; // cannot be changed later
  browser: string;
  headless?: boolean;       // optional
  retries?: number;         // optional
};

const config: TestConfig = {
  baseUrl: 'https://sqatools.in',
  browser: 'chromium',
};

config.browser = 'firefox';   // ✅ allowed
// config.baseUrl = 'https://x.com'; // ❌ Error: read-only property

// Optional values may be undefined, so give a fallback
const retries = config.retries ?? 0;

🔧 Adding, Updating and Deleting Properties

TypeScript only lets you use properties that exist in the type. This is a feature: it catches typos like usernmae immediately.

type Product = { name: string; price: number; inStock?: boolean };

const product: Product = { name: 'Laptop', price: 55000 };

product.price = 52000;     // ✅ update
product.inStock = true;    // ✅ add an optional property
delete product.inStock;    // ✅ delete works only on optional properties

// product.color = 'black'; // ❌ Error: 'color' does not exist on type 'Product'

If you genuinely need an object whose keys are not known in advance (for example, HTTP headers), use an index signature or the built-in Record type.

// Any string key, every value is a string
const headers: { [key: string]: string } = {};
headers['Content-Type'] = 'application/json';
headers['Authorization'] = 'Bearer token123';

// Same thing using Record<KeyType, ValueType>
const statusMessages: Record<number, string> = {
  200: 'OK',
  404: 'Not Found',
  500: 'Server Error',
};

🪆 Nested Objects

Objects can contain other objects. This is common for API responses and page configuration.

type Address = { city: string; pincode: string };

type Customer = {
  id: number;
  name: string;
  address: Address;          // nested object
  contacts: { email: string; phone?: string };
};

const customer: Customer = {
  id: 1,
  name: 'Asha',
  address: { city: 'Pune', pincode: '411001' },
  contacts: { email: 'asha@test.com' },
};

console.log(customer.address.city);      // Pune
console.log(customer.contacts.phone?.length); // undefined (optional chaining)

📋 Arrays of Objects

An array of objects is the most common way to store test data for data-driven tests. Each object is one test case.

type LoginCase = { title: string; username: string; password: string; expectError: boolean };

const loginCases: LoginCase[] = [
  { title: 'valid user',      username: 'standard_user',  password: 'secret_sauce', expectError: false },
  { title: 'locked user',     username: 'locked_out_user', password: 'secret_sauce', expectError: true },
  { title: 'wrong password',  username: 'standard_user',  password: 'wrong',        expectError: true },
];

// Find, filter and map work exactly like normal arrays
const negativeCases = loginCases.filter(c => c.expectError);
const titles = loginCases.map(c => c.title);
console.log(titles); // ['valid user', 'locked user', 'wrong password']

Learn more array methods in our TypeScript Arrays guide.

🔁 Looping Through an Object

Use Object.keys(), Object.values() and Object.entries() to work with every property.

const scores = { chromium: 98, firefox: 95, webkit: 91 };

Object.keys(scores);    // ['chromium', 'firefox', 'webkit']
Object.values(scores);  // [98, 95, 91]

for (const [browser, score] of Object.entries(scores)) {
  console.log(browser + ' scored ' + score);
}

🧩 Destructuring, Spread and Merging Objects

Destructuring pulls properties out into variables. The spread operator ... copies properties into a new object, which is the easiest way to merge or override values.

const user = { username: 'admin', password: 'Admin@123', role: 'admin' };

// Destructuring
const { username, password } = user;

// Merge two objects (later values win)
const defaults = { browser: 'chromium', headless: true, retries: 0 };
const overrides = { headless: false, retries: 2 };
const finalConfig = { ...defaults, ...overrides };
// { browser: 'chromium', headless: false, retries: 2 }

// Copy and change one field without touching the original
const guest = { ...user, username: 'guest', role: 'viewer' };

⚖️ Comparing Objects

Two objects are only === equal if they are the same object in memory, even if their contents match. To compare contents, compare the values or use a deep equality check.

const a = { id: 1, name: 'Test' };
const b = { id: 1, name: 'Test' };

console.log(a === b); // false: different objects
console.log(JSON.stringify(a) === JSON.stringify(b)); // true (simple objects, same key order)

In Playwright tests you do not need any of this: expect(actual).toEqual(expected) performs a deep comparison for you.

🎭 Objects in Playwright: Real Examples

Objects are everywhere in Playwright. The config file is an object, test data is usually objects, and API requests send objects as JSON.

1. Test data object for a login test

import { test, expect } from '@playwright/test';

type Credentials = { username: string; password: string };

const validUser: Credentials = { username: 'standard_user', password: 'secret_sauce' };

test('user can log in', async ({ page }) => {
  await page.goto('https://www.saucedemo.com/');
  await page.getByPlaceholder('Username').fill(validUser.username);
  await page.getByPlaceholder('Password').fill(validUser.password);
  await page.getByRole('button', { name: 'Login' }).click();
  await expect(page).toHaveURL(/inventory/);
});

2. Data-driven tests from an array of objects

const cases = [
  { username: 'locked_out_user', error: 'Sorry, this user has been locked out.' },
  { username: 'unknown_user',    error: 'Username and password do not match' },
];

for (const c of cases) {
  test('shows error for ' + c.username, async ({ page }) => {
    await page.goto('https://www.saucedemo.com/');
    await page.getByPlaceholder('Username').fill(c.username);
    await page.getByPlaceholder('Password').fill('secret_sauce');
    await page.getByRole('button', { name: 'Login' }).click();
    await expect(page.locator('[data-test="error"]')).toContainText(c.error);
  });
}

3. Sending and checking an object in an API test

test('create a post via API', async ({ request }) => {
  const payload = { title: 'Playwright', body: 'Objects in TypeScript', userId: 1 };

  const response = await request.post('https://jsonplaceholder.typicode.com/posts', { data: payload });
  expect(response.status()).toBe(201);

  const body = await response.json();
  expect(body).toMatchObject(payload); // deep, partial object comparison
});

✅ Best Practices

• Give every reusable object shape a name with type or interface instead of repeating inline types.
• Mark values that must not change as readonly.
• Use optional properties ? only when a value can truly be missing, and handle undefined with ?? or ?..
• Keep test data objects in a separate file (for example test-data/users.ts) so tests stay short.
• Prefer toEqual or toMatchObject in Playwright assertions to compare objects.

❓ FAQ

🤔 What is the difference between an object type and an interface in TypeScript?

Both describe the shape of an object and are often interchangeable. Interfaces can be extended and merged, while type aliases can also describe unions and primitives. Read the full comparison in TypeScript Interfaces.

🤔 How do I define an array of objects in TypeScript?

Create a type for one item, then add []: type User = { name: string }; const users: User[] = [];. You can also write Array<User>.

🤔 How do I merge two objects in TypeScript?

Use the spread operator: const merged = { ...first, ...second };. Properties in second overwrite the same properties in first.

🤔 How do I make an object property optional?

Add a question mark after the property name, for example phone?: string. Its value can then be a string or undefined.

🤔 Why does TypeScript say “Property does not exist on type”?

You are using a property that is not part of the object’s type, usually because of a typo or a missing field in the type. Add it to the type (optionally with ?) or fix the spelling.

🎯 Next Steps

• 📘 TypeScript Interfaces: define reusable object shapes
• 📘 TypeScript Classes: build objects with behavior
• 📘 TypeScript Arrays
• 📘 TypeScript Functions
• 🎭 Playwright with TypeScript Training Notes: the full course roadmap

✎ Practise what you learned: 31 TypeScript object programs with solutions →

Arrays are everywhere in test automation — storing test data, collecting page elements, managing results. TypeScript arrays come with strong typing that catches bugs before your tests even run. This guide covers everything from basics to advanced patterns with Playwright examples.

📦 Declaring Arrays

// Two ways to declare typed arrays
let browsers: string[] = ['chromium', 'firefox', 'webkit'];
let scores: Array<number> = [85, 92, 78, 95];

// Mixed types with union
let mixed: (string | number)[] = ['hello', 42, 'world'];

// Empty array with type
let results: boolean[] = [];

// Array of objects
let users: { name: string; role: string }[] = [
  { name: 'Deepesh', role: 'SDET' },
  { name: 'John', role: 'QA Lead' },
];

// 2D array (matrix)
let grid: number[][] = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];

➕ Adding & Removing Elements

let fruits: string[] = ['apple', 'banana'];

// Add to end
fruits.push('cherry');           // ['apple', 'banana', 'cherry']

// Add to beginning
fruits.unshift('mango');         // ['mango', 'apple', 'banana', 'cherry']

// Remove from end
let last = fruits.pop();         // 'cherry', array: ['mango', 'apple', 'banana']

// Remove from beginning
let first = fruits.shift();      // 'mango', array: ['apple', 'banana']

// Remove/insert at position with splice
let colors: string[] = ['red', 'green', 'blue', 'yellow'];
colors.splice(1, 2);             // Remove 2 items from index 1 → ['red', 'yellow']
colors.splice(1, 0, 'purple');   // Insert at index 1 → ['red', 'purple', 'yellow']

// Find index and remove
let items = ['a', 'b', 'c', 'd'];
let idx = items.indexOf('c');
if (idx !== -1) items.splice(idx, 1);  // ['a', 'b', 'd']

🔍 Searching & Checking Arrays

let numbers: number[] = [10, 20, 30, 40, 50];

// includes — does it contain a value?
console.log(numbers.includes(30));  // true

// indexOf — find position (-1 if not found)
console.log(numbers.indexOf(40));   // 3

// find — first element matching condition
let found = numbers.find(n => n > 25);
console.log(found);  // 30

// findIndex — index of first match
let foundIdx = numbers.findIndex(n => n > 25);
console.log(foundIdx);  // 2

// every — do ALL elements match?
let allPositive = numbers.every(n => n > 0);    // true

// some — does ANY element match?
let hasLarge = numbers.some(n => n > 100);       // false

🔄 map, filter & reduce

let prices: number[] = [100, 200, 300, 400, 500];

// map — transform each element
let discounted = prices.map(p => p * 0.9);
console.log(discounted);  // [90, 180, 270, 360, 450]

// filter — keep elements matching condition
let expensive = prices.filter(p => p >= 300);
console.log(expensive);  // [300, 400, 500]

// reduce — combine all elements into one value
let total = prices.reduce((sum, p) => sum + p, 0);
console.log(total);  // 1500

// Chaining — filter + map + reduce
let premiumTotal = prices
  .filter(p => p >= 300)           // [300, 400, 500]
  .map(p => p * 1.1)               // [330, 440, 550]
  .reduce((sum, p) => sum + p, 0); // 1320
console.log(premiumTotal);

// flat — flatten nested arrays
let nested: number[][] = [[1, 2], [3, 4], [5]];
let flat = nested.flat();
console.log(flat);  // [1, 2, 3, 4, 5]

📌 Spread, Destructuring & Tuples

// Spread operator — copy and merge arrays
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let combined = [...arr1, ...arr2];    // [1, 2, 3, 4, 5, 6]
let copy = [...arr1];                 // [1, 2, 3] — independent copy

// Destructuring — extract values
let [first, second, ...rest] = [10, 20, 30, 40, 50];
console.log(first);  // 10
console.log(rest);   // [30, 40, 50]

// Tuple — fixed-length, typed array
let coord: [number, number] = [40.7128, -74.0060];
let entry: [string, number, boolean] = ['test-1', 95, true];

// Readonly array — cannot be modified
const readonlyBrowsers: readonly string[] = ['chromium', 'firefox', 'webkit'];
// readonlyBrowsers.push('edge');  // ❌ Error! Cannot modify

// Sorting
let nums = [30, 10, 50, 20, 40];
nums.sort((a, b) => a - b);          // [10, 20, 30, 40, 50] ascending
nums.sort((a, b) => b - a);          // [50, 40, 30, 20, 10] descending

🎭 Arrays in Playwright — Real Examples

import { test, expect } from '@playwright/test';

test('collect and verify all product names', async ({ page }) => {
  await page.goto('https://sqatools.in');
  
  // Collect all text content into an array
  const links = page.locator('nav a');
  const texts: string[] = await links.allTextContents();
  
  console.log('Navigation links:', texts);
  expect(texts.length).toBeGreaterThan(0);
  
  // Filter only links containing 'Playwright'
  const playwrightLinks = texts.filter(t => t.toLowerCase().includes('playwright'));
  console.log('Playwright links:', playwrightLinks);
});

// Data-driven testing with arrays
const testData: [string, string, boolean][] = [
  ['admin@test.com', 'admin123', true],
  ['invalid@test.com', 'wrong', false],
  ['', '', false],
];

for (const [email, password, shouldPass] of testData) {
  test(`login with ${email || 'empty'} should ${shouldPass ? 'pass' : 'fail'}`, async ({ page }) => {
    await page.goto('/login');
    await page.fill('#email', email);
    await page.fill('#password', password);
    await page.click('#submit');
    
    if (shouldPass) {
      await expect(page.locator('.dashboard')).toBeVisible();
    } else {
      await expect(page.locator('.error')).toBeVisible();
    }
  });
}

❓ FAQ

🎯 Next Steps

• 📘 TypeScript Operators
• 📘 TypeScript Loops
• 📘 TypeScript Functions
• 📘 TypeScript Objects
• 📘 TypeScript Interfaces
• 🎬 SqaToolsByDY on YouTube

✎ Practise what you learned: 31 TypeScript array and tuple programs with solutions →

Functions are the building blocks of clean, reusable code. In test automation, you’ll use them everywhere — from page actions to custom assertions to utility helpers. This guide covers every function pattern in TypeScript with real Playwright examples.

🔧 Function Declarations & Expressions

// Function declaration
function greet(name: string): string {
  return `Hello, ${name}!`;
}

// Function expression
const add = function(a: number, b: number): number {
  return a + b;
};

// Arrow function (most common in modern TypeScript)
const multiply = (a: number, b: number): number => a * b;

// Void function — returns nothing
function logMessage(msg: string): void {
  console.log(`[LOG]: ${msg}`);
}

console.log(greet('QA Engineer'));  // Hello, QA Engineer!
console.log(add(5, 3));            // 8
console.log(multiply(4, 7));       // 28

⚙️ Optional, Default & Rest Parameters

// Optional parameter (use ?)
function createUser(name: string, email?: string): string {
  return email ? `${name} (${email})` : name;
}
console.log(createUser('Deepesh'));                    // Deepesh
console.log(createUser('Deepesh', 'test@test.com'));   // Deepesh (test@test.com)

// Default parameter
function wait(ms: number = 1000): void {
  console.log(`Waiting ${ms}ms...`);
}
wait();      // Waiting 1000ms...
wait(3000);  // Waiting 3000ms...

// Rest parameters (variable number of args)
function logAll(...messages: string[]): void {
  messages.forEach((msg, i) => console.log(`${i + 1}. ${msg}`));
}
logAll('Step 1', 'Step 2', 'Step 3');

// Destructured parameters
function printConfig({ url, timeout = 30000 }: { url: string; timeout?: number }): void {
  console.log(`URL: ${url}, Timeout: ${timeout}`);
}
printConfig({ url: 'https://sqatools.in' });

📝 Function Types & Callbacks

// Type alias for a function
type Validator = (value: string) => boolean;

const isEmail: Validator = (value) => value.includes('@');
const isNotEmpty: Validator = (value) => value.trim().length > 0;

console.log(isEmail('test@test.com'));  // true
console.log(isNotEmpty(''));            // false

// Callback functions
function runValidation(input: string, validator: Validator, onResult: (passed: boolean) => void): void {
  const result = validator(input);
  onResult(result);
}

runValidation('hello@test.com', isEmail, (passed) => {
  console.log(passed ? '✅ Valid' : '❌ Invalid');
});

// Returning functions (higher-order)
function createMultiplier(factor: number): (n: number) => number {
  return (n) => n * factor;
}
const double = createMultiplier(2);
const triple = createMultiplier(3);
console.log(double(5));  // 10
console.log(triple(5));  // 15

🧬 Generic Functions

// Generic function — works with any type
function firstElement<T>(arr: T[]): T | undefined {
  return arr[0];
}

console.log(firstElement([1, 2, 3]));          // 1 (type: number)
console.log(firstElement(['a', 'b', 'c']));    // 'a' (type: string)

// Generic with constraint
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const user = { name: 'Deepesh', role: 'SDET' };
console.log(getProperty(user, 'name'));  // 'Deepesh'

// Generic async function
async function fetchData<T>(url: string): Promise<T> {
  const response = await fetch(url);
  return response.json() as Promise<T>;
}

⚡ Async Functions

// Async function returns a Promise
async function fetchTitle(url: string): Promise<string> {
  const response = await fetch(url);
  const html = await response.text();
  const match = html.match(/<title>(.*)<\/title>/);
  return match ? match[1] : 'No title found';
}

// Async arrow function
const delay = async (ms: number): Promise<void> => {
  return new Promise(resolve => setTimeout(resolve, ms));
};

// Try-catch in async functions
async function safeRequest(url: string): Promise<string | null> {
  try {
    const response = await fetch(url);
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return await response.text();
  } catch (error) {
    console.error('Request failed:', error);
    return null;
  }
}

🎭 Functions in Playwright — Real Examples

import { test, expect, Page } from '@playwright/test';

// Reusable login helper function
async function login(page: Page, email: string, password: string): Promise<void> {
  await page.goto('/login');
  await page.fill('#email', email);
  await page.fill('#password', password);
  await page.click('#login-btn');
  await expect(page.locator('.dashboard')).toBeVisible();
}

// Retry function for flaky operations
async function retry<T>(fn: () => Promise<T>, maxAttempts: number = 3): Promise<T> {
  for (let attempt = 1; attempt <= maxAttempts; attempt++) {
    try {
      return await fn();
    } catch (error) {
      if (attempt === maxAttempts) throw error;
      console.log(`Attempt ${attempt} failed, retrying...`);
      await new Promise(r => setTimeout(r, 1000));
    }
  }
  throw new Error('Should not reach here');
}

// Using helper functions in tests
test('login and verify dashboard', async ({ page }) => {
  await login(page, 'admin@sqatools.in', 'test123');
  await expect(page).toHaveTitle(/Dashboard/);
});

test('retry flaky element click', async ({ page }) => {
  await page.goto('https://sqatools.in');
  await retry(async () => {
    await page.click('.dynamic-button');
    await expect(page.locator('.result')).toBeVisible();
  });
});

❓ FAQ

🎯 Next Steps

• 📘 TypeScript Operators
• 📘 TypeScript Conditions
• 📘 TypeScript Loops
• 📘 TypeScript Arrays — Coming next!
• 🎬 SqaToolsByDY on YouTube

✎ Practise what you learned: 31 TypeScript function programs with solutions →

Loops let you repeat actions — whether it’s iterating through test data, checking multiple elements, or retrying flaky operations. This guide covers every loop type in TypeScript with real Playwright examples you’ll use daily in test automation.

🔁 for Loop

The classic loop — you control the start, end, and step.

// Basic for loop
for (let i: number = 0; i < 5; i++) {
  console.log('Iteration:', i);
}
// Output: 0, 1, 2, 3, 4

// Counting backwards
for (let i: number = 10; i > 0; i -= 2) {
  console.log(i);
}
// Output: 10, 8, 6, 4, 2

// Looping through an array by index
let browsers: string[] = ['chromium', 'firefox', 'webkit'];
for (let i = 0; i < browsers.length; i++) {
  console.log(`Browser ${i + 1}: ${browsers[i]}`);
}

🔄 while and do...while Loops

// while — checks condition BEFORE each iteration
let attempts: number = 0;
while (attempts < 3) {
  console.log(`Attempt ${attempts + 1}`);
  attempts++;
}

// do...while — runs at least ONCE, then checks condition
let input: string = '';
do {
  input = 'valid';  // simulating user input
  console.log('Processing input:', input);
} while (input === '');

// Retry pattern (common in test automation)
let retryCount: number = 0;
let success: boolean = false;
while (!success && retryCount < 3) {
  try {
    // attempt some operation
    success = true;
    console.log('Operation succeeded!');
  } catch {
    retryCount++;
    console.log(`Retry ${retryCount}/3`);
  }
}

🎯 for...of and for...in Loops

// for...of — iterate over VALUES (arrays, strings, maps)
let testCases: string[] = ['login', 'signup', 'checkout'];
for (const tc of testCases) {
  console.log('Running test:', tc);
}

// for...in — iterate over KEYS/INDICES (objects)
let config = { baseURL: 'https://sqatools.in', timeout: 30000, retries: 2 };
for (const key in config) {
  console.log(`${key}: ${config[key as keyof typeof config]}`);
}

// Iterating over a Map
let testData = new Map();
testData.set('user1', 'admin@test.com');
testData.set('user2', 'user@test.com');

for (const [key, value] of testData) {
  console.log(`${key} -> ${value}`);
}

📋 forEach and Array Methods

let scores: number[] = [85, 92, 78, 95, 88];

// forEach — run a function for each element
scores.forEach((score, index) => {
  console.log(`Student ${index + 1}: ${score}`);
});

// map — transform each element into a new array
let grades = scores.map(s => s >= 90 ? 'A' : s >= 80 ? 'B' : 'C');
console.log(grades);  // ['B', 'A', 'C', 'A', 'B']

// filter — keep only elements that match
let topScores = scores.filter(s => s >= 90);
console.log(topScores);  // [92, 95]

// find — get the first match
let firstTop = scores.find(s => s >= 90);
console.log(firstTop);  // 92

// every/some — check all or any
let allPassed = scores.every(s => s >= 60);   // true
let anyPerfect = scores.some(s => s === 100); // false

⏹️ break and continue

// break — exit the loop entirely
for (let i = 0; i < 10; i++) {
  if (i === 5) break;
  console.log(i);
}
// Output: 0, 1, 2, 3, 4

// continue — skip current iteration, go to next
for (let i = 0; i < 10; i++) {
  if (i % 2 === 0) continue;  // skip even numbers
  console.log(i);
}
// Output: 1, 3, 5, 7, 9

🎭 Loops in Playwright — Real Examples

import { test, expect } from '@playwright/test';

test('iterate through page elements', async ({ page }) => {
  await page.goto('https://sqatools.in');
  
  // Get all navigation links and verify each one
  const navLinks = page.locator('nav a');
  const count = await navLinks.count();
  
  for (let i = 0; i < count; i++) {
    const text = await navLinks.nth(i).textContent();
    const href = await navLinks.nth(i).getAttribute('href');
    console.log(`Link ${i + 1}: ${text} -> ${href}`);
    expect(href).not.toBeNull();
  }
});

// Data-driven test with for...of
const testUsers = [
  { email: 'admin@test.com', role: 'admin' },
  { email: 'user@test.com', role: 'user' },
  { email: 'guest@test.com', role: 'guest' },
];

for (const user of testUsers) {
  test(`login as ${user.role}`, async ({ page }) => {
    await page.goto('/login');
    await page.fill('#email', user.email);
    await page.fill('#password', 'test123');
    await page.click('#login-btn');
    await expect(page.locator('.role-badge')).toHaveText(user.role);
  });
}

❓ FAQ

🎯 Next Steps

• 📘 TypeScript Operators
• 📘 TypeScript Conditions
• 📘 TypeScript Functions — Write reusable code
• 🎬 SqaToolsByDY on YouTube

✎ Practise what you learned: 30 TypeScript loop programs with solutions →