How to slow down test execution in Playwright?

The Answer

Use the `slowMo` option in launch options to add a fixed delay (in ms) between every Playwright action. Use `--debug` flag or `page.pause()` for step-through debugging.

Deep Dive Explanation

Remove `slowMo` before committing code to the repository — a `slowMo: 1000` with 100 tests adds 100+ seconds to your CI pipeline for no benefit. Use environment variables to toggle it on/off, keeping your pipeline fast while enabling it locally for observation.

example.spec.ts

// playwright.config.ts - add slowMo for debugging
export default defineConfig({
  use: {
    launchOptions: {
      slowMo: 500, // 500ms pause after each action (not in CI!)
    },
    headless: false, // See the slowdown visually
  },
});

// Better: Only slow down in development
export default defineConfig({
  use: {
    launchOptions: {
      slowMo: process.env.SLOWMO ? parseInt(process.env.SLOWMO) : 0,
    },
  },
});
// Run with: SLOWMO=1000 npx playwright test --headed

// Alternative: pause at a specific point
test('debug specific step', async ({ page }) => {
  await page.goto('/checkout');
  await page.pause(); // Opens Inspector here, then continue manually
  await page.getByRole('button', { name: 'Pay' }).click();
});