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

Logout Template

Tests logout from navigation, session cleanup, and redirect behaviour.

Prerequisites

• Authenticated session (use storageState or login fixture)
• App running at {{baseUrl}}

---

TypeScript

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

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

  // Happy path: logout via nav menu
  test('logs out from user menu', async ({ page }) => {
    await page.goto('{{baseUrl}}/dashboard');
    await page.getByRole('button', { name: /user menu/i }).click();
    await page.getByRole('menuitem', { name: /sign out/i }).click();
    await expect(page).toHaveURL('{{baseUrl}}/login');
    await expect(page.getByRole('heading', { name: /sign in/i })).toBeVisible();
  });

  // Happy path: session cookies cleared
  test('clears session cookie on logout', async ({ page, context }) => {
    await page.goto('{{baseUrl}}/dashboard');
    await page.getByRole('button', { name: /user menu/i }).click();
    await page.getByRole('menuitem', { name: /sign out/i }).click();
    await expect(page).toHaveURL('{{baseUrl}}/login');
    const cookies = await context.cookies();
    const session = cookies.find(c => c.name === '{{sessionCookieName}}');
    expect(session).toBeUndefined();
  });

  // Happy path: accessing protected page after logout redirects
  test('redirects to login when accessing protected page after logout', async ({ page }) => {
    await page.goto('{{baseUrl}}/dashboard');
    await page.getByRole('button', { name: /user menu/i }).click();
    await page.getByRole('menuitem', { name: /sign out/i }).click();
    await page.goto('{{baseUrl}}/dashboard');
    await expect(page).toHaveURL(/\/login/);
  });

  // Error case: double logout (stale session)
  test('handles logout gracefully when session already expired', async ({ page, context }) => {
    await page.goto('{{baseUrl}}/dashboard');
    await context.clearCookies();
    await page.getByRole('button', { name: /user menu/i }).click();
    await page.getByRole('menuitem', { name: /sign out/i }).click();
    await expect(page).toHaveURL(/\/login/);
  });

  // Edge case: logout from multiple tabs
  test('invalidates session across tabs', async ({ page, context }) => {
    const tab2 = await context.newPage();
    await page.goto('{{baseUrl}}/dashboard');
    await tab2.goto('{{baseUrl}}/dashboard');
    await page.getByRole('button', { name: /user menu/i }).click();
    await page.getByRole('menuitem', { name: /sign out/i }).click();
    await tab2.reload();
    await expect(tab2).toHaveURL(/\/login/);
  });
});

---

JavaScript

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

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

  test('logs out from user menu', async ({ page }) => {
    await page.goto('{{baseUrl}}/dashboard');
    await page.getByRole('button', { name: /user menu/i }).click();
    await page.getByRole('menuitem', { name: /sign out/i }).click();
    await expect(page).toHaveURL('{{baseUrl}}/login');
  });

  test('clears session cookie on logout', async ({ page, context }) => {
    await page.goto('{{baseUrl}}/dashboard');
    await page.getByRole('button', { name: /user menu/i }).click();
    await page.getByRole('menuitem', { name: /sign out/i }).click();
    const cookies = await context.cookies();
    expect(cookies.find(c => c.name === '{{sessionCookieName}}')).toBeUndefined();
  });

  test('redirects protected page to login after logout', async ({ page }) => {
    await page.goto('{{baseUrl}}/dashboard');
    await page.getByRole('button', { name: /user menu/i }).click();
    await page.getByRole('menuitem', { name: /sign out/i }).click();
    await page.goto('{{baseUrl}}/dashboard');
    await expect(page).toHaveURL(/\/login/);
  });
});

Variants

Variant	Description
Happy path	Nav menu → sign out → login page
Cookie cleanup	Session cookie removed after logout
Protected redirect	Accessing /dashboard after logout → /login
Stale session	Already-expired session handled gracefully
Multi-tab	Logout invalidates other open tabs