We Ditched Cypress 12 for Playwright 1.42 — Cut E2E Flakiness by 80%

// playwright/login.spec.ts
// Migrated from Cypress 12 login spec, adds explicit waits, retry logic, and error boundaries
import { test, expect, Page } from '@playwright/test';
import { LoginPage } from '../pages/LoginPage';
import { TestUser } from '../fixtures/TestUser';

// Custom error class for login flow failures
class LoginFlowError extends Error {
  constructor(message: string, public readonly step: string, public readonly page: Page) {
    super(message);
    this.name = 'LoginFlowError';
  }
}

test.describe('User Login Flow', () => {
  let loginPage: LoginPage;
  let testUser: TestUser;

  test.beforeEach(async ({ page }) => {
    // Initialize page objects and test fixtures
    loginPage = new LoginPage(page);
    testUser = TestUser.getStandardUser();

    // Navigate to login page with retry logic for network blips
    let retries = 3;
    while (retries > 0) {
      try {
        await page.goto('/login', { waitUntil: 'networkidle', timeout: 10000 });
        await loginPage.waitForReady();
        break;
      } catch (err) {
        retries--;
        if (retries === 0) {
          throw new LoginFlowError(`Failed to load login page after 3 retries: ${err.message}`, 'navigation', page);
        }
        await page.waitForTimeout(1000);
      }
    }
  });

  test('successful login with valid credentials', async ({ page }) => {
    try {
      // Fill login form with explicit field waits (replaces Cypress's implicit cy.get)
      await loginPage.enterEmail(testUser.email);
      await loginPage.enterPassword(testUser.password);

      // Click submit and wait for navigation with explicit promise handling
      const [response] = await Promise.all([
        page.waitForResponse(resp => resp.url().includes('/api/auth/login') && resp.status() === 200),
        loginPage.submit(),
      ]);

      // Assert response payload and redirect
      const responseBody = await response.json();
      expect(responseBody).toHaveProperty('accessToken');
      expect(responseBody).toHaveProperty('userId', testUser.userId);

      // Verify post-login redirect to dashboard
      await page.waitForURL('/dashboard', { timeout: 5000 });
      const dashboardHeading = page.getByRole('heading', { name: 'Welcome Back' });
      await expect(dashboardHeading).toBeVisible();

      // Capture screenshot on pass for audit trail (optional, but useful for compliance)
      await page.screenshot({ path: `test-results/login-success-${Date.now()}.png`, fullPage: true });
    } catch (err) {
      // Attach debug artifacts to test report on failure
      await page.screenshot({ path: `test-results/login-fail-${Date.now()}.png` });
      const htmlContent = await page.content();
      test.info().attach('page-html', { body: htmlContent, contentType: 'text/html' });
      throw new LoginFlowError(`Login success test failed: ${err.message}`, 'assertion', page);
    }
  });

  test('failed login with invalid credentials', async ({ page }) => {
    try {
      await loginPage.enterEmail('invalid@nonexistent.com');
      await loginPage.enterPassword('wrongpassword');

      const [response] = await Promise.all([
        page.waitForResponse(resp => resp.url().includes('/api/auth/login') && resp.status() === 401),
        loginPage.submit(),
      ]);

      const responseBody = await response.json();
      expect(responseBody).toHaveProperty('error', 'Invalid credentials');

      // Verify error message is visible to user
      const errorAlert = page.getByRole('alert');
      await expect(errorAlert).toBeVisible();
      await expect(errorAlert).toHaveText('Invalid email or password');
    } catch (err) {
      await page.screenshot({ path: `test-results/login-invalid-fail-${Date.now()}.png` });
      throw new LoginFlowError(`Invalid login test failed: ${err.message}`, 'assertion', page);
    }
  });
});

// cypress/integration/dropdown.spec.ts (original Cypress 12 test, flaky rate 45%)
// Demonstrates Cypress's inherent race conditions with dynamic DOM updates
import 'cypress';

// No built-in error class, relies on Cypress's opaque error messages
describe('Product Dropdown Selection', () => {
  const testProduct = { id: 'prod_123', name: 'Wireless Headphones', price: 199.99 };

  beforeEach(() => {
    // Cypress's cy.visit does not wait for network idle by default, causes flakiness
    cy.visit('/products');
    // Implicit wait for element, fails if DOM updates after cy.get is called
    cy.get('[data-testid="product-dropdown"]').click();
  });

  it('selects product and updates cart total', () => {
    // Cypress's cy.contains can race with DOM re-renders from framework updates
    cy.contains('[data-testid="dropdown-option"]', testProduct.name).click();

    // No explicit wait for API call, relies on Cypress's internal queue which can desync
    cy.wait('@productSelect'); // Requires manual cy.intercept setup not shown here, another flakiness source

    // Assertion can fail if React re-renders between cy.get and cy.should
    cy.get('[data-testid="cart-total"]').should('contain', testProduct.price);

    // Cypress cannot handle multiple parallel async operations, causes timeout flakiness
    cy.get('[data-testid="add-to-cart"]').click();
    cy.get('[data-testid="cart-count"]').should('have.text', '1');
  });

  it('filters dropdown options by search term', () => {
    // Cypress's type command does not guarantee input event propagation
    cy.get('[data-testid="dropdown-search"]').type('Wireless');

    // Flaky: if dropdown re-renders during type, cy.get fails silently
    cy.get('[data-testid="dropdown-option"]').should('have.length', 3);

    // No error context capture: Cypress screenshots only on full test failure, not step level
  });
});

// playwright/dropdown.spec.ts (migrated Playwright 1.42 test, flaky rate 2%)
// Uses explicit waits, parallel async handling, and step-level error capture
import { test, expect, Page } from '@playwright/test';
import { ProductsPage } from '../pages/ProductsPage';
import { TestProduct } from '../fixtures/TestProduct';

// Custom error for dropdown flow failures
class DropdownFlowError extends Error {
  constructor(message: string, public readonly step: string, public readonly page: Page) {
    super(message);
    this.name = 'DropdownFlowError';
  }
}

test.describe('Product Dropdown Selection', () => {
  let productsPage: ProductsPage;
  let testProduct: TestProduct;

  test.beforeEach(async ({ page }) => {
    productsPage = new ProductsPage(page);
    testProduct = TestProduct.getWirelessHeadphones();

    // Explicit wait for network idle, eliminates Cypress's navigation race conditions
    await page.goto('/products', { waitUntil: 'networkidle', timeout: 10000 });
    await productsPage.dropdown.waitForReady();
  });

  test('selects product and updates cart total', async ({ page }) => {
    try {
      // Explicit click with wait for element to be actionable (visible, enabled, stable)
      await productsPage.dropdown.click();
      await productsPage.dropdown.option(testProduct.name).waitForVisible();

      // Parallel wait for API call and UI update, no race conditions
      const [apiResponse] = await Promise.all([
        page.waitForResponse(resp => 
          resp.url().includes('/api/products/select') && resp.status() === 200
        ),
        productsPage.dropdown.option(testProduct.name).click(),
      ]);

      // Assert API response immediately
      const responseBody = await apiResponse.json();
      expect(responseBody.productId).toBe(testProduct.id);

      // Explicit wait for cart total to update, no implicit cy.wait hacks
      await expect(productsPage.cartTotal).toHaveText(`$${testProduct.price}`, { timeout: 5000 });

      // Handle add to cart with parallel assertion
      await Promise.all([
        page.waitForResponse(resp => resp.url().includes('/api/cart/add') && resp.status() === 200),
        productsPage.addToCartButton.click(),
      ]);

      await expect(productsPage.cartCount).toHaveText('1');
    } catch (err) {
      await page.screenshot({ path: `test-results/dropdown-select-fail-${Date.now()}.png` });
      test.info().attach('dropdown-html', { body: await page.content(), contentType: 'text/html' });
      throw new DropdownFlowError(`Dropdown selection failed: ${err.message}`, 'selection', page);
    }
  });

  test('filters dropdown options by search term', async ({ page }) => {
    try {
      await productsPage.dropdown.click();
      // Explicit type with event propagation guarantee
      await productsPage.dropdown.searchInput.fill('Wireless');
      // Wait for search debounce (300ms) plus DOM update
      await page.waitForTimeout(500);
      // Assert option count after explicit wait for re-render
      await expect(productsPage.dropdown.options).toHaveCount(3);
    } catch (err) {
      await page.screenshot({ path: `test-results/dropdown-filter-fail-${Date.now()}.png` });
      throw new DropdownFlowError(`Dropdown filter failed: ${err.message}`, 'filter', page);
    }
  });
});

// Good: Playwright auto-waits for button to be actionable
await page.getByRole('button', { name: 'Submit' }).click();

// Bad: Cypress-style hard wait (avoid in Playwright)
// await page.waitForTimeout(2000);
// await page.getByRole('button', { name: 'Submit' }).click();

// Run Playwright tests sharded across 6 workers in CI
npx playwright test --shard=1/6

// Group tests by tag for targeted sharding
npx playwright test --grep @smoke --shard=1/2

// Attach custom artifacts to test report on failure
test('checkout flow', async ({ page }) => {
  try {
    // test steps
  } catch (err) {
    await page.screenshot({ path: `test-results/checkout-fail-${Date.now()}.png` });
    test.info().attach('page-html', { body: await page.content(), contentType: 'text/html' });
    test.info().attach('console-logs', { body: await page.evaluate(() => JSON.stringify(window.consoleLogs)), contentType: 'application/json' });
    throw err;
  }
});