YepAPI/skills

Pruebas E2E

Reglas

• Playwright para E2E: multinavegador, espera automática, ejecutor de pruebas integrado, excelente soporte para CI
• Prioridad de localizadores: getByRole() > getByLabel() > getByPlaceholder() > getByTestId() > selectores CSS
• Page Object Model: encapsular las interacciones de página en clases — LoginPage.iniciarSesion(email, password)
• Aislamiento de pruebas: cada prueba comienza con un estado nuevo — usa beforeEach para la configuración, evita la interdependencia entre pruebas
• Espera automática: Playwright espera los elementos automáticamente — no añadas llamadas manuales a waitForTimeout()
• Aserciones: usa aserciones web-first con expect(localizador) — toBeVisible(), toHaveText(), toHaveURL()
• Ejecución en paralelo: las pruebas se ejecutan en paralelo por defecto — asegúrate de que no haya estado mutable compartido entre pruebas
• CI: ejecuta en modo headless, configura reintentos (retries: 2 en CI), sube traza en caso de fallo
• Regresión visual: expect(page).toHaveScreenshot() — actualiza las líneas base con --update-snapshots

Patrones

// Page Object Model
class PaginaLogin {
  constructor(private page: Page) {}
  async irA() { await this.page.goto("/login"); }
  async iniciarSesion(email: string, password: string) {
    await this.page.getByLabel("Email").fill(email);
    await this.page.getByLabel("Contraseña").fill(password);
    await this.page.getByRole("button", { name: "Iniciar sesión" }).click();
    await this.page.waitForURL("/dashboard");
  }
}

// playwright.config.ts
export default defineConfig({
  retries: process.env.CI ? 2 : 0,
  use: { trace: "on-first-retry", screenshot: "only-on-failure" },
  projects: [
    { name: "chromium", use: { ...devices["Desktop Chrome"] } },
    { name: "mobile", use: { ...devices["Pixel 5"] } },
  ],
});

Evitar

• page.waitForTimeout() — usa la espera automática o waitForURL(), waitForResponse()
• Selectores CSS para elementos interactivos — usa localizadores basados en roles para mayor robustez
• Pruebas que dependen del estado de otras pruebas — cada prueba debe poder ejecutarse de forma independiente
• Probar servicios de terceros directamente — simula APIs externas con page.route()
• Omitir viewports móviles — prueba al menos un dispositivo móvil en tu matriz de proyectos