---
title: Playwright Core Concepts
description: "**Playwright Core Concepts** **What is **Synchronous (Sync)?**** **Meaning**: Code runs **line by line**, one statement must finish **before** the next starts. **In JS**: JavaScript itself is *single-threaded*, so normally code runs synchronously. **In Playwright**: Sync style isn’t natively supported in…"
url: "https://vinothqaacademy.com/docs/playwright-core-concepts/"
updated: "2025-09-11"
category: Playwright
tags:
  - Playwright Tutorials
---

# Playwright Core Concepts

**Playwright Core Concepts**

**What is **Synchronous (Sync)?****

**Meaning**: Code runs **line by line**, one statement must finish **before** the next starts.

**In JS**: JavaScript itself is *single-threaded*, so normally code runs synchronously.

**In Playwright**: Sync style isn’t natively supported in Node.js because Playwright APIs are **asynchronous** (they interact with browsers, networks, etc.). But some languages (like Python/Java/.NET) provide synchronous versions of Playwright.

**What is **Asynchronous (Async)?****

**Meaning**: Code doesn’t wait for the previous line to finish — it can continue executing while waiting for promises to resolve.

**In Playwright**: All browser operations (click, fill, goto, waitFor, etc.) return **Promises**. You must use `async/await` to ensure they complete in order.

**Why**: Because actions like page load, button click, or locator finding take time and depend on the browser.

****What is **`await ?`**

`await` is a **JavaScript keyword** used **inside**`async`**functions**.

It **pauses** the function execution until a **Promise** is resolved (success) or rejected (error).

In Playwright, since every browser action (`goto`, `click`, `fill`, etc.) returns a **Promise**, `await` makes sure the step is **completed before moving to the next**.

******Why**`await`**is needed in Playwright******?

Playwright commands are **asynchronous** (they talk to a real browser, which takes time). Without `await`, your test would not wait and would jump to the next step too early.

**Example With**`await`

```javascript

                  await page.goto('https://vinothqaacademy.com/');   // Waits until page fully loads
  await page.click('#login');               // Waits until button click is done
  const title = await page.title();         // Waits until title is fetched
  console.log(title);
```

******What is Arrow function ?******

An **arrow function** is a **shorter syntax** for writing functions in JavaScript.
Introduced in **ES6 (ECMAScript 2015)**, it makes functions **cleaner and more concise**.

```javascript

                // Normal function
function greet(name) {
  return "Hello " + name;
}

// Arrow function
const greet = (name) => {
  return "Hello " + name;
};

// Simplified (One-Line) Arrow Function
const greet = (name) => "Hello " + name;
```

**Arrow Function in Playwright**

```javascript

                test('Launch example', async ({ page }) => {
  await page.goto('https://vinothqaacademy.com/');
  await page.click('#login');               // Waits until button click is done
  const title = await page.title();         // Waits until title is fetched
  console.log(title);
});
```

- ()=> = Arrow Function (short-hand way to write a function).
- Common in **Playwright test blocks, callbacks, promises**.
- Cleaner, modern way compared to function() { ... }.