What is the difference between page and context?

The Answer

A `Page` is a single browser tab/window. A `BrowserContext` is the isolated session container that holds multiple pages. The context controls shared state (cookies, permissions, storage) across all its pages.

Deep Dive Explanation

Think of Context as the user session and Page as the browser tab. One session can have many tabs. This architecture is what enables Playwright's powerful multi-tab testing without the overhead of launching a new browser.

example.spec.ts

// Context -> Page relationship
const context = await browser.newContext({
  baseURL: 'https://app.com',
  storageState: 'auth.json',     // Applied to ALL pages in this context
  viewport: { width: 1280, height: 720 },
  permissions: ['geolocation'],
});

const page1 = await context.newPage(); // Tab 1 - shares context cookies
const page2 = await context.newPage(); // Tab 2 - shares same session

// Cookie set in page1 is visible in page2
await page1.goto('/set-cookie');
await page2.goto('/read-cookie'); // Can read it