Refactoriza tus tests: De Novato a Pro con Playwright

Tus tests de Playwright están llenos de duplicados y son difíciles de mantener.

El truco

// ANTES: Código repetitivo y poco mantenible
test('debería mostrar mensaje de bienvenida', async ({ page }) => {
  await page.goto('https://example.com');
  const mensaje = await page.textContent('#welcome-message');
  expect(mensaje).toBe('Bienvenido');
});

test('debería mostrar botón de inicio de sesión', async ({ page }) => {
  await page.goto('https://example.com');
  const boton = await page.isVisible('#login-button');
  expect(boton).toBe(true);
});

// DESPUÉS: Uso de funciones helpers y tipos avanzados de TypeScript
type PageActions = (page: Page) => Promise<void>;

const visitarPagina = (url: string): PageActions => async (page) => {
  await page.goto(url);
};

const verificarTexto = (selector: string, textoEsperado: string): PageActions => async (page) => {
  const texto = await page.textContent(selector);
  expect(texto).toBe(textoEsperado);
};

const verificarVisibilidad = (selector: string): PageActions => async (page) => {
  const visible = await page.isVisible(selector);
  expect(visible).toBe(true);
};

// Uso en los tests
test('debería mostrar mensaje de bienvenida', async ({ page }) => {
  await visitarPagina('https://example.com')(page);
  await verificarTexto('#welcome-message', 'Bienvenido')(page);
});

test('debería mostrar botón de inicio de sesión', async ({ page }) => {
  await visitarPagina('https://example.com')(page);
  await verificarVisibilidad('#login-button')(page);
});

Utiliza patrones de funciones composables y tipos avanzados de TypeScript para reducir la repetición. Define acciones comunes como funciones genéricas que puedes reutilizar en múltiples tests, simplificando así tu código y mejorando su mantenibilidad.

Menos código repetido significa tests más claros, concisos y fáciles de mantener. Refactoriza con inteligencia.