Browsers, Contexts, and Pages
Playwright's object model has three layers: a Browser (a running instance of Chromium, Firefox, or WebKit), a BrowserContext (an isolated session within that browser, comparable to an incognito profile), and a Page (a single tab within a context). Understanding this hierarchy matters because it determines what state is shared and what is isolated — cookies, localStorage, and cache live at the context level, so two pages opened from the same context share a login session, while two pages from different contexts are completely isolated even if they're running inside the same physical browser process.
Cricket analogy: It's like a stadium (Browser) hosting several separate box seats (contexts) for the day, where everyone sitting in the same box shares a scorecard and snacks, but two different boxes have no idea what's happening in each other's.
Creating and Reusing Contexts
In code, you call browser.newContext() to create an isolated session, then context.newPage() to open a tab inside it; you can call newPage() multiple times on one context to simulate multiple tabs sharing the same login. A common pattern is to save authentication state once with context.storageState({ path: 'auth.json' }) after logging in, then reuse it in future tests via browser.newContext({ storageState: 'auth.json' }), which skips a slow UI login flow on every single test and dramatically speeds up a large suite.
Cricket analogy: It's like a player completing a fitness assessment once at the start of a tour and reusing that clearance for every subsequent match, rather than repeating the full medical test before each game.
Why Isolation Matters for Test Reliability
Because each BrowserContext starts with a clean slate, tests run inside separate contexts cannot leak cookies, cached responses, or logged-in state into one another, which is what makes it safe to run hundreds of tests in parallel across multiple workers without one test's login accidentally affecting another test's expectations. This is a meaningful improvement over patterns from older Selenium suites, where developers often had to manually clear cookies or spin up a brand-new WebDriver instance between tests just to guarantee isolation, both of which are slower than Playwright's lightweight in-process context creation.
Cricket analogy: It's like every batter walking out to a freshly rolled pitch instead of one worn down by the previous ten overs, so no player's innings is unfairly affected by what happened before them.
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
// Two isolated sessions from one browser process
const adminContext = await browser.newContext();
const guestContext = await browser.newContext();
const adminPage = await adminContext.newPage();
await adminPage.goto('https://example.com/login');
// ... perform login ...
await adminContext.storageState({ path: 'admin-auth.json' });
// Reuse saved auth state in a later run, skipping the login UI
const reusedContext = await browser.newContext({ storageState: 'admin-auth.json' });
const dashboardPage = await reusedContext.newPage();
await dashboardPage.goto('https://example.com/dashboard');
await browser.close();
})();The Playwright Test runner (@playwright/test) automatically creates a brand-new context and page for every single test function by default, so you rarely need to call browser.newContext() manually — you get isolation for free unless you deliberately opt into a shared context.
- Playwright's model has three layers: Browser (the engine process), BrowserContext (an isolated session), and Page (a tab).
- Cookies, localStorage, and cache are scoped to the BrowserContext, not the whole Browser.
- Multiple pages within one context share login state, like multiple tabs in the same incognito window.
context.storageState()saves auth state to reuse across tests, avoiding repeated UI logins.- Fresh contexts per test give full isolation without the overhead of launching a new browser process each time.
- The Playwright Test runner auto-creates an isolated context and page per test by default.
Practice what you learned
1. In Playwright's object model, what does a BrowserContext most closely correspond to?
2. If two Pages are created from the same BrowserContext, what do they share?
3. What is the purpose of `context.storageState({ path: 'auth.json' })`?
4. Why is creating a new BrowserContext for each test cheaper than launching a new browser process per test?
5. By default, what does the @playwright/test runner provide for each test function?
Was this page helpful?
You May Also Like
What Is Playwright?
An introduction to Playwright, Microsoft's cross-browser automation and end-to-end testing framework, and why teams choose it over older tools.
Your First Playwright Test
Writing, running, and understanding a first real Playwright test, from locators and actions to assertions and the HTML report.
Installing Playwright and Project Setup
A practical walkthrough of installing Playwright, understanding what gets set up, and structuring a new test project.