Playwright donne un accès direct aux cookies et au localStorage via l'objet context. Vous pouvez lire les valeurs de session après connexion, prédéfinir l'état d'authentification avant un test, et vérifier que les opérations de stockage fonctionnent correctement.

Lire les cookies

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

test('la connexion définit le cookie de session', async ({ page, context }) => {
  await page.goto('/login');
  await page.getByLabel('Email').fill('user@example.com');
  await page.getByLabel('Mot de passe').fill('password123');
  await page.getByRole('button', { name: 'Se connecter' }).click();

  await expect(page).toHaveURL('/dashboard');

  // Lire tous les cookies de la page courante
  const cookies = await context.cookies();
  const sessionCookie = cookies.find(c => c.name === 'session_token');

  expect(sessionCookie).toBeDefined();
  expect(sessionCookie!.httpOnly).toBe(true); // Non lisible par JS — c'est bien
  expect(sessionCookie!.secure).toBe(true);   // Envoyé uniquement via HTTPS
  expect(sessionCookie!.sameSite).toBe('Strict');
});

context.cookies() retourne tous les cookies de toutes les pages du contexte courant. Filtrez par name, domain ou path selon vos besoins.

Définir des cookies

Prédéfinissez des cookies avant de naviguer : utile pour tester des états authentifiés sans passer par le flux de connexion.

test('l\'utilisateur authentifié voit le tableau de bord', async ({ page, context }) => {
  // Définir le cookie d'auth directement — pas besoin de l'UI de connexion
  await context.addCookies([{
    name: 'session_token',
    value: 'valid-test-token-abc123',
    domain: 'localhost',
    path: '/',
    httpOnly: true,
    secure: false, // false pour localhost
    sameSite: 'Lax',
  }]);

  await page.goto('/dashboard');
  await expect(page.getByRole('heading', { name: 'Dashboard' })).toBeVisible();
});

Pour un setup d'auth de qualité production, préférez storageState : il capture les cookies ET le localStorage dans un seul fichier. L'injection manuelle de cookies est utile quand vous avez besoin d'un contrôle précis sur les attributs individuels.

Effacer les cookies

// Effacer tous les cookies du contexte
await context.clearCookies();

// La plupart des apps fournissent un endpoint /logout
// qui efface le cookie de session côté serveur
await page.goto('/logout');

Tester le comportement d'expiration des cookies

test('une session expirée redirige vers la connexion', async ({ page, context }) => {
  const yesterday = new Date(Date.now() - 86400000);
  await context.addCookies([{
    name: 'session_token',
    value: 'expired-token',
    domain: 'localhost',
    path: '/',
    expires: yesterday.getTime() / 1000, // Timestamp Unix en secondes
  }]);

  await page.goto('/dashboard');
  await expect(page).toHaveURL('/login');
});

Travailler avec localStorage

Playwright n'a pas d'API localStorage directe. Vous y accédez via page.evaluate() :

// Lire localStorage
const theme = await page.evaluate(() => localStorage.getItem('theme'));
expect(theme).toBe('dark');

// Définir localStorage avant l'interaction avec la page
await page.evaluate(() => {
  localStorage.setItem('theme', 'dark');
  localStorage.setItem('user_preferences', JSON.stringify({ fontSize: 'large' }));
});

// Effacer une clé spécifique
await page.evaluate(() => localStorage.removeItem('theme'));

// Effacer tout localStorage
await page.evaluate(() => localStorage.clear());

Vérifier que localStorage persiste les préférences

test('la préférence mode sombre persiste après rechargement', async ({ page }) => {
  await page.goto('/settings');
  await page.getByRole('switch', { name: 'Mode sombre' }).click();

  // Vérifier que c'est stocké
  const stored = await page.evaluate(() => localStorage.getItem('theme'));
  expect(stored).toBe('dark');

  // Recharger la page
  await page.reload();

  // Vérifier que la préférence est restaurée depuis localStorage
  await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
});

Prédéfinir localStorage

test('l\'utilisateur avec grande police voit un texte plus grand', async ({ page }) => {
  await page.goto('/'); // Naviguer d'abord pour définir le domaine

  await page.evaluate(() => {
    localStorage.setItem('fontSize', 'large');
  });

  await page.reload(); // Recharger pour que l'app lise la préférence

  const body = await page.locator('body');
  await expect(body).toHaveCSS('font-size', '18px');
});

sessionStorage

Même API que localStorage, portée différente : sessionStorage se vide à la fermeture de l'onglet.

// Lire sessionStorage
const cartItems = await page.evaluate(() => sessionStorage.getItem('cart'));

// Définir sessionStorage
await page.evaluate(() => {
  sessionStorage.setItem('cart', JSON.stringify([{ id: 1, qty: 2 }]));
});

Sauvegarder et restaurer l'état complet du navigateur

Pour les tests d'authentification à grande échelle, capturez l'état de stockage complet (cookies + localStorage) dans un fichier :

// global-setup.ts — exécuté une fois avant tous les tests
import { chromium } from '@playwright/test';

async function globalSetup() {
  const browser = await chromium.launch();
  const page = await browser.newPage();

  await page.goto('http://localhost:3000/login');
  await page.getByLabel('Email').fill('testuser@example.com');
  await page.getByLabel('Mot de passe').fill('password123');
  await page.getByRole('button', { name: 'Se connecter' }).click();
  await page.waitForURL('/dashboard');

  // Sauvegarder cookies + localStorage dans un fichier
  await page.context().storageState({ path: 'playwright/.auth/user.json' });
  await browser.close();
}

export default globalSetup;

Réutilisez ensuite dans les tests sans vous reconnecter :

// playwright.config.ts
projects: [{
  name: 'authenticated',
  use: { storageState: 'playwright/.auth/user.json' },
}],

C'est le schéma recommandé pour les suites de tests authentifiés : plus rapide, plus fiable, et ne dépend pas du bon fonctionnement de l'UI de connexion.

→ See also: Gérer l'Authentification dans Playwright avec storageState (Sans Se Connecter à Chaque Test) | Isolation des Tests: Pourquoi Chaque Test Playwright Doit Être sans État | Configuration et Nettoyage Global dans Playwright