Muerte al...¿Page Object Model?

🧪 Page Object Model vs. Funciones Auxiliares en Playwright con TypeScript

Cuando hacés testing automatizado, especialmente con herramientas modernas como Playwright y Cypress, surge un debate interesante: ¿es mejor utilizar el tradicional Page Object Model (POM) o adoptar una estrategia basada en funciones auxiliares (functional helpers)? Hace poco me crucé con un artículo que exploraba esto y me recordó al infame post oficial de Cypress sobre el tema. En este post vamos a explorar ambas metodologías, sus ventajas y desventajas, y concluiremos por qué, en muchos casos, POM sigue siendo la opción preferida.

🧱 Page Object Model (POM): Estructura y Organización

El POM es una técnica que encapsula la lógica de interacción con una página web en clases, promoviendo la reutilización y el mantenimiento del código. Cada clase representa una página o componente de la aplicación, conteniendo los selectores y métodos necesarios para interactuar con ella. Recuerden que NO deberían tener validaciones o assertions en estas clases. Es un gran NO NO eso y lo explicamos clarito en varios de nuestros cursos.

Ejemplo en TypeScript con Playwright:

// loginPage.ts
import { Page, Locator } from '@playwright/test';

export class LoginPage {
  readonly page: Page;
  readonly usernameField: Locator;
  readonly passwordField: Locator;
  readonly loginButton: Locator;

  constructor(page: Page) {
    this.page = page;
    this.usernameField = page.locator('[data-testid="username"]');
    this.passwordField = page.locator('[data-testid="password"]');
    this.loginButton = page.locator('[data-testid="login-button"]');
  }

  async login(username: string, password: string): Promise<void> {
    await this.usernameField.fill(username);
    await this.passwordField.fill(password);
    await this.loginButton.click();
  }
}

// login.spec.ts
import { test, expect } from '@playwright/test';
import { LoginPage } from './loginPage';

test('El usuario puede iniciar sesión', async ({ page }) => {
  const loginPage = new LoginPage(page);
  await loginPage.login('usuarioTest', 'contraseña123');

  await expect(page.locator('[data-testid="welcome-message"]')).toHaveText(
    'Bienvenido, usuarioTest'
  );
});

Este enfoque proporciona una estructura clara y facilita la gestión de cambios en la interfaz de usuario. Al centralizar los selectores y acciones en clases específicas, cualquier modificación en la UI requiere cambios mínimos en el código de prueba. Si me dice que actualizaron la página de "órdenes" en un e-commerce, se que tengo que ir a esa clase y ya.

🔧 Funciones Auxiliares (Functional Helpers): Simplicidad y Flexibilidad

Las funciones auxiliares promueven el uso de funciones reutilizables para interactuar con elementos de la interfaz, evitando la creación de clases. Este enfoque es más directo y puede ser más fácil de entender para pruebas simples o equipos que prefieren una estructura funcional.

Ejemplo en TypeScript con Playwright:

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

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

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

test('El usuario puede iniciar sesión', async ({ page }) => {
  await login(page, 'usuarioTest', 'contraseña123');

  await expect(page.locator('[data-testid="welcome-message"]')).toHaveText(
    'Bienvenido, usuarioTest'
  );
});

Este método es más directo y puede ser más fácil de entender para pruebas simples. Sin embargo, a medida que el proyecto crece, la dispersión de selectores y lógica puede dificultar el mantenimiento.

⚖️ Comparación y Consideraciones

Aunque las funciones auxiliares ofrecen una solución más ligera y rápida para comenzar, especialmente en proyectos pequeños o medianos, el POM proporciona una base más sólida y escalable para proyectos de mayor envergadura. La estructura y organización que ofrece POM facilita el mantenimiento y la colaboración en equipos grandes.

🧠 Conclusión

Si bien las funciones auxiliares presentan una alternativa interesante y válida en ciertos contextos, especialmente cuando se busca rapidez y simplicidad, el Page Object Model sigue siendo la opción preferida para proyectos que requieren una estructura robusta y escalable. La claridad, reutilización y facilidad de mantenimiento que ofrece POM lo convierten en una herramienta valiosa en el arsenal de testing automatizado.

Dicho esto...hay un momento en el que uso el approach de funciones auxiliares. ¿Saben cuándo? Cuando hago API Testing o bien testing en la nube

💬 ¿Qué opinás vos?

Ahora me interesa escucharte a vos ¿Preferís la simplicidad de las funciones auxiliares o la estructura del POM? ¿Cómo manejás tus pruebas automatizadas en tus proyectos? ¡Compartí tu experiencia y sumate al bardo la conversación!