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 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.
// 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
test('Launch example', async ({ page }) => {
await page.goto('https://example.com');
});
- ()=> = Arrow Function (short-hand way to write a function).
- Common in Playwright test blocks, callbacks, promises.
- Cleaner, modern way compared to function() { … }.
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
test('With await', async ({ page }) => {
await page.goto('https://example.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);
});
