JavaScript for Testers — The 20% That Powers Every Test

// Use const by default; let only when you reassign
const url = 'https://example.com';
let attempts = 0;
attempts = attempts + 1;

// Primitive types
const name: string = 'Ada';
const price: number = 19.99;
const inStock: boolean = true;
const missing: null = null;
const nothing: undefined = undefined;

// Array of test data
const users = ['ada@a.co', 'lin@b.co', 'ken@c.co'];
users.length;                 // 3
users[0];                     // 'ada@a.co'
users.push('new@d.co');       // add
users.includes('lin@b.co');   // true

// The three you'll use constantly
users.map(u => u.toUpperCase());
users.filter(u => u.endsWith('.co'));
users.find(u => u.startsWith('ken'));

// Object = key/value bag (a JSON row)
const product = {
  id: 42,
  title: 'Blue Widget',
  price: 9.99,
  tags: ['new', 'sale'],
};
product.title;               // 'Blue Widget'
product['price'];            // 9.99
Object.keys(product);        // ['id','title','price','tags']

// Classic function
function add(a: number, b: number) {
  return a + b;
}

// Arrow function — same thing, shorter
const add2 = (a: number, b: number) => a + b;

// Multi-line arrow
const login = async (page, email: string, password: string) => {
  await page.goto('/login');
  await page.getByLabel('Email').fill(email);
  await page.getByLabel('Password').fill(password);
  await page.getByRole('button', { name: 'Sign in' }).click();
};

// Every Playwright test file starts with this
import { test, expect } from '@playwright/test';

// Object destructuring in test callbacks
test('checkout works', async ({ page, request, context }) => {
  // page, request, context pulled from fixtures object
});

// Array destructuring
const [first, second] = ['a', 'b', 'c'];

// Spread — clone and extend
const base = { headless: true };
const opts = { ...base, slowMo: 100 };

test('waits properly', async ({ page }) => {
  await page.goto('/');                              // 1. wait for nav
  await page.getByRole('link', { name: 'Docs' }).click();  // 2. wait for click
  await expect(page).toHaveURL(/docs/);              // 3. wait for URL
});

// Parallel awaits — start both, wait for both
const [resp1, resp2] = await Promise.all([
  page.waitForResponse('**/api/user'),
  page.getByRole('button', { name: 'Refresh' }).click(),
]);

// lib/api.ts — export
export async function createUser(email: string) { /* ... */ }
export const BASE_URL = 'https://api.example.com';

// tests/user.spec.ts — import
import { createUser, BASE_URL } from '../lib/api';
import { test } from '@playwright/test';   // 3rd-party from npm

test('signs up a user', async () => {
  await createUser('demo@example.com');
});

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

type Product = { name: string; qty: number };

const items: Product[] = [
  { name: 'Blue Widget', qty: 2 },
  { name: 'Red Gadget', qty: 1 },
];

test('adds multiple items to cart', async ({ page }) => {
  await page.goto('/shop');

  for (const { name, qty } of items) {
    const card = page.getByRole('article', { name });
    for (let i = 0; i < qty; i++) {
      await card.getByRole('button', { name: 'Add to cart' }).click();
    }
  }

  const totalItems = items.reduce((sum: number, i: Product) => sum + i.qty, 0);
  await expect(page.getByTestId('cart-badge')).toHaveText(String(totalItems));
});