claude-skills-reference/engineering-team/playwright-pro/templates/auth/session-timeout.md

Session Timeout Template

Tests auto-logout after inactivity and session refresh behaviour.

Prerequisites

• Authenticated session via {{authStorageStatePath}}
• Session timeout configured to {{sessionTimeoutMs}} ms in test env
• App running at {{baseUrl}}

---

TypeScript

import { test, expect } from '@playwright/test';

test.describe('Session Timeout', () => {
  test.use({ storageState: '{{authStorageStatePath}}' });

  // Happy path: session refresh on activity
  test('refreshes session on user activity', async ({ page }) => {
    await page.goto('{{baseUrl}}/dashboard');
    await page.clock.install();
    // Advance to just before timeout
    await page.clock.fastForward({{sessionTimeoutMs}} - 5000);
    await page.getByRole('button', { name: /any interactive element/i }).click();
    // Advance past original timeout — session should still be valid
    await page.clock.fastForward(10_000);
    await expect(page.getByRole('heading', { name: /dashboard/i })).toBeVisible();
  });

  // Happy path: warning dialog shown before logout
  test('shows session-expiry warning before auto-logout', async ({ page }) => {
    await page.goto('{{baseUrl}}/dashboard');
    await page.clock.install();
    await page.clock.fastForward({{sessionTimeoutMs}} - {{warningLeadMs}});
    await expect(page.getByRole('dialog', { name: /session.*expiring/i })).toBeVisible();
    await expect(page.getByRole('button', { name: /stay signed in/i })).toBeVisible();
  });

  // Happy path: extend session from warning dialog
  test('extends session when "stay signed in" clicked', async ({ page }) => {
    await page.goto('{{baseUrl}}/dashboard');
    await page.clock.install();
    await page.clock.fastForward({{sessionTimeoutMs}} - {{warningLeadMs}});
    await page.getByRole('button', { name: /stay signed in/i }).click();
    await expect(page.getByRole('dialog', { name: /session.*expiring/i })).toBeHidden();
    await expect(page.getByRole('heading', { name: /dashboard/i })).toBeVisible();
  });

  // Error case: auto-logout after inactivity
  test('redirects to login after session timeout', async ({ page }) => {
    await page.goto('{{baseUrl}}/dashboard');
    await page.clock.install();
    await page.clock.fastForward({{sessionTimeoutMs}} + 1000);
    await expect(page).toHaveURL(/\/login/);
    await expect(page.getByText(/session.*expired|signed out/i)).toBeVisible();
  });

  // Edge case: API calls return 401 after timeout
  test('shows re-auth prompt when API returns 401', async ({ page }) => {
    await page.goto('{{baseUrl}}/dashboard');
    await page.route('{{baseUrl}}/api/**', route =>
      route.fulfill({ status: 401, body: JSON.stringify({ error: 'Unauthorized' }) })
    );
    await page.getByRole('button', { name: /refresh|reload/i }).click();
    await expect(page.getByRole('dialog', { name: /session.*expired/i })).toBeVisible();
  });
});

---

JavaScript

const { test, expect } = require('@playwright/test');

test.describe('Session Timeout', () => {
  test.use({ storageState: '{{authStorageStatePath}}' });

  test('shows warning before auto-logout', async ({ page }) => {
    await page.goto('{{baseUrl}}/dashboard');
    await page.clock.install();
    await page.clock.fastForward({{sessionTimeoutMs}} - {{warningLeadMs}});
    await expect(page.getByRole('dialog', { name: /session.*expiring/i })).toBeVisible();
  });

  test('auto-logs out after inactivity', async ({ page }) => {
    await page.goto('{{baseUrl}}/dashboard');
    await page.clock.install();
    await page.clock.fastForward({{sessionTimeoutMs}} + 1000);
    await expect(page).toHaveURL(/\/login/);
  });

  test('extends session on "stay signed in"', async ({ page }) => {
    await page.goto('{{baseUrl}}/dashboard');
    await page.clock.install();
    await page.clock.fastForward({{sessionTimeoutMs}} - {{warningLeadMs}});
    await page.getByRole('button', { name: /stay signed in/i }).click();
    await expect(page.getByRole('dialog', { name: /session.*expiring/i })).toBeHidden();
  });
});

Variants

Variant	Description
Session refresh	Activity before timeout resets the clock
Warning dialog	Shown N ms before timeout
Extend session	"Stay signed in" dismisses warning
Auto-logout	Inactivity past timeout → /login
401 from API	Re-auth dialog shown when backend rejects request