16. Browser Hierarchy: Browser vs Context vs Page

The Hierarchy Explained

Browser (1 Heavy OS Process, e.g. Chromium)
  ├── BrowserContext 1 (Isolated incognito profile: cookies, cache, storage)
  │     ├── Page 1 (Tab / Window)
  │     └── Page 2 (Second Tab)
  └── BrowserContext 2 (Totally independent user session, e.g. Admin vs Buyer)
        └── Page 1

---

Context Isolation in Playwright Test

By default, every single test receives a fresh page fixture. Behind the scenes: 1. Playwright creates a new BrowserContext in under 20ms. 2. Creates a Page inside it. 3. Closes the context when the test finishes. 4. Zero state leak between tests!

---

Manual Multi-User Session Testing

import { test } from "@playwright/test";
test("multi-user chat interaction", async ({ browser }) => {
  // User 1: Alice
  const aliceContext = await browser.newContext();
  const alicePage = await aliceContext.newPage();
  await alicePage.goto("https://chat.targetqa.com");
  await alicePage.fill("#msg", "Hello Bob!");
  await alicePage.click("#send");
// User 2: Bob (Completely isolated storage and cookies!)
  const bobContext = await browser.newContext();
  const bobPage = await bobContext.newPage();
  await bobContext.grantPermissions(["notifications"]);
  await bobPage.goto("https://chat.targetqa.com");
// Verify Bob received message
  await bobPage.getByText("Hello Bob!").waitFor();
await aliceContext.close();
  await bobContext.close();
});