Si usás Playwright para tus pruebas end-to-end, seguro escuchaste el eterno debate:

¿armar Page Object Model (POM) “a la vieja escuela” o aprovechar enfoques más livianos como Functional Helpers o el Functional Page Model (FPM)?

Spoiler: no hay un ganador universal. Pero sí hay diferencias que te pueden ahorrar (o complicar) varias horas de mantenimiento. Vamos a repasarlas con ejemplos de código para que decidas con calma.

Un poco de contexto

• POM nació en los tiempos de Selenium y otros frameworks que necesitaban encapsular todo en clases.

• Helpers/FPM vienen de la mano de Playwright y su API moderna, que ya hace muchas cosas “bonitas” sin tanto boilerplate.

Dos lecturas que inspiran este post y que valen la pena:

• Page Objects vs Functional Helpers de Murat K. Ozcan.

• Functional Page Model for Playwright de James Kip.

1. El clásico: Page Object Model (POM)

La idea es crear una clase por página o sección que guarde selectores y acciones.

Código de ejemplo:

// LoginPage.ts
import { Page } from '@playwright/test';

export class LoginPage {
  constructor(private page: Page) {}

  async login(username: string, password: string) {
    await this.page.fill('[data-testid="username"]', username);
    await this.page.fill('[data-testid="password"]', password);
    await this.page.click('[data-testid="login-button"]');
  }
}

// Test
import { test, expect } from '@playwright/test';
import { LoginPage } from './LoginPage';

test('User can log in', async ({ page }) => {
  const loginPage = new LoginPage(page);
  await loginPage.login('testUser', 'password123');
  await expect(page.locator('[data-testid="welcome-message"]')).toHaveText('Welcome, testUser');
});

✔️ Ventajas: encapsulación prolija, ideal si tu equipo viene de Selenium.

❌ Contras: más código de arranque, herencia que a veces sobra.

2. Helpers funcionales: simple y directo

Acá no hay clases, solo funciones reutilizables:

// loginHelpers.ts
import { Page } from '@playwright/test';

export async function login(page: Page, user: string, pass: string) {
  await page.fill('[data-testid="username"]', user);
  await page.fill('[data-testid="password"]', pass);
  await page.click('[data-testid="login-button"]');
}

// Test
import { test, expect } from '@playwright/test';
import { login } from './loginHelpers';

test('User can log in', async ({ page }) => {
  await login(page, 'testUser', 'password123');
  await expect(page.locator('[data-testid="welcome-message"]')).toHaveText('Welcome, testUser');
});

✔️ Ventajas: cero ceremonia, empezás a testear en minutos.

❌ Contras: si duplicás selectores en varios helpers, después te toca cambiar todo a mano.

3. Functional Page Model (FPM): el punto medio

Propuesta de James Kip: archivos separados para locators, acciones y datos.

Un ejemplo resumido:

e2e/
  └── vitals/
      ├─ vitals.locators.ts
      ├─ vitals.actions.ts
      ├─ vitals.data.ts
      └─ vitals.spec.ts

// vitals.locators.ts
export const Locators = {
  noteInput: (page) => page.getByRole('textbox', { name: /note/i }),
  saveBtn:   (page) => page.getByRole('button', { name: /save/i }),
};

// vitals.actions.ts
import { Locators } from './vitals.locators';
export const Actions = {
  createNote: async (page, text: string) => {
    await Locators.noteInput(page).fill(text);
    await Locators.saveBtn(page).click();
  },
};

✔️ Ventajas: súper escalable, cada archivo tiene su responsabilidad.

❌ Contras: un poquito más de estructura inicial que los helpers simples.

Entonces… ¿cuál uso?

• Proyecto chiquito o prueba de concepto: arrancá con Helpers, menos fricción.

• Equipo fan de la POO: POM les va a resultar natural.

• App grande que cambia seguido: el Functional Page Model te ahorra dolores de cabeza.

Lo bueno: no tenés que casarte con uno. Podés empezar simple y migrar a algo más estructurado cuando tu suite crezca.

Palabras finales

Playwright ya te da una API moderna y expresiva. El truco está en mantener el código claro y evitar duplicaciones, sea cual sea el patrón que elijas.

¿Vos cuál usás? Contame en los comentarios: seguro tu experiencia le sirve a alguien más.