Browser, Browser Context, and Page Explanation

To understand how Playwright works internally, we first need to understand three key components:

1. Browser
2. Browser Context
3. Page

These three objects form the foundation of all UI automation in Playwright. Understanding these concepts helps you design efficient and scalable test executions.

Browser

A Browser represents an actual browser engine instance such as:

- Chromium (Google Chrome / Microsoft Edge)
- Firefox
- WebKit (Safari)

When Playwright launches a browser, it can run in one of the following modes:

1. Headless mode: Runs without a UI, executes faster, and is commonly used in CI/CD pipelines
2. Headed mode: Runs with a visible UI, useful for debugging and test development

Playwright Code to Launch a Browser

// Import browser engine
const { chromium } = require('@playwright/test');

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

Launching a full browser instance is resource-heavy. To avoid opening multiple browsers, Playwright encourages the use of browser contexts.

Browser Context

A Browser Context is one of Playwright’s biggest advantages over other automation tools. It represents an isolated browser session inside a single browser instance, similar to Incognito Mode.

Key Features of Browser Context

- Each context has isolated cookies, cache, and local storage
- In Playwright, each test runs in its own browser context, so tests do not interfere with each other
- Allows simulating multiple users within a single browser instance
- Creating a browser context is faster than launching a new browser

Playwright Code to Create a Browser Context:

const context = await browser.newContext();

Two Browser Contexts in One Browser

This approach is extremely useful for multi-user scenarios.

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

Each context has its own isolated session, so there are no login or data conflicts.

Page

A Page is similar to a browser tab.

Creating a Page

const page = await context.newPage();

The web application actually loads inside the page. All user interactions such as clicking, typing, filling forms, dragging, and navigation are performed using the page object.

Open a Website Using Page

await page.goto('https://example.com');

Putting It All Together

The following script launches a browser, creates a browser context, opens a page, and navigates to a website:

const { chromium } = require('@playwright/test');

(async () => {
const browser = await chromium.launch();
const context = await browser.newContext();
const page = await context.newPage();

await page.goto('https://google.com');
await browser.close();
})();

In real Playwright tests, we usually don’t create the browser, context, and page manually. Playwright fixtures automatically provide a ready-to-use page, handling browser launch, context creation, and cleanup for us.

We will learn about Playwright fixtures in detail in an upcoming tutorial, including how they simplify test code and improve test maintainability.

Browser, Browser Context, and Page Explanation

Related Tutorials

Related Tutorials

Browser, Browser Context, and Page Explanation

Related Tutorials

Related Tutorials

Subscribe