2. Functions, Arrow Syntax & Modern Operators

Function Declarations vs Arrow Functions

In Playwright test scripts, you will write arrow functions everywhere:

// Arrow function:
const buildUrl = (path: string): string => {
  return https://targetqa.com${path};
};

Template Literals (${value})

Use backticks (`) instead of string concatenation (+) to interpolate dynamic test data: <pre class="my-3 rounded-[6px] bg-gray-100 dark:bg-zinc-800 p-3 text-xs font-mono text-gray-900 dark:text-zinc-100 overflow-x-auto border border-gray-200 dark:border-zinc-700"><code>const userId = 104; const locator = //div[@data-user-id='${userId}'];</code></pre>

Destructuring (Array & Object)

Playwright passes test fixtures using object destructuring: <pre class="my-3 rounded-[6px] bg-gray-100 dark:bg-zinc-800 p-3 text-xs font-mono text-gray-900 dark:text-zinc-100 overflow-x-auto border border-gray-200 dark:border-zinc-700"><code>// Destructuring object properties: const user = { username: &quot;admin&quot;, role: &quot;lead&quot;, timeout: 5000 }; const { username, role } = user;

// Array destructuring:
const [firstItem, secondItem] = [&quot;Chromium&quot;, &quot;Firefox&quot;];</code></pre>

Spread (...) & Rest (...rest) Operators

<pre class="my-3 rounded-[6px] bg-gray-100 dark:bg-zinc-800 p-3 text-xs font-mono text-gray-900 dark:text-zinc-100 overflow-x-auto border border-gray-200 dark:border-zinc-700"><code>// Spread: copies or merges objects/arrays const baseConfig = { headless: true, timeout: 30000 }; const testConfig = { ...baseConfig, browser: &quot;firefox&quot; };

// Rest: collects remaining arguments into an array
function logSteps(testName: string, ...steps: string[]) {
console.log(Running ${testName} with ${steps.length} steps`);
}