Slow Checkout

Simulate a slow payment endpoint and assert that the UI shows progress while preventing duplicate submits.

Playwright

import { test, expect } from '@playwright/test';
import { injectChaos, getChaosLog } from '@chaos-maker/playwright';

test('checkout waits safely on slow payment API', async ({ page }) => {
  await injectChaos(page, {
    seed: 42,
    network: { latencies: [{ urlPattern: '/api/payments', delayMs: 8000, probability: 1 }] },
  });
  await page.goto('/checkout');
  await page.click('#pay-now');
  await expect(page.locator('[data-testid="loading-spinner"]')).toBeVisible();
  await expect(page.locator('#pay-now')).toBeDisabled();
  const log = await getChaosLog(page);
  expect(log.some((event) => event.type === 'network:latency' && event.applied)).toBe(true);
});

Cypress

it('checkout waits safely on slow payment API', () => {
  cy.injectChaos({
    seed: 42,
    network: { latencies: [{ urlPattern: '/api/payments', delayMs: 8000, probability: 1 }] },
  });
  cy.visit('/checkout');
  cy.get('#pay-now').click();
  cy.get('[data-testid="loading-spinner"]').should('be.visible');
  cy.get('#pay-now').should('be.disabled');
  cy.getChaosLog().should((log) => {
    expect(log.some((event) => event.type === 'network:latency' && event.applied)).to.equal(true);
  });
});

WebdriverIO

import { browser, expect, $ } from '@wdio/globals';
import { injectChaos, getChaosLog } from '@chaos-maker/webdriverio';

it('checkout waits safely on slow payment API', async () => {
  await browser.url('/checkout');
  await injectChaos(browser, {
    seed: 42,
    network: { latencies: [{ urlPattern: '/api/payments', delayMs: 8000, probability: 1 }] },
  });
  await $('#pay-now').click();
  await expect($('[data-testid="loading-spinner"]')).toBeDisplayed();
  await expect($('#pay-now')).toBeDisabled();
  const log = await getChaosLog(browser);
  expect(log.some((event) => event.type === 'network:latency' && event.applied)).toBe(true);
});

Puppeteer

import { injectChaos, getChaosLog } from '@chaos-maker/puppeteer';

await injectChaos(page, {
  seed: 42,
  network: { latencies: [{ urlPattern: '/api/payments', delayMs: 8000, probability: 1 }] },
});
await page.goto('http://localhost:3000/checkout');
await page.click('#pay-now');
await page.waitForSelector('[data-testid="loading-spinner"]');
const disabled = await page.$eval('#pay-now', (button) => (button as HTMLButtonElement).disabled);
if (!disabled) throw new Error('Expected pay button to be disabled');
const log = await getChaosLog(page);
if (!log.some((event) => event.type === 'network:latency' && event.applied)) {
  throw new Error('Expected latency chaos');
}