Test timeout of 30000ms exceeded

Your Playwright test took too long.

Why this happens

Playwright enforces a default 30-second timeout per test. The test exceeds this when the page loads slowly, a selector never appears (wrong selector or element not rendered), or the app is waiting on a network request that hangs. CI environments with limited resources are especially prone to this.

Fix 1: Increase timeout

// Per test
test('slow test', async ({ page }) => {
  test.setTimeout(60000);
  await page.goto('/slow-page');
});

// Global — playwright.config.ts
export default defineConfig({
  timeout: 60000,
});

Fix 2: Wait for the right thing

// ❌ Arbitrary wait
await page.waitForTimeout(5000);

// ✅ Wait for specific element
await page.waitForSelector('[data-testid="loaded"]');

// ✅ Wait for network idle
await page.goto('/page', { waitUntil: 'networkidle' });

Fix 3: Check if the page actually loads

const response = await page.goto('/page');
console.log(response?.status()); // 200? 404? 500?

Alternative solution: Use web-first assertions

Playwright’s expect auto-retries until timeout, which is more reliable than manual waits:

await expect(page.getByTestId('loaded')).toBeVisible({ timeout: 10000 });

Prevention

• Use data-testid attributes on key elements so selectors don’t break when UI changes.
• Run tests with --trace on in CI to get full traces for debugging timeout failures.

Related: Playwright vs Cypress · Vitest vs Jest · Jest cheat sheet · Generate E2E Tests with AI + Playwright