2. JavaScript & TypeScript Fundamentals

JavaScript Crash Course (3 Hours)

Variables & Data Types

// let, const, var
let name = 'Playwright';
const version = 1.48;
var legacy = 'avoid';

// Data types: string, number, boolean, null, undefined, object, array
let isRunning = true;
let count = 42;
let tags = ['e2e', 'api', 'visual'];

Functions & Arrow Functions

function add(a, b) { return a + b; }
const multiply = (a, b) => a * b;

// Async/await (critical for Playwright)
async function fetchData() {
  const response = await fetch('https://api.example.com');
  return response.json();
}

Promises & Async Patterns

// Playwright heavily uses async/await
test('example', async ({ page }) => {
  await page.goto('https://example.com');
  await expect(page.locator('h1')).toBeVisible();
});

TypeScript Basics

// Type annotations
let url: string = 'https://example.com';
let items: number[] = [1, 2, 3];

interface User {
  id: number;
  name: string;
  email?: string; // optional
}

async function getUser(id: number): Promise<User> {
  const res = await fetch(`/api/users/${id}`);
  return res.json();
}