🎭 Playwright Page Management: Your Browser’s Control Room

Imagine you’re the manager of a huge shopping mall. You control which stores open, what happens inside each store, and when they close. That’s exactly what Playwright does with web pages!

🏠 The Big Picture: What is Page Management?

Think of your web browser like a big building with many rooms. Each room is a webpage. Playwright is like the master key holder who can:

• Open new rooms (create pages)
• Walk into any room (navigate)
• Clean up and close rooms (cleanup)
• Control how fast or slow things happen

Let’s explore each room in our building!

🎪 Browser Contexts: Your Private Shopping Mall

What’s a Browser Context?

Imagine you have two phones. On one phone, you’re logged into YouTube as yourself. On the other phone, your friend is logged in. Each phone is completely separate—they don’t share anything!

A Browser Context is like giving someone their own fresh phone. It’s a brand new, clean browser that doesn’t share:

• Cookies 🍪
• Login sessions 🔐
• Saved data 💾

Why Do We Need Contexts?

// Create a fresh, clean browser context
const context = await browser.newContext();

// Everything in this context is separate!
const page = await context.newPage();

Real-World Example:

• Testing as User A AND User B at the same time
• One context = logged in as admin
• Another context = logged in as regular user

🎯 Key Point

One browser can have MANY contexts. Each context is like a separate person using the browser!

graph TD
    A[🌐 Browser] --> B[Context 1: Admin User]
    A --> C[Context 2: Regular User]
    A --> D[Context 3: Guest]
    B --> E[Page 1]
    B --> F[Page 2]
    C --> G[Page 3]
    D --> H[Page 4]

📄 Creating New Pages: Opening Doors

How to Create a Page

Creating a page is super easy! It’s like opening a new tab in your browser.

// Step 1: Get a context
const context = await browser.newContext();

// Step 2: Create a page inside that context
const page = await context.newPage();

// Now you have a blank page ready to go!

Creating Multiple Pages

Sometimes you need multiple pages open at once. Like having YouTube on one tab and Google on another!

// Create two pages in the same context
const page1 = await context.newPage();
const page2 = await context.newPage();

// They share cookies and login info
// because they're in the SAME context!

🎯 Key Point

Pages live inside Contexts. A Context is the parent, Pages are the children!

🧹 Page Close and Cleanup: Tidying Up

Why Cleanup Matters

Imagine leaving every light on in your house forever. Your electricity bill would be HUGE! Same with pages—if you don’t close them, your computer gets slow.

How to Close a Page

// Close just this one page
await page.close();

How to Close Everything

// Close the entire context (all pages inside it)
await context.close();

// Close the whole browser
await browser.close();

The Cleanup Order

Think of it like leaving a building:

1. First, close the room door (page)
2. Then, leave the floor (context)
3. Finally, exit the building (browser)

graph TD
    A[Close Page] --> B[Close Context]
    B --> C[Close Browser]
    style A fill:#90EE90
    style B fill:#87CEEB
    style C fill:#FFB6C1

🎯 Key Point

Always clean up when you’re done! Close pages, then contexts, then the browser.

🚀 Navigating with page.goto: Going Places

What is page.goto?

page.goto() is like typing a website address and pressing Enter. It takes your page to a new website!

Basic Navigation

// Go to Google
await page.goto('https://www.google.com');

// Go to YouTube
await page.goto('https://www.youtube.com');

Navigation Returns Information

When you visit a page, Playwright tells you what happened:

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

// Did it work?
console.log(response.status()); // 200 = success!
console.log(response.ok());     // true = everything's fine

Common Status Codes

🎯 Key Point

page.goto() is your GPS. Tell it where to go, and it takes you there!

⚙️ Base URL Configuration: Your Home Address

What’s a Base URL?

Imagine you live at “123 Main Street, Happy City”. Every time someone asks where you live, you say the full address. That’s tiring!

A Base URL is like saying “I live in Happy City” once, then just saying “Main Street” after that.

Setting Up Base URL

// Set your "home address"
const context = await browser.newContext({
  baseURL: 'https://mywebsite.com'
});

const page = await context.newPage();

// Now you can use short paths!
await page.goto('/login');
// Actually goes to: https://mywebsite.com/login

await page.goto('/dashboard');
// Actually goes to: https://mywebsite.com/dashboard

Why Use Base URL?

1. Less typing - Write /about instead of full URLs
2. Easy to change - Update one place, not 100 places
3. Cleaner code - Easier to read and understand

With vs Without Base URL

// WITHOUT Base URL (repetitive 😫)
await page.goto('https://myapp.com/login');
await page.goto('https://myapp.com/signup');
await page.goto('https://myapp.com/profile');

// WITH Base URL (clean! 😊)
// baseURL: 'https://myapp.com'
await page.goto('/login');
await page.goto('/signup');
await page.goto('/profile');

🎯 Key Point

Base URL = Your website’s home address. Set it once, use short paths everywhere!

⏳ Page Load States: Waiting for the Magic

The Loading Problem

When you visit a website, things load in stages:

1. First, the basic page appears
2. Then, images start showing up
3. Finally, everything is ready

How do you know when it’s “done”?

The Three Load States

Playwright gives you three waiting options:

graph TD
    A[🚀 load] --> B[📦 domcontentloaded]
    B --> C[🎯 networkidle]
    style A fill:#FFD700
    style B fill:#87CEEB
    style C fill:#90EE90

1. domcontentloaded (The Quick One)

The basic page structure is ready. Like when a house has walls but no furniture.

await page.goto('/page', {
  waitUntil: 'domcontentloaded'
});
// Fast! But images might still be loading

2. load (The Standard One)

The page AND all its pictures/styles are loaded. Like a furnished house.

await page.goto('/page', {
  waitUntil: 'load'
});
// This is the default!

3. networkidle (The Patient One)

EVERYTHING is done. No more internet activity. The house is complete with all decorations!

await page.goto('/page', {
  waitUntil: 'networkidle'
});
// Slowest but most complete

When to Use Each?

🎯 Key Point

Choose your waiting strategy wisely! Fast isn’t always better—sometimes you need to wait for everything.

🎮 Putting It All Together

Here’s a complete example using everything we learned:

const { chromium } = require('playwright');

async function myFirstTest() {
  // 1. Open the browser
  const browser = await chromium.launch();

  // 2. Create a context with base URL
  const context = await browser.newContext({
    baseURL: 'https://example.com'
  });

  // 3. Create a new page
  const page = await context.newPage();

  // 4. Navigate using short path
  await page.goto('/login', {
    waitUntil: 'networkidle'
  });

  // 5. Do your testing magic here!
  console.log('Page loaded successfully!');

  // 6. Clean up - IMPORTANT!
  await page.close();
  await context.close();
  await browser.close();
}

myFirstTest();

🌟 Quick Memory Tips

🚀 You Did It!

You now understand the control room of Playwright! You can:

✅ Create isolated browser contexts ✅ Open and close pages properly ✅ Navigate anywhere with page.goto() ✅ Use base URLs like a pro ✅ Wait smartly with load states

Remember: Playwright is your remote control for the web. You’re now ready to click, type, and test anything!

“Every expert was once a beginner. You just took your first big step!” 🎉