Understand browser, context, and page in Playwright

🎥 Playwright: Browser, Context & Page - Real-time Demo and Multi-User Testing

 .

---

🎯 Goal: Understand browser, context, and page in Playwright

---

🧠 1. What is a browser?

✅ Definition:

A browser in Playwright is a launched instance of a real browser (Chromium, Firefox, WebKit) that can be used for automated testing.

✅ Purpose:

• It starts and controls the browser process.

• It is the root of your test execution.

• Required to create contexts and pages.

✅ Code Example:

ts
import { chromium } from 'playwright';

const browser = await chromium.launch({ headless: false });

---

🧠 2. What is a context (browser context)?

✅ Definition:

A context is like a separate browser profile (or incognito tab) inside the browser. Each context is isolated — no cookies, local storage, or sessions are shared.

✅ Purpose:

• Simulates multiple users or sessions.

• Enables parallel and isolated testing.

• Allows setting user-specific preferences (geo, locale, permissions).

✅ Code Example:

ts
const context = await browser.newContext(); // new user session

You can have multiple contexts in one browser instance.

---

🧠 3. What is a page?

✅ Definition:

A page is a tab or window inside a context. It’s where all browser interactions happen — like navigating, clicking, typing, or making assertions.

✅ Purpose:

• Used to interact with the web app under test.

• Simulates a user's browser tab.

✅ Code Example:

ts
const page = await context.newPage(); // open a new tab
await page.goto('https://example.com');
await page.click('#login');

---

🔄 Full Flow Summary: browser ➝ context ➝ page

css
[Browser] ➝ [Context] ➝ [Page]
   🧠            🧍‍♂️            🖥️
Launch     Isolated Session   Interact with App

---

💡 Real Example: Login Flow

ts
import { chromium } from 'playwright';

(async () => {
  // Step 1: Launch browser
  const browser = await chromium.launch({ headless: false });

  // Step 2: Create a context (isolated session)
  const context = await browser.newContext();

  // Step 3: Open a page (tab)
  const page = await context.newPage();

  // Step 4: Interact with the page
  await page.goto('https://example.com/login');
  await page.fill('#username', 'testuser');
  await page.fill('#password', 'password123');
  await page.click('text=Login');

  // Step 5: Assert login success
  await page.waitForSelector('#dashboard');

  // Step 6: Close browser
  await browser.close();
})();

---

🧪 Why Use context?

Let’s say you want to test multiple users in parallel:

ts
const user1 = await browser.newContext();
const user2 = await browser.newContext();

// user1 logs in
const page1 = await user1.newPage();
await page1.goto('/login');
// ...

// user2 logs in
const page2 = await user2.newPage();
await page2.goto('/login');
// ...

Each context has its own storage — like two separate incognito windows!

---

✅ Key Takeaways

Term	Description	Real-Life Analogy
browser	Browser instance (e.g., Chromium)	Opening Chrome manually
context	Separate, isolated browser profile/session	A new incognito window
page	A tab or window to interact with the site	A single tab in the browser