Pruebas E2E con Claude Code: Guia practica de Playwright/Cypress

Optimizando las pruebas E2E con Claude Code

Las pruebas E2E (End-to-End) son una metodologia importante que verifica automaticamente los flujos de operacion del usuario. Con Claude Code, puede generar rapidamente codigo de pruebas en Playwright o Cypress y avanzar hasta la integracion en el entorno de CI.

Implementacion de pruebas con Playwright

Prueba del flujo de inicio de sesion

> Crea pruebas E2E con Playwright desde el inicio de sesion
> hasta la visualizacion del dashboard. Usa el patron Page Object.

// tests/pages/LoginPage.ts
import { Page, Locator } from '@playwright/test';

export class LoginPage {
  readonly page: Page;
  readonly emailInput: Locator;
  readonly passwordInput: Locator;
  readonly submitButton: Locator;
  readonly errorMessage: Locator;

  constructor(page: Page) {
    this.page = page;
    this.emailInput = page.getByLabel('Correo electronico');
    this.passwordInput = page.getByLabel('Contrasena');
    this.submitButton = page.getByRole('button', { name: 'Iniciar sesion' });
    this.errorMessage = page.getByRole('alert');
  }

  async goto() {
    await this.page.goto('/login');
  }

  async login(email: string, password: string) {
    await this.emailInput.fill(email);
    await this.passwordInput.fill(password);
    await this.submitButton.click();
  }
}

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

test.describe('Funcionalidad de inicio de sesion', () => {
  test('Se puede iniciar sesion con credenciales correctas', async ({ page }) => {
    const loginPage = new LoginPage(page);
    await loginPage.goto();
    await loginPage.login('[email protected]', 'password123');

    await expect(page).toHaveURL('/dashboard');
    await expect(page.getByText('Dashboard')).toBeVisible();
  });

  test('Se muestra error con credenciales incorrectas', async ({ page }) => {
    const loginPage = new LoginPage(page);
    await loginPage.goto();
    await loginPage.login('[email protected]', 'wrongpassword');

    await expect(loginPage.errorMessage).toBeVisible();
    await expect(loginPage.errorMessage).toContainText('La autenticacion ha fallado');
  });
});

Implementacion de pruebas con Cypress

Flujo de compra en un sitio e-commerce

> Crea con Cypress el flujo desde la seleccion de producto
> hasta agregar al carrito y completar la compra.
> Define tambien comandos personalizados.

// cypress/support/commands.ts
Cypress.Commands.add('login', (email: string, password: string) => {
  cy.session([email, password], () => {
    cy.visit('/login');
    cy.get('[data-cy="email"]').type(email);
    cy.get('[data-cy="password"]').type(password);
    cy.get('[data-cy="submit"]').click();
    cy.url().should('include', '/dashboard');
  });
});

// cypress/e2e/purchase.cy.ts
describe('Flujo de compra', () => {
  beforeEach(() => {
    cy.login('[email protected]', 'password123');
  });

  it('Se puede agregar un producto al carrito y completar la compra', () => {
    cy.visit('/products');
    cy.get('[data-cy="product-card"]').first().click();
    cy.get('[data-cy="add-to-cart"]').click();
    cy.get('[data-cy="cart-badge"]').should('contain', '1');

    cy.visit('/cart');
    cy.get('[data-cy="checkout-button"]').click();

    cy.get('[data-cy="confirm-order"]').click();
    cy.get('[data-cy="order-complete"]').should('be.visible');
    cy.get('[data-cy="order-number"]').should('exist');
  });
});

Comparacion entre Playwright y Cypress

Aspecto	Playwright	Cypress
Multi-navegador	Chromium/Firefox/WebKit	Chrome/Firefox/Edge
Ejecucion paralela	Soporte nativo	Requiere Dashboard
Multi-pestana	Soportado	No soportado
Pruebas de API	Soportado	Soportado
Curva de aprendizaje	Algo alta	Baja

Pruebas de regresion visual

Con la funcionalidad de comparacion de capturas de pantalla de Playwright, puede detectar cambios no intencionados en la UI.

test('Verificar que la apariencia del header no ha cambiado', async ({ page }) => {
  await page.goto('/');
  await expect(page.locator('header')).toHaveScreenshot('header.png');
});

Resumen

Con Claude Code, puede implementar eficientemente pruebas E2E con Playwright o Cypress y construir suites de pruebas de alta calidad. Consulte tambien la automatizacion de pruebas de API y la guia de estrategias de pruebas como referencia.

Para mas detalles, consulte la documentacion oficial de Playwright y la documentacion oficial de Cypress.