Skip to main content

Page Object Model (POM)

RoostGPT automatically produces a full Page Object Model architecture — the same pattern senior test engineers would hand-build. Tests read like user stories, selectors are encapsulated and resilient, and maintenance cost drops significantly.

POM generation is enabled by default (ENABLE_POM_TESTS=true).

What You Get​

A complete POM file tree generated alongside your tests:

playwright_tests/
├── pom_tests/
│   ├── pom/
│   │   ├── HomePage.js            # Page Object classes
│   │   ├── LoginPage.js
│   │   ├── CheckoutPage.js
│   │   └── ...
│   ├── login_flow.spec.js         # POM-based test files
│   ├── checkout.spec.js
│   └── playwright.config.js       # Separate config for POM tests
├── tests/
│   └── *.spec.js                  # Standard Playwright tests
└── playwright.config.js

Action-Oriented Design​

Page objects expose methods named after user actions, not DOM operations:

// pom/CartPage.js
export class CartPage {
  constructor(page) { this.page = page; }

  async addItem(productName) { /* ... */ }
  async removeItem(productName) { /* ... */ }
  async getItemCount() { /* ... */ }
  async proceedToCheckout() { /* ... */ }
}

Tests that use these methods read like plain-language user stories:

test('user can add and remove items', async ({ page }) => {
  const cart = new CartPage(page);
  await cart.addItem('Wireless Headphones');
  expect(await cart.getItemCount()).toBe(1);

  await cart.removeItem('Wireless Headphones');
  expect(await cart.getItemCount()).toBe(0);
});

Resilient Selectors​

Selectors inside page objects include built-in fallback alternatives so tests do not break from minor UI changes:

StrategyExampleResilience
data-testid[data-testid="login-btn"]Highest — dedicated test attribute
ARIA role + labelrole=button[name="Log in"]High — semantic, accessible
Text contenttext=Log inMedium — works unless copy changes
CSS selector.login-form button.primaryLower — breaks on class renames

The system selects the most resilient strategy available for each element and falls back through alternatives if the primary selector fails.

Modern Web Support​

Page objects handle modern web patterns seamlessly:

  • Shadow DOM — selectors pierce shadow roots to interact with web components
  • iframes — frame switching is encapsulated within page object methods
  • Dynamic content — built-in waits for lazy-loaded, AJAX-populated, and animation-dependent elements
  • Single-page applications — route change detection handles client-side navigation

Next Steps​