Explain Browser, BrowserContext and Page in Playwright. Why do contexts matter for test isolation?

Playwright has a three-level object model. A Browser is a launched browser instance (Chromium, Firefox or WebKit). A BrowserContext is an isolated session inside that browser, similar to a fresh incognito profile: it has its own cookies, local storage, session storage, cache and permissions. A Page is a single tab (or popup window) inside a context. Contexts are cheap to create, typically milliseconds, which is what makes full isolation per test practical.

How Playwright Test uses them

In @playwright/test, the built-in fixtures map directly onto this model:

• browser: worker-scoped, launched once per worker process and reused across tests.
• context: test-scoped, a brand-new context for every test.
• page: a new page in that context.

So each test starts with no cookies and empty storage, even though the browser process is shared. Tests cannot leak login state or cached data into each other, which removes a whole class of order-dependent flakiness. Context options such as viewport, locale, timezoneId, geolocation, permissions and storageState are set per context, usually through use in the config or test.use().

import { test, expect } from '@playwright/test';

test.use({ locale: 'de-DE', timezoneId: 'Europe/Berlin' });

test('shows prices in euros', async ({ page }) => {
  await page.goto('/products/1');
  await expect(page.getByTestId('price')).toContainText('€');
});

Multi-user scenarios

Because contexts are isolated, one test can drive two users at once, for example a chat or an approval workflow:

test('admin approval appears for the requester', async ({ browser }) => {
  const adminContext = await browser.newContext({ storageState: 'playwright/.auth/admin.json' });
  const userContext = await browser.newContext({ storageState: 'playwright/.auth/user.json' });
  const adminPage = await adminContext.newPage();
  const userPage = await userContext.newPage();

  await userPage.goto('/requests/new');
  await userPage.getByLabel('Reason').fill('New laptop');
  await userPage.getByRole('button', { name: 'Submit' }).click();

  await adminPage.goto('/approvals');
  await adminPage.getByRole('row', { name: /New laptop/ }).getByRole('button', { name: 'Approve' }).click();

  await userPage.goto('/requests');
  await expect(userPage.getByRole('row', { name: /New laptop/ })).toContainText('Approved');

  await adminContext.close();
  await userContext.close();
});

Contexts you create yourself must be closed by you; the built-in context is closed automatically.

Pages: tabs and popups

A link with target="_blank" opens a new page in the same context, sharing its cookies:

const popupPromise = page.waitForEvent('popup');
await page.getByRole('link', { name: 'Open invoice' }).click();
const invoice = await popupPromise;
await expect(invoice).toHaveURL(/\/invoices\//);

Start waiting before the click so the event cannot be missed.

Compared with Selenium

In Selenium, a new isolated session usually means a new WebDriver, which means a new browser process: slow, so suites often share sessions and fight leaked state. Playwright’s cheap contexts make “fresh session per test” the default rather than a costly option.

What interviewers look for

• Correct hierarchy: Browser contains contexts, contexts contain pages.
• What a context isolates (cookies, storage, cache, permissions).
• Fixture scopes: worker-scoped browser, test-scoped context and page.
• A multi-user or popup example.