POM Basics + Exports + Login Page Setup

🕒 Teaching Flow

🎭 Story / Intro (5 min)

👉 "Imagine you're testing PrestaShop. If we put all steps (login, search, checkout) in one script → it's messy, unscalable. Instead, we create **Page Objects** → each page gets its own reusable class. This is like having mini-testers inside your code, each responsible for one page."

1. ��️ POM Basics (20 min)

💡 What is POM?

Page Object Model is a design pattern → separates locators & actions for each page into one file.

Improves readability, reusability, maintainability.

// Without POM (messy code)
import { test, expect } from '@playwright/test';

test('Login without POM', async ({ page }) => {
  await page.goto('https://learn-playwright.great-site.net/');
  await page.locator('#email').fill('qa@example.com');
  await page.locator('#passwd').fill('password123');
  await page.locator('#SubmitLogin').click();
  await expect(page.locator('.account')).toContainText('QA Tester');
});
            

// With POM (clean code)
// pages/LoginPage.js
export class LoginPage {
  constructor(page) {
    this.page = page;
    this.emailField = page.locator('#email');
    this.passwordField = page.locator('#passwd');
    this.loginBtn = page.locator('#SubmitLogin');
  }

  async goto() {
    await this.page.goto('https://learn-playwright.great-site.net/');
  }

  async login(email, password) {
    await this.emailField.fill(email);
    await this.passwordField.fill(password);
    await this.loginBtn.click();
  }
}
            

// tests/login.spec.js
import { test, expect } from '@playwright/test';
import { LoginPage } from '../pages/LoginPage';

test('Login with POM', async ({ page }) => {
  const loginPage = new LoginPage(page);
  await loginPage.goto();
  await loginPage.login('qa@example.com', 'password123');
  await expect(page.locator('.account')).toContainText('QA Tester');
});
            

🎯 Takeaway:

Without POM → hard to maintain.

With POM → clean, reusable, structured.

💡 POM Benefits

Maintainability: Update locators in one place
Reusability: Use same page class across multiple tests
Readability: Tests become self-documenting
Scalability: Easy to add new pages and functionality
Team Collaboration: Different team members can work on different pages

2. 📦 Basics of Module Exports (15 min)

💡 Why exports?

To reuse classes/functions across multiple files.

Keeps code DRY (Don't Repeat Yourself).

// utils/helpers.js
export function generateRandomEmail() {
  return `user_${Date.now()}@test.com`;
}

export function generateRandomPassword() {
  return `pass_${Math.random().toString(36).substring(2, 8)}`;
}

export const TEST_DATA = {
  validEmail: 'qa@example.com',
  validPassword: 'password123'
};
            

// tests/register.spec.js
import { test } from '@playwright/test';
import { generateRandomEmail, generateRandomPassword, TEST_DATA } from '../utils/helpers';

test('Register user', async ({ page }) => {
  const email = generateRandomEmail();
  const password = generateRandomPassword();
  
  await page.goto('https://learn-playwright.great-site.net/');
  await page.fill('#email_create', email);
  await page.fill('#passwd', password);
  
  // Use predefined test data
  console.log('Using test data:', TEST_DATA);
});
            

🎯 Takeaway:

Exports = packaging functions/classes → reuse everywhere.

Think of it like "common tools" that every test can borrow.

💡 Export Types

Named Exports: `export function name()` - import with `{ name }`
Default Exports: `export default class` - import without braces
Multiple Exports: Export several items from one file
Constants: Export configuration and test data

3. 🧪 Showing Login Page (Demo + Discussion) (20 min)

🎯 Login Page Implementation

Use LoginPage class built above.

Demonstrate login success + failure case.

// Enhanced LoginPage with error handling
export class LoginPage {
  constructor(page) {
    this.page = page;
    this.emailField = page.locator('#email');
    this.passwordField = page.locator('#passwd');
    this.loginBtn = page.locator('#SubmitLogin');
    this.errorMessage = page.locator('.alert-danger');
    this.successMessage = page.locator('.account');
  }

  async goto() {
    await this.page.goto('https://learn-playwright.great-site.net/');
  }

  async login(email, password) {
    await this.emailField.fill(email);
    await this.passwordField.fill(password);
    await this.loginBtn.click();
  }

  async loginInvalid(email, password) {
    await this.login(email, password);
    await expect(this.errorMessage).toBeVisible();
  }

  async assertLoginSuccess() {
    await expect(this.successMessage).toBeVisible();
  }
}
            

// Test cases using enhanced LoginPage
import { test, expect } from '@playwright/test';
import { LoginPage } from '../pages/LoginPage';

test('Login success case', async ({ page }) => {
  const loginPage = new LoginPage(page);
  await loginPage.goto();
  await loginPage.login('qa@example.com', 'password123');
  await loginPage.assertLoginSuccess();
});

test('Login failure case', async ({ page }) => {
  const loginPage = new LoginPage(page);
  await loginPage.goto();
  await loginPage.loginInvalid('qa@example.com', 'wrongpassword');
  // Error message assertion is handled inside loginInvalid method
});
            

🎯 Real-time QA Angle:

Manual testers already test login flows → now they'll see how it looks in automation, cleanly via POM.

💡 Login Flow Benefits

Success Case: Login with valid credentials → dashboard visible
Failure Case: Login with wrong password → assert error message
Reusability: Same LoginPage class used across multiple test scenarios
Maintainability: If login form changes, update only LoginPage class

🧑‍💻 Interactive Questions

💡 Conceptual Questions

Why is POM better than writing locators directly inside test scripts?
How do `export` and `import` help in POM structure?
If the login button locator changes → how many files do you need to edit in:
- Without POM?
- With POM?

💡 Code Snippet Questions

👉 What will this output?

// utils.js
export function add(a, b) {
  return a + b;
}

// test.js
import { add } from './utils.js';
console.log(add(2, '3'));
                

Expected: "23" because JS doesn't enforce number types, unlike TypeScript.

🎯 Answers:

POM Benefits: Better maintainability, reusability, readability, and scalability
Export/Import: Enables code reuse across files, keeps code DRY, organizes functionality
File Updates: Without POM: update every test file; With POM: update only the page class

🎯 Learning Outcomes

Understand POM basics and design patterns
Learn module exports/imports for code reuse
Implement login flow with POM structure
Ready for next session (Session Storage) → since we now have `LoginPage` reusable

📑 Practice Tasks

🟢 Beginner

Create a HomePage class with goto() method.
Add reusable method to click "Sign In" link.

🟡 Intermediate

Extend LoginPage with loginInvalid() method → assert error message.
Create a helpers.js with generateRandomPassword() → import in test.

🔴 Advanced

Create ProductPage class with method addToCart(productName).
Write test that logs in using LoginPage → adds product using ProductPage.

🎯 Additional Interview Questions & Answers

💡 Q1: What are the main differences between POM and Page Factory patterns?

🎯 Answer:

Key differences:

POM: Simple class-based approach, each page gets its own class
Page Factory: Uses factory pattern to create page objects, more complex but flexible
Implementation: POM is easier to implement and understand
Scalability: Page Factory handles complex page hierarchies better
Learning Curve: POM is better for beginners, Page Factory for advanced users

💡 Q2: How do you handle dynamic elements in POM?

🎯 Answer:

Dynamic element strategies:

Dynamic Locators: Use functions that generate locators based on parameters
Wait Strategies: Implement explicit waits for dynamic content
Conditional Logic: Check element state before interacting
Retry Mechanisms: Implement retry logic for flaky elements

// Example: Dynamic element handling
async getProductByName(productName) {
  return this.page.locator(`[data-product-name="${productName}"]`);
}

async waitForProductToLoad(productName) {
  await this.page.waitForSelector(`[data-product-name="${productName}"]`);
}
                    

💡 Q3: What's the difference between `export default` and named exports?

🎯 Answer:

Export types comparison:

Named Export	Default Export
`export class LoginPage`	`export default class LoginPage`
`import { LoginPage } from './LoginPage'`	`import LoginPage from './LoginPage'`
Multiple exports per file	Only one default export per file

💡 Q4: How do you handle test data management in POM?

🎯 Answer:

Test data strategies:

Data Files: Store test data in JSON, CSV, or Excel files
Helper Functions: Generate dynamic test data (emails, passwords)
Environment Variables: Use different data for different environments
Data Builders: Create objects with default values that can be overridden
Fixtures: Use Playwright fixtures for reusable test data

// Example: Test data management
export class TestDataBuilder {
  static buildUser(overrides = {}) {
    return {
      email: 'qa@example.com',
      password: 'password123',
      firstName: 'QA',
      lastName: 'Tester',
      ...overrides
    };
  }
}

// Usage in test
const user = TestDataBuilder.buildUser({ email: 'custom@example.com' });
                    

💡 Q5: What are the best practices for organizing POM files?

🎯 Answer:

File organization best practices:

📁 project/ ├── 📁 pages/ │ ├── 📄 LoginPage.js │ ├── 📄 HomePage.js │ ├── 📄 ProductPage.js │ └── 📄 CheckoutPage.js ├── 📁 utils/ │ ├── 📄 helpers.js │ ├── 📄 testData.js │ └── 📄 constants.js ├── 📁 tests/ │ ├── 📄 login.spec.js │ ├── 📄 product.spec.js │ └── 📄 checkout.spec.js └── 📄 playwright.config.js

Consistent Naming: Use descriptive names ending with 'Page'
Single Responsibility: Each page class handles one page
Common Base Class: Create BasePage for shared functionality
Utility Separation: Keep helper functions separate from page classes

💡 Q6: How do you handle page navigation and URL assertions in POM?

🎯 Answer:

Navigation and URL handling:

URL Constants: Store URLs in constants file
Navigation Methods: Implement goto() methods in each page class
URL Assertions: Verify correct page after navigation
Relative Navigation: Use relative paths when possible

// Example: URL management
export const URLs = {
  HOME: 'https://learn-playwright.great-site.net/',
  LOGIN: 'https://learn-playwright.great-site.net/login',
  PRODUCTS: 'https://learn-playwright.great-site.net/products'
};

export class BasePage {
  constructor(page) {
    this.page = page;
  }

  async goto(url) {
    await this.page.goto(url);
  }

  async assertCurrentUrl(expectedUrl) {
    await expect(this.page).toHaveURL(expectedUrl);
  }
}
                    

💡 Q7: What's the difference between POM and Appium's Page Object Model?

🎯 Answer:

Key differences:

Platform: POM in Playwright is for web automation, Appium for mobile
Locators: Playwright uses web selectors, Appium uses mobile-specific locators
Actions: Playwright has web-specific actions, Appium has mobile gestures
Implementation: Core concept is the same, but implementation details differ
Tools: Playwright has built-in POM support, Appium requires additional setup

💡 Q8: How do you implement inheritance in POM?

🎯 Answer:

Inheritance strategies:

Base Page Class: Create common functionality in BasePage
Common Methods: Implement shared methods like waitForPageLoad, takeScreenshot
Constructor Chaining: Use super() to call parent constructor
Method Overriding: Override methods in child classes when needed

// Example: Inheritance in POM
export class BasePage {
  constructor(page) {
    this.page = page;
  }

  async waitForPageLoad() {
    await this.page.waitForLoadState('networkidle');
  }

  async takeScreenshot(name) {
    await this.page.screenshot({ path: `screenshots/${name}.png` });
  }
}

export class LoginPage extends BasePage {
  constructor(page) {
    super(page);
    this.emailField = page.locator('#email');
    this.passwordField = page.locator('#passwd');
  }

  async login(email, password) {
    await this.emailField.fill(email);
    await this.passwordField.fill(password);
    await this.page.locator('#SubmitLogin').click();
    await this.waitForPageLoad(); // Inherited method
  }
}
                    

🏗️ POM Basics + Exports + Login Page Setup

🕒 Teaching Flow

🎭 Story / Intro (5 min)

1. ��️ POM Basics (20 min)

💡 What is POM?

🎯 Takeaway:

💡 POM Benefits

2. 📦 Basics of Module Exports (15 min)

💡 Why exports?

🎯 Takeaway:

💡 Export Types

3. 🧪 Showing Login Page (Demo + Discussion) (20 min)

🎯 Login Page Implementation

🎯 Real-time QA Angle:

💡 Login Flow Benefits

🧑‍💻 Interactive Questions

💡 Conceptual Questions

💡 Code Snippet Questions

🎯 Answers:

🎯 Learning Outcomes

📑 Practice Tasks

🟢 Beginner

🟡 Intermediate

🔴 Advanced

🎯 Additional Interview Questions & Answers

💡 Q1: What are the main differences between POM and Page Factory patterns?

🎯 Answer:

💡 Q2: How do you handle dynamic elements in POM?

🎯 Answer:

💡 Q3: What's the difference between `export default` and named exports?

🎯 Answer:

💡 Q4: How do you handle test data management in POM?

🎯 Answer:

💡 Q5: What are the best practices for organizing POM files?

🎯 Answer:

💡 Q6: How do you handle page navigation and URL assertions in POM?

🎯 Answer:

💡 Q7: What's the difference between POM and Appium's Page Object Model?

🎯 Answer:

💡 Q8: How do you implement inheritance in POM?

🎯 Answer: