Fixtures and Page Objects

🎭 Test Organization: Fixtures & Page Objects in Playwright

Imagine you’re a chef preparing a big feast. Before cooking, you set up your workstation: clean pots, sharp knives, fresh ingredients all ready. That’s what fixtures do—they prepare everything your tests need before they run!

🎪 The Big Picture: What Are Fixtures?

Think of fixtures like a magical helper that sets up your playground before you play.

Without fixtures: Every time you want to play, you have to:

1. Find your toys
2. Set them up
3. Clean up after

With fixtures: Your magical helper does all this for you automatically!

graph TD
    A["🎬 Test Starts"] --> B["🧙 Fixture Sets Up"]
    B --> C["🎮 Test Runs"]
    C --> D["🧹 Fixture Cleans Up"]
    D --> E["✅ Test Complete"]

Why Use Fixtures?

📄 Built-in Page Fixture

The page fixture is like getting a fresh browser tab handed to you.

Real Life Example:

• Opening a new tab in your browser = getting a page
• Each tab is separate and clean
• You can click, type, and see things on it

// Playwright gives you 'page' automatically!
test('visit website', async ({ page }) => {
  // 'page' is already ready to use
  await page.goto('https://example.com');

  // Click a button
  await page.click('button');

  // Type in a box
  await page.fill('input', 'Hello!');
});

What Can page Do?

graph TD
    P["📄 page"] --> A["🔗 goto - visit websites"]
    P --> B["👆 click - click things"]
    P --> C["⌨️ fill - type text"]
    P --> D["👀 locator - find elements"]
    P --> E["📸 screenshot - take pictures"]

Simple Example:

test('login test', async ({ page }) => {
  await page.goto('/login');
  await page.fill('#username', 'player1');
  await page.fill('#password', 'secret');
  await page.click('#submit');

  // Check we logged in!
  await expect(page).toHaveURL('/dashboard');
});

🌐 Built-in Context Fixture

The context is like a private browser window (incognito mode).

Think of it this way:

• context = A private browser window
• page = A tab inside that window
• Each context is isolated—cookies don’t mix!

test('fresh cookies each time', async ({ context }) => {
  // Create a new tab in this context
  const page = await context.newPage();

  await page.goto('https://shop.com');
  // Any cookies set here stay in THIS context
  // Other tests won't see them!
});

When Do You Need Context?

test('two users chatting', async ({ context }) => {
  // Create two tabs - like two people
  const alice = await context.newPage();
  const bob = await context.newPage();

  // Alice sends a message
  await alice.goto('/chat');
  await alice.fill('#message', 'Hi Bob!');
  await alice.click('#send');

  // Bob receives it
  await bob.goto('/chat');
  await expect(bob.locator('.message'))
    .toContainText('Hi Bob!');
});

🌍 Built-in Browser Fixture

The browser fixture is the whole browser itself—Chrome, Firefox, or Safari.

Analogy:

• browser = The entire browser app
• context = A window in that app
• page = A tab in that window

graph TD
    B["🌍 Browser"] --> C1["🪟 Context 1"]
    B --> C2["🪟 Context 2"]
    C1 --> P1["📄 Page A"]
    C1 --> P2["📄 Page B"]
    C2 --> P3["📄 Page C"]

test('test with browser control', async ({ browser }) => {
  // Create a fresh incognito-like context
  const context = await browser.newContext();
  const page = await context.newPage();

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

  // Clean up when done
  await context.close();
});

Why Use Browser Directly?

You need browser when you want:

• Multiple isolated sessions (different users)
• Custom context settings (viewport, locale)
• Fine control over browser resources

test('mobile vs desktop view', async ({ browser }) => {
  // Desktop user
  const desktop = await browser.newContext({
    viewport: { width: 1920, height: 1080 }
  });

  // Mobile user
  const mobile = await browser.newContext({
    viewport: { width: 375, height: 667 }
  });

  const desktopPage = await desktop.newPage();
  const mobilePage = await mobile.newPage();

  // Test both views!
});

🔌 Built-in Request Fixture

The request fixture lets you talk to APIs without a browser.

Like ordering food:

• Browser = Going to restaurant, sitting down
• Request = Calling for delivery directly

test('check API works', async ({ request }) => {
  // Call the API directly
  const response = await request.get('/api/users');

  // Check response
  expect(response.ok()).toBeTruthy();

  const data = await response.json();
  expect(data.users).toHaveLength(5);
});

When to Use Request vs Page?

test('create user via API', async ({ request }) => {
  // POST request - create something
  const response = await request.post('/api/users', {
    data: {
      name: 'Alex',
      email: 'alex@test.com'
    }
  });

  expect(response.status()).toBe(201);

  const user = await response.json();
  expect(user.name).toBe('Alex');
});

🏗️ Page Object Model Pattern

The Problem: Your tests are messy with selectors everywhere.

The Solution: Page Objects—like creating a remote control for each page!

graph LR
    T["🧪 Test"] --> R["🎮 Remote Control"]
    R --> P["📄 Web Page"]

    style R fill:#f9f,stroke:#333

Before Page Objects (Messy) 😵

test('login test', async ({ page }) => {
  await page.goto('/login');
  await page.fill('#email-input', 'user@test.com');
  await page.fill('#password-input', 'pass123');
  await page.click('#login-button');
  await expect(page.locator('.welcome-msg'))
    .toBeVisible();
});

test('another login test', async ({ page }) => {
  // Same selectors repeated! 😫
  await page.fill('#email-input', 'other@test.com');
  // ...
});

After Page Objects (Clean) 🌟

test('login test', async ({ loginPage }) => {
  await loginPage.login('user@test.com', 'pass123');
  await loginPage.expectSuccess();
});

Why is this better?

1. Change once, fix everywhere - selector changed? Update one file
2. Readable tests - reads like a story
3. Reusable - use login in many tests

📝 Creating Page Classes

A page class is like writing a user manual for a webpage.

Step 1: Create the Class

// pages/login-page.ts
import { Page, Locator } from '@playwright/test';

export class LoginPage {
  // Store the page
  readonly page: Page;

  // Store elements (like bookmarks)
  readonly emailInput: Locator;
  readonly passwordInput: Locator;
  readonly submitButton: Locator;
  readonly errorMessage: Locator;

  constructor(page: Page) {
    this.page = page;

    // Define where things are
    this.emailInput = page.locator('#email');
    this.passwordInput = page.locator('#password');
    this.submitButton = page.locator('#submit');
    this.errorMessage = page.locator('.error');
  }
}

Step 2: Add Actions (Methods)

export class LoginPage {
  // ... constructor from above ...

  // Action: Go to login page
  async goto() {
    await this.page.goto('/login');
  }

  // Action: Fill and submit login
  async login(email: string, password: string) {
    await this.emailInput.fill(email);
    await this.passwordInput.fill(password);
    await this.submitButton.click();
  }

  // Check: Verify error shows
  async expectError(message: string) {
    await expect(this.errorMessage)
      .toContainText(message);
  }
}

Step 3: Use in Tests

import { LoginPage } from './pages/login-page';

test('successful login', async ({ page }) => {
  const loginPage = new LoginPage(page);

  await loginPage.goto();
  await loginPage.login('user@test.com', 'secret');

  // Test continues...
});

🔧 Page Objects with Fixtures

The ultimate combo: Create custom fixtures that give you ready-made page objects!

Step 1: Define Your Fixture

// fixtures.ts
import { test as base } from '@playwright/test';
import { LoginPage } from './pages/login-page';
import { HomePage } from './pages/home-page';

// Describe what fixtures you're adding
type MyFixtures = {
  loginPage: LoginPage;
  homePage: HomePage;
};

// Extend the base test with your fixtures
export const test = base.extend<MyFixtures>({

  loginPage: async ({ page }, use) => {
    // Create the page object
    const loginPage = new LoginPage(page);
    // Navigate to it
    await loginPage.goto();
    // Hand it to the test
    await use(loginPage);
  },

  homePage: async ({ page }, use) => {
    const homePage = new HomePage(page);
    await use(homePage);
  },
});

Step 2: Use Your Custom Fixtures

// my-test.spec.ts
import { test } from './fixtures';

test('login works', async ({ loginPage }) => {
  // loginPage is ready to use!
  // Already navigated to login page!

  await loginPage.login('user@test.com', 'pass123');
  await loginPage.expectSuccess();
});

test('home page loads', async ({ homePage }) => {
  await homePage.expectWelcomeVisible();
});

The Magic Flow

graph TD
    A["🎬 Test Starts"] --> B["🔧 Fixture Runs"]
    B --> C["📦 Creates LoginPage"]
    C --> D["🔗 Navigates to /login"]
    D --> E["🎁 Gives to Test"]
    E --> F["🧪 Test Runs"]
    F --> G["🧹 Auto Cleanup"]

Complete Example

// fixtures.ts
import { test as base, expect } from '@playwright/test';
import { LoginPage } from './pages/login-page';
import { DashboardPage } from './pages/dashboard-page';

type Fixtures = {
  loginPage: LoginPage;
  dashboardPage: DashboardPage;
  loggedInPage: DashboardPage;
};

export const test = base.extend<Fixtures>({
  loginPage: async ({ page }, use) => {
    const loginPage = new LoginPage(page);
    await loginPage.goto();
    await use(loginPage);
  },

  dashboardPage: async ({ page }, use) => {
    await use(new DashboardPage(page));
  },

  // A fixture that depends on another!
  loggedInPage: async ({ loginPage, dashboardPage }, use) => {
    // Use loginPage to log in first
    await loginPage.login('test@test.com', 'password');
    // Then give the dashboard
    await use(dashboardPage);
  },
});

export { expect };

// dashboard.spec.ts
import { test, expect } from './fixtures';

test('see dashboard after login', async ({ loggedInPage }) => {
  // Already logged in thanks to fixture!
  await expect(loggedInPage.welcomeMessage)
    .toBeVisible();
});

🎯 Summary: Your New Superpowers

The Fixture Family Tree

graph TD
    B["🌍 browser"] --> C["🪟 context"]
    C --> P["📄 page"]
    P --> PO["🎮 Page Objects"]
    R["🔌 request"] --> API["📡 API Testing"]

🚀 You Did It!

You now understand:

• ✅ What fixtures are (magical setup helpers)
• ✅ Built-in fixtures (page, context, browser, request)
• ✅ Page Object Model (remote controls for pages)
• ✅ Creating page classes (user manuals for pages)
• ✅ Combining page objects with fixtures (the ultimate power!)

Remember: Fixtures = Less repeated code, cleaner tests, happier you! 🎉