Browser Contexts, Pages, and Emulation

By Syncfusion®, Inc. · Last updated November 13, 2026

The browser, context and page hierarchy, how contexts isolate tests, creating contexts for multi-user tests, working with several pages, popups and new windows, setting the viewport and emulating devices, locale, timezone, geolocation and permissions, colour scheme, reduced motion, user agent and disabling JavaScript.

Browser Contexts, Pages, and Emulation

• So far, each test had one page in one browser context. Real apps need more.
• A chat needs two users at once. A link opens a new tab. A shop must work on a phone and in other countries.
• In this lesson, you will create contexts and pages yourself, and make the browser pretend to be other devices and places.

Simple lesson: contexts give you separate users, pages give you tabs, emulation gives you other devices and places.

A Real-World Example

• The Practice Shop has a support chat. Asha writes, and Ben, the support agent, must see her message.
• One browser context per person, like two different computers. Both open the chat.

• Open the Browser tab after the run. Each page has its own tab at the top.

What You Will Learn

1. The browser, context and page hierarchy.
2. How contexts keep tests apart, and how to make more contexts.
3. Working with several pages, popups and new windows.
4. Viewports and device emulation.
5. Locale, time zone, geolocation and permissions.
6. Colour scheme, reduced motion, user agent and JavaScript.

Browser Contexts

Browser, Context and Page Hierarchy

• Browser: one running browser program.
• Context: a private, separate session inside it, like an incognito window.
• Page: one tab inside a context.

How Playwright Isolates Tests with Contexts

• Each test gets a new context. Cookies, local storage and logins from one test never reach another.
• New contexts are cheap. Playwright makes thousands of them while starting the browser only once per worker.

Creating Contexts with browser.newContext()

• Ask for the browser fixture, then call browser.newContext().
• Pass options to it: browser.newContext({ locale: 'fr-FR' }).
• In Playwright Test, new contexts also get the use options from your config, such as baseURL.
• Close contexts you create yourself with context.close().

Multiple Contexts for Multi-User Tests

• Use one context per user: a buyer and a seller, an admin and a customer, two chat users.

Simple lesson: one context per user. Contexts never share cookies or storage.

Pages and Tabs

Creating Pages with context.newPage()

• context.newPage() opens a new tab in a context. Tabs in the same context share cookies and storage.

Working with Multiple Pages

• context.pages() lists all open tabs. Use each page object to act in that tab.

Popups and New Windows

• A link with target="_blank" opens a popup. Wait for it with page.waitForEvent('popup').
• Start waiting before the click, then await the promise after it:

const popupPromise = page.waitForEvent('popup');
await page.getByRole('link', { name: 'Size guide' }).click();
const popup = await popupPromise;

• context.waitForEvent('page') catches any new tab in the context, not only popups from one page.

bringToFront() and Closing Pages

• page.bringToFront() makes a tab the active one, like clicking it.
• page.close() closes a tab. Closing the context closes all its tabs.

Simple lesson: wait for a popup with waitForEvent('popup'), started before the click.

Viewport and Devices

Setting the Viewport

• The viewport is the visible area of the page, in pixels.
• Set it in the config or test.use({ viewport: { width: 390, height: 700 } }), or change it during a test with page.setViewportSize().

Device Descriptors and Device Projects

• devices['iPhone 13'] is a device descriptor: viewport, user agent, scale and touch, all set like a real iPhone 13.
• Since Playwright 1.64, a descriptor also sets the screen size, so window.screen and media queries match the device. Set screen: undefined to turn that off.
• Spread it into a project to run every test on that device:

projects: [
  { name: 'Mobile Chrome', use: { ...devices['Pixel 7'] } },
  { name: 'Mobile Safari', use: { ...devices['iPhone 13'] } },
],

Mobile Emulation

• Emulation changes size, user agent and touch. It is not a real phone. Check important flows on real devices too.

Simple lesson: devices[...] gives a ready-made phone or tablet setup. setViewportSize() resizes on the fly.

Locale and Region

Locale and Timezone

• locale: 'de-DE' makes the browser report German as its language and format numbers and dates the German way.
• timezoneId: 'Asia/Kolkata' sets the time zone. Dates shown on the page change with it.

Geolocation and Permissions

• geolocation: { latitude: 19.08, longitude: 72.88 } sets where the browser thinks it is.
• The page must also be allowed to read it: permissions: ['geolocation'], or context.grantPermissions(['geolocation']).
• context.setGeolocation() moves the location during a test.

Simple lesson: locale, timezoneId and geolocation move the browser to another place. Permissions decide what the page may use.

Display Preferences

Color Scheme and Reduced Motion

• colorScheme: 'dark' makes the page think the user prefers dark mode.
• reducedMotion: 'reduce' makes it think the user wants fewer animations.
• page.emulateMedia({ colorScheme: 'dark' }) changes them during a test.

User Agent and Disabling JavaScript

• userAgent changes the browser's identity string, which some sites read to choose a layout.
• javaScriptEnabled: false loads the page with no JavaScript, to test what users with scripts off see.

Simple lesson: emulate dark mode, reduced motion, user agents and no-JavaScript to test what different users see.

Try It in Your Project

• These steps take the lesson from the lab to your own app.
• Write one test with two contexts for a flow that involves two users, like chat or approvals.
• Add a mobile project with devices['Pixel 7'] and see which tests break.
• Test one page in another locale and time zone if your app is used abroad.

Simple lesson: use one idea from this lesson on your own app this week.

TL;DR

• Browser holds contexts. Contexts hold pages. Each test gets its own context.
• browser.newContext() makes another isolated user. Close it when done.
• page.waitForEvent('popup'), started before the click, catches new tabs.
• devices[...], viewport and setViewportSize() emulate screens and phones.
• locale, timezoneId, geolocation and permissions emulate places.
• colorScheme, reducedMotion, userAgent and javaScriptEnabled emulate preferences.

Common mistakes

Check Yourself

Exercises

What to Remember

• One context per user. Contexts share nothing.
• Wait for popups before the click that opens them.
• Devices, viewports, locales, time zones and locations are just options.
• Permissions decide what the page may use.
• Emulation is fast and good, but not the same as a real device.

Next: Handling Complex Page Elements