9.4POM Principles

1. One Class Per Page or Major Component

Each page or significant UI section gets its own class. Do not create one giant AppPage class.

2. Locators Live in the Page Object, Never in the Test

// BAD: locator in test
await page.locator('#submit').click();

// GOOD: locator in page object
await checkoutPage.submitOrder();

3. Methods Represent User Actions, Not UI Mechanics

Name methods after what the user does, not what the code does:

// GOOD: describes user intent
await loginPage.login(email, password);
await productPage.addToCart();
await checkoutPage.applyCoupon('SAVE10');

// BAD: describes UI mechanics
await loginPage.fillEmailAndPasswordAndClickSubmit(email, password);

4. No Assertions Inside Page Objects

Page objects describe what the page can do. Tests decide what to verify.

// BAD: assertion inside page object
async login(email: string, password: string) {
  await this.emailInput.fill(email);
  await this.submitButton.click();
  await expect(this.page).toHaveURL(/dashboard/); // don't do this
}

// GOOD: page object provides actions, test makes assertions
async login(email: string, password: string) {
  await this.emailInput.fill(email);
  await this.passwordInput.fill(password);
  await this.submitButton.click();
}