Day 11 of 100: Destructuring — The { page } in Every Playwright Test

Day 11 of 100 — 100 Days of Playwright with TypeScript Challenge. Phase: JavaScript Fundamentals. JavaScript (Days 1-33) → TypeScript (Days 34-63) → Playwright (Days 64-96) → AI Framework Capstone (Days 97-100).

🎭 Want to master this with real projects? Join the Playwright Automation Mastery course at The Testing Academy.

---

Ever wonder what async ({ page }) means? Destructuring. Playwright’s API is built on it.

Object Destructuring

const config = { baseUrl: 'http://localhost', timeout: 30000, retries: 2 };

const { baseUrl, timeout } = config;
// instead of: const baseUrl = config.baseUrl;

// Rename while extracting
const { baseUrl: url } = config;

// Defaults for missing keys
const { headless = true } = config;

This IS Playwright’s Signature

// Playwright passes a fixtures object to your test.
// You destructure what you need:
// test('x', async ({ page, request, context }) => { ... })
//                  ^^^^^^^^^^^^^^^^^^^^^^^^^ destructuring

function runTest({ page, request }) {
  console.log('got page and request fixtures');
}
runTest({ page: 'pageObj', request: 'reqObj', extra: 'ignored' });

Array Destructuring

const [first, second] = ['chromium', 'firefox', 'webkit'];
// first='chromium', second='firefox'

// Swap without temp
let a = 1, b = 2;
[a, b] = [b, a];

Nested and Function Params

const { address: { city } } = { address: { city: 'Pune' } };

function createUser({ name, role = 'viewer' }) {
  return name + ':' + role;
}
createUser({ name: 'Jane' }); // 'Jane:viewer'

Tomorrow (Day 12): String methods — parsing text content and URLs.