Understanding Destructuring in JavaScript with Playwright

When learning Playwright, one of the first things you will notice is this syntax:

test('my test', async ({ page }) => {
  await page.goto('https://example.com');
});

At first, this part may look confusing:

{ page }

This is called destructuring.

What Is Destructuring?

Destructuring is a JavaScript and TypeScript feature that allows us to unpack values from objects or arrays and assign them to variables in a shorter way.

In simple words, destructuring means:

Taking values out of an object or array and storing them directly in variables.

Object Destructuring

Let’s say we have this object:

const user = {
  name: 'John',
  role: 'SDET',
  experience: 5
};

Normally, we access values like this:

const name = user.name;
const role = user.role;

Using destructuring, we can write:

const { name, role } = user;

This creates two variables:

name
role

So this:

const { name, role } = user;

is the same as:

const name = user.name;
const role = user.role;

Destructuring in Playwright

In Playwright, test functions receive fixtures from Playwright.

Example:

test('my test', async ({ page }) => {
  await page.goto('https://example.com');
});

Playwright internally provides a fixture object that contains values like:

{
  page,
  browser,
  context,
  request
}

When we write:

async ({ page }) => {

we are saying:

From the fixture object, take the page property and give it to me as a variable.

Without destructuring, the same idea would look like this:

test('my test', async (fixtures) => {
  await fixtures.page.goto('https://example.com');
});

With destructuring, it becomes cleaner:

test('my test', async ({ page }) => {
  await page.goto('https://example.com');
});

Destructuring Multiple Fixtures

We can also destructure more than one fixture:

test('use multiple fixtures', async ({ page, browser, context }) => {
  await page.goto('https://example.com');
});

This means:

const page = fixtures.page;
const browser = fixtures.browser;
const context = fixtures.context;

Array Destructuring

Destructuring also works with arrays.

Example:

const browsers = ['chromium', 'firefox', 'webkit'];

const [firstBrowser, secondBrowser] = browsers;

console.log(firstBrowser);  // chromium
console.log(secondBrowser); // firefox

Here, values are extracted based on position.

This:

const [firstBrowser, secondBrowser] = browsers;

is similar to:

const firstBrowser = browsers[0];
const secondBrowser = browsers[1];

Why Is Destructuring Useful?

Destructuring is useful because it:

• Makes code shorter

• Improves readability

• Reduces repeated object access

• Makes Playwright test code cleaner

• Helps us directly access only the values we need

Interview Definition

If asked in an SDET interview, you can say:

Destructuring is a JavaScript or TypeScript syntax that allows us to extract values from arrays or properties from objects and assign them to variables. In Playwright, the test callback receives a fixture object, and we use object destructuring like { page } to directly access the page fixture instead of writing fixtures.page.

Example

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

test('verify example page title', async ({ page }) => {
  await page.goto('https://example.com');

  await expect(page).toHaveTitle(/Example Domain/);
});

In this test:

{ page }

is object destructuring.

It extracts the page fixture provided by Playwright and allows us to use it directly inside the test.