Page Object Model

Overview

The Page Object Model (POM) is a design pattern that creates an object repository for web UI elements. This pattern helps in reducing code duplication and improves test maintenance.

Project Structure

playwright-bingo/
├── pages/
│   ├── actions/          # Page actions
│   └── locators/         # Page locators
├── step-definitions/     # Cucumber step definitions
└── support/              # Support files

Implementation

The framework implements POM through the following components:

Page Locators

// pages/locators/login.locators.js
class LoginLocators {
    constructor(page) {
        this.page = page;
        this.usernameInput = 'input[name="username"]';
        this.passwordInput = 'input[name="password"]';
        this.loginButton = 'button[type="submit"]';
    }
}

Page Actions

// pages/actions/login.actions.js
class LoginActions {
    constructor(bingoPage) {
        this.bingoPage = bingoPage;
        this.locators = new LoginLocators(bingoPage.page);
    }

    async login(username, password) {
        await this.bingoPage.fill(this.locators.usernameInput, username);
        await this.bingoPage.fill(this.locators.passwordInput, password);
        await this.bingoPage.click(this.locators.loginButton);
    }
}

Best Practices

  • Keep locators separate from actions
  • Use descriptive names for actions and locators
  • Follow the single responsibility principle
  • Maintain a clear separation between page objects and test logic