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

```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

```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 |