Object destructuring

The ({ page }) pattern you'll see in every Playwright test — explained.

Lesson 1.17of 24

Step 1

The idea

When a function returns an object, you often only need one or two properties from it. Without destructuring, you'd write:

const user = getUser();
const name = user.name;
const email = user.email;

Destructuring does the same thing in one line:

const { name, email } = getUser();

You're telling JavaScript: "open this object and pull out these specific properties." Cleaner, shorter, same result.

Step 2

See it run

Output

Name: Priya Sharma
Email: priya@example.com
Browser: chromium
Timeout: 30000
First URL: https://example.com
Second URL: https://playwright.dev

destructuring.js

// Object destructuring
const user = {
  name: "Priya Sharma",
  email: "priya@example.com",
  role: "admin",
  age: 28,
};

const { name, email } = user;
console.log("Name:", name);
console.log("Email:", email);

// Rename while destructuring (: newName)
const config = { browser: "chromium", headless: true, timeout: 30000 };
const { browser, timeout: maxWait } = config;
console.log("Browser:", browser);
console.log("Timeout:", maxWait);

// Array destructuring — same idea but with position, not keys
const urls = ["https://example.com", "https://playwright.dev", "https://google.com"];
const [firstUrl, secondUrl] = urls;
console.log("First URL:", firstUrl);
console.log("Second URL:", secondUrl);

Terminal

$ node destructuring.js

Step 3

Now you try

Destructure this object to get title and price in one line, then print them:

const product = {
  id: 101,
  title: "Wireless Mouse",
  price: 24.99,
  inStock: true,
  category: "Electronics",
};

// Write: const { ?, ? } = product;
// Then console.log both

Bonus: rename price to cost during destructuring and log cost.

Step 4

Why a tester cares

Destructuring makes working with API responses and complex objects much cleaner. Here's a real-world example — processing an order response:

order.js

const orderResponse = {
  orderId: "ORD-9821",
  status: "confirmed",
  customer: { name: "Priya Sharma", email: "priya@example.com" },
  items: [
    { product: "Wireless Mouse", qty: 1, price: 599 },
    { product: "USB Hub",        qty: 2, price: 349 },
  ],
  shipping: { method: "express", estimatedDays: 2 },
};

// Without destructuring — repetitive
// console.log(orderResponse.orderId);
// console.log(orderResponse.customer.name);

// With destructuring — clean and readable
const { orderId, status, customer: { name, email }, items, shipping: { estimatedDays } } = orderResponse;

console.log(`Order ${orderId} is ${status}`);
console.log(`Customer: ${name} (${email})`);
console.log(`Estimated delivery: ${estimatedDays} days`);
console.log(`Items ordered: ${items.length}`);

// Array destructuring on items
const [firstItem, secondItem] = items;
console.log(`First item: ${firstItem.product}`);

Terminal

$ node order.js

Real API responses look exactly like this — deeply nested objects with many fields. Destructuring lets you pull out exactly what you need in one line.

Recap

3 key points

1const { a, b } = obj — pull out named properties from an object in one line.
2const { a: renamed } = obj — destructure and rename at the same time.
3const [first, second] = array — destructure an array by position.

Up next

Lesson 1.18 ★ — Mini Playwright Win

try / catch

Mini Playwright Win ★