Playwright vs Cypress Comparación

// Playwright Test - Flujo de login y mock de API (TypeScript)
import { test, expect } from '@playwright/test';

test.describe('Login flow', () => {
  test('logs in with valid credentials and sees the dashboard', async ({ page }) => {
    // Mock de red - no requiere configuración adicional
    await page.route('**/api/login', async (route) => {
      await route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify({ token: 'test-token', user: { name: 'Ayse' } }),
      });
    });

    await page.goto('/login');
    await page.getByLabel('Email').fill('ayse@example.com');
    await page.getByLabel('Password').fill('strong-password-123');
    await page.getByRole('button', { name: 'Sign in' }).click();

    // Auto-wait: el locator espera hasta que sea visible
    await expect(page.getByText('Welcome, Ayse')).toBeVisible();
    await expect(page).toHaveURL('/dashboard');
  });

  test('finds the pay button inside the checkout iframe (cross-frame)', async ({ page }) => {
    await page.goto('/checkout');

    // v1.63.0: frameLocator sin selector busca en todo el árbol de sub-frames
    const payButton = page.frameLocator().getByRole('button', { name: 'Pay' });
    await payButton.click();

    await expect(page.getByText('Payment successful')).toBeVisible();
  });
});

test('runs in parallel across 3 browsers (configured in playwright.config.ts)', async ({ page }) => {
  await page.goto('/');
  await expect(page).toHaveTitle(/Home/);
});

// Cypress - Flujo de login y mock de API (JavaScript/TypeScript)
describe('Login flow', () => {
  it('logs in with valid credentials and sees the dashboard', () => {
    // Stub de red con cy.intercept
    cy.intercept('POST', '/api/login', {
      statusCode: 200,
      body: { token: 'test-token', user: { name: 'Ayse' } },
    }).as('loginRequest');

    cy.visit('/login');
    cy.get('[data-cy=email]').type('ayse@example.com');
    cy.get('[data-cy=password]').type('strong-password-123');
    cy.get('[data-cy=submit]').click();

    cy.wait('@loginRequest');

    // Reintento automático de Cypress: espera hasta que el elemento sea visible
    cy.contains('Welcome, Ayse').should('be.visible');
    cy.url().should('include', '/dashboard');
  });

  it('redirects to the cross-origin payment page (cy.origin required)', () => {
    cy.visit('/checkout');
    cy.get('[data-cy=pay-button]').click();

    // Al cambiar a un origin diferente, cy.origin() es obligatorio
    cy.origin('https://pay.example.com', () => {
      cy.get('[data-cy=confirm-payment]').click();
      cy.contains('Payment confirmed').should('be.visible');
    });
  });
});

// cypress.config.js — configuración E2E básica
module.exports = {
  e2e: {
    baseUrl: 'http://localhost:3000',
    experimentalRunAllSpecs: true,
    setupNodeEvents(on, config) {
      return config;
    },
  },
};