Multi-Tab Contexts

Handle more than one page or tab in the same test.

Big Picture

One small picture can make this idea easier to hold.

One page only

• Simple to read.
• Good for one-screen tests.
• Not enough for tab flows.
• Can miss cross-page bugs.

Multiple pages

• Follows real user paths.
• Good for email or auth flows.
• Keeps separate page state.
• More realistic.

VerdictUse multiple pages when the user flow jumps around.

How It Moves

Short steps make the flow easier to see.

1

Open first page

Start on the main page or tab.

2

Create another page

Open a new tab or popup if needed.

3

Switch focus

Move the test to the tab you need.

4

Check both sides

Assert what happens in each page.

Step By Step

This is the same idea, stretched across time.

1. 1

   Start the main context

   Open the first page.

2. 2

   Trigger a new page

   Click a link or open a popup.

3. 3

   Work in the new tab

   Read or change its content.

4. 4

   Return and verify

   Check the first page again.

One Small Model

Think of this like a tiny card you can keep in your pocket.

BrowserContext

5 fields

page1:"main app tab"

page2:"new tab or popup"

storage:"can stay shared or separate"

focus:"switch with a page handle"

close:"clean up all pages"

Quick Check

Question 1 of 10 correct

Why use multiple contexts or tabs?

To test flows across pagesTo make the browser smallerTo remove all waitsTo stop screenshots

HintSubmit

Map It

One more picture helps you see where this lesson matters most.

When multiple tabs matter

State separation

Separate page state

Simple page test

Home page only

Best fit

Login in one tab, app in another

Popup flow

Share dialog or auth popup

Multi-step journey

Open, switch, and verify

One page state

Single screenCross-tab flow

Flow shape

Final Quiz

Question 1 of 30 correct

What does a multi-tab test check?

A flow across more than one pageOnly a single buttonOnly CSS spacingOnly network speed

HintSubmit