Playwright Basics & Browser Actions
Browser, Context and Page
Learning Outcome
4
Create multiple Pages within a Context.
3
Create a Browser, Context, and Page using Playwright.
2
Understand the hierarchy between these three objects
1
Explain Browser, Browser Context, and Page.
Recall
What is Playwright?
What is a browser engine?
Which browser engines does Playwright support?
What is the purpose of launching a browser?
Think of Playwright like a hotel
The overall browser environment.
Hotel
An isolated session with its own cookies and storage.
Hotel Room
Where the actual activities take place.
Room Workspace
Hotel Building
Guest Room
Workspace/Tab
Guest Activities
Browser
Browser Context
Page
Automation Actions
Hotel → Playwright
Just as a hotel provides separate rooms for different guests
Playwright provides separate Browser Contexts for different user sessions
What are Browser, Context & Page?
Context 1
Context 2
Browser
PAGE 1
PAGE 2
PAGE 1
PAGE 2
Browser & Context
BROWSER
CONTEXT
Controls the browser application.
Launches the browser.
Can contain multiple contexts
Provides an isolated browser session.
Maintains isolated cookies and storage.
Useful for simulating multiple users
Playwright playwright = Playwright.create();
Browser browser = playwright.chromium().launch();
BrowserContext context = browser.newContext();
| Page |
Page represents a browser tab.
Page page = context.newPage();
page.navigate("https://www.google.com");
Relationship
Object
Represents
Example
Browser
Context
Page
Browser application
Isolated session
Browser tab
Chromium
Google tab
User 1 / User 2
| Practical Scenario |
Testing Two Users
This allows two independent user sessions to run inside one browser
Summary
5
One Context can contain multiple Pages.
4
One Browser can contain multiple Contexts.
3
Page represents a browser tab.
2
Context represents an isolated browser session.
1
Browser represents the browser application.
Quiz
Which is the correct Playwright hierarchy?
A. Page → Context → Browser
B. Context → Page → Browser
C. Browser → Context → Page
D. Browser → Page → Context
Quiz-Answer
Which is the correct Playwright hierarchy?
A. Page → Context → Browser
B. Context → Page → Browser
C. Browser → Context → Page
D. Browser → Page → Context
