skills/playwright-pro/templates/auth/remember-me.md

Remember Me Template

Tests persistent login cookie behaviour and expiry.

Prerequisites

• Valid account: {{username}} / {{password}}
• {{sessionCookieName}} cookie used for auth
• App running at {{baseUrl}}

---

TypeScript

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

test.describe('Remember Me', () => {
  // Happy path: cookie is long-lived when remember me is checked
  test('sets persistent cookie when remember me is checked', async ({ page, context }) => {
    await page.goto('{{baseUrl}}/login');
    await page.getByRole('textbox', { name: /email/i }).fill('{{username}}');
    await page.getByRole('textbox', { name: /password/i }).fill('{{password}}');
    await page.getByRole('checkbox', { name: /remember me/i }).check();
    await page.getByRole('button', { name: /sign in/i }).click();
    await expect(page).toHaveURL('{{baseUrl}}/dashboard');
    const cookies = await context.cookies();
    const session = cookies.find(c => c.name === '{{sessionCookieName}}');
    // Cookie should expire > 7 days from now
    expect(session?.expires).toBeGreaterThan(Date.now() / 1000 + 7 * 86400);
  });

  // Happy path: session cookie (no remember me) is session-scoped
  test('sets session-scoped cookie when remember me is unchecked', async ({ page, context }) => {
    await page.goto('{{baseUrl}}/login');
    await page.getByRole('textbox', { name: /email/i }).fill('{{username}}');
    await page.getByRole('textbox', { name: /password/i }).fill('{{password}}');
    const checkbox = page.getByRole('checkbox', { name: /remember me/i });
    if (await checkbox.isChecked()) await checkbox.uncheck();
    await page.getByRole('button', { name: /sign in/i }).click();
    await expect(page).toHaveURL('{{baseUrl}}/dashboard');
    const cookies = await context.cookies();
    const session = cookies.find(c => c.name === '{{sessionCookieName}}');
    // Session cookie: expires = -1 (browser session only)
    expect(session?.expires).toBeLessThanOrEqual(0);
  });

  // Happy path: persistent login survives page reload
  test('stays logged in across browser restart with remember me', async ({ page, context }) => {
    await page.goto('{{baseUrl}}/login');
    await page.getByRole('textbox', { name: /email/i }).fill('{{username}}');
    await page.getByRole('textbox', { name: /password/i }).fill('{{password}}');
    await page.getByRole('checkbox', { name: /remember me/i }).check();
    await page.getByRole('button', { name: /sign in/i }).click();
    await expect(page).toHaveURL('{{baseUrl}}/dashboard');
    // Simulate new browser session by closing & reopening page (cookies persist)
    await page.close();
    const newPage = await context.newPage();
    await newPage.goto('{{baseUrl}}/dashboard');
    await expect(newPage).toHaveURL('{{baseUrl}}/dashboard');
    await expect(newPage.getByRole('heading', { name: /dashboard/i })).toBeVisible();
  });

  // Error case: expired persistent cookie redirects to login
  test('redirects to login when persistent cookie has expired', async ({ page, context }) => {
    await context.addCookies([{
      name: '{{sessionCookieName}}',
      value: '{{expiredCookieValue}}',
      domain: '{{cookieDomain}}',
      path: '/',
      expires: Math.floor(Date.now() / 1000) - 1, // already expired
    }]);
    await page.goto('{{baseUrl}}/dashboard');
    await expect(page).toHaveURL(/\/login/);
  });

  // Edge case: remember me checkbox state is preserved on validation error
  test('retains remember me checkbox state after failed login', async ({ page }) => {
    await page.goto('{{baseUrl}}/login');
    await page.getByRole('checkbox', { name: /remember me/i }).check();
    await page.getByRole('textbox', { name: /email/i }).fill('{{username}}');
    await page.getByRole('textbox', { name: /password/i }).fill('wrong');
    await page.getByRole('button', { name: /sign in/i }).click();
    await expect(page.getByRole('alert')).toContainText(/invalid/i);
    await expect(page.getByRole('checkbox', { name: /remember me/i })).toBeChecked();
  });
});

---

JavaScript

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

test.describe('Remember Me', () => {
  test('sets persistent cookie when remember me is checked', async ({ page, context }) => {
    await page.goto('{{baseUrl}}/login');
    await page.getByRole('textbox', { name: /email/i }).fill('{{username}}');
    await page.getByRole('textbox', { name: /password/i }).fill('{{password}}');
    await page.getByRole('checkbox', { name: /remember me/i }).check();
    await page.getByRole('button', { name: /sign in/i }).click();
    const cookies = await context.cookies();
    const session = cookies.find(c => c.name === '{{sessionCookieName}}');
    expect(session?.expires).toBeGreaterThan(Date.now() / 1000 + 7 * 86400);
  });

  test('sets session cookie when remember me is unchecked', async ({ page, context }) => {
    await page.goto('{{baseUrl}}/login');
    await page.getByRole('textbox', { name: /email/i }).fill('{{username}}');
    await page.getByRole('textbox', { name: /password/i }).fill('{{password}}');
    await page.getByRole('button', { name: /sign in/i }).click();
    const cookies = await context.cookies();
    const session = cookies.find(c => c.name === '{{sessionCookieName}}');
    expect(session?.expires).toBeLessThanOrEqual(0);
  });
});

Variants

Variant	Description
Persistent cookie	Remember me → long-lived cookie (>7 days)
Session cookie	No remember me → session-scoped cookie
Survives reload	Persistent cookie keeps user logged in across restart
Expired cookie	Stale cookie → redirect to /login
Checkbox retained	State preserved after failed login attempt