claude-skills-reference/engineering-team/playwright-pro/templates/settings/password-change.md

Password Change Template

Tests current password verification, new password validation, and success flow.

Prerequisites

• Authenticated session via {{authStorageStatePath}}
• Current password: {{currentPassword}}
• New password: {{newPassword}}

---

TypeScript

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

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

  test.beforeEach(async ({ page }) => {
    await page.goto('{{baseUrl}}/settings/security');
  });

  // Happy path: successful password change
  test('changes password with valid inputs', async ({ page }) => {
    await page.getByRole('textbox', { name: /current password/i }).fill('{{currentPassword}}');
    await page.getByRole('textbox', { name: /^new password$/i }).fill('{{newPassword}}');
    await page.getByRole('textbox', { name: /confirm.*password/i }).fill('{{newPassword}}');
    await page.getByRole('button', { name: /change.*password|update password/i }).click();
    await expect(page.getByRole('alert')).toContainText(/password.*changed|updated successfully/i);
  });

  // Happy path: can log in with new password
  test('new password accepted on next login', async ({ page, context }) => {
    // Change password
    await page.getByRole('textbox', { name: /current password/i }).fill('{{currentPassword}}');
    await page.getByRole('textbox', { name: /^new password$/i }).fill('{{newPassword}}');
    await page.getByRole('textbox', { name: /confirm.*password/i }).fill('{{newPassword}}');
    await page.getByRole('button', { name: /change.*password/i }).click();
    await expect(page.getByRole('alert')).toContainText(/changed/i);
    // Log out and back in
    await page.getByRole('button', { name: /user menu/i }).click();
    await page.getByRole('menuitem', { name: /sign out/i }).click();
    await page.getByRole('textbox', { name: /email/i }).fill('{{username}}');
    await page.getByRole('textbox', { name: /password/i }).fill('{{newPassword}}');
    await page.getByRole('button', { name: /sign in/i }).click();
    await expect(page).toHaveURL('{{baseUrl}}/dashboard');
  });

  // Error case: wrong current password
  test('shows error when current password is wrong', async ({ page }) => {
    await page.getByRole('textbox', { name: /current password/i }).fill('wrong-password');
    await page.getByRole('textbox', { name: /^new password$/i }).fill('{{newPassword}}');
    await page.getByRole('textbox', { name: /confirm.*password/i }).fill('{{newPassword}}');
    await page.getByRole('button', { name: /change.*password/i }).click();
    await expect(page.getByRole('alert')).toContainText(/current password.*incorrect|wrong password/i);
  });

  // Error case: new passwords do not match
  test('shows error when confirmation does not match', async ({ page }) => {
    await page.getByRole('textbox', { name: /current password/i }).fill('{{currentPassword}}');
    await page.getByRole('textbox', { name: /^new password$/i }).fill('{{newPassword}}');
    await page.getByRole('textbox', { name: /confirm.*password/i }).fill('mismatch');
    await page.getByRole('button', { name: /change.*password/i }).click();
    await expect(page.getByText(/passwords.*do not match/i)).toBeVisible();
  });

  // Error case: new password too weak
  test('shows strength error for weak new password', async ({ page }) => {
    await page.getByRole('textbox', { name: /current password/i }).fill('{{currentPassword}}');
    await page.getByRole('textbox', { name: /^new password$/i }).fill('123');
    await page.getByRole('textbox', { name: /^new password$/i }).blur();
    await expect(page.getByText(/too weak|at least \d+ characters/i)).toBeVisible();
  });

  // Error case: new password same as current
  test('shows error when new password matches current', async ({ page }) => {
    await page.getByRole('textbox', { name: /current password/i }).fill('{{currentPassword}}');
    await page.getByRole('textbox', { name: /^new password$/i }).fill('{{currentPassword}}');
    await page.getByRole('textbox', { name: /confirm.*password/i }).fill('{{currentPassword}}');
    await page.getByRole('button', { name: /change.*password/i }).click();
    await expect(page.getByText(/same as.*current|choose.*different/i)).toBeVisible();
  });

  // Edge case: password strength meter updates on input
  test('strength meter reacts to new password input', async ({ page }) => {
    await page.getByRole('textbox', { name: /^new password$/i }).fill('weak');
    await expect(page.getByRole('meter', { name: /strength/i })).toHaveAttribute('aria-valuenow', '1');
    await page.getByRole('textbox', { name: /^new password$/i }).fill('Str0ng!Pass#2026');
    await expect(page.getByRole('meter', { name: /strength/i })).toHaveAttribute('aria-valuenow', '4');
  });
});

---

JavaScript

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

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

  test('changes password with valid inputs', async ({ page }) => {
    await page.goto('{{baseUrl}}/settings/security');
    await page.getByRole('textbox', { name: /current password/i }).fill('{{currentPassword}}');
    await page.getByRole('textbox', { name: /^new password$/i }).fill('{{newPassword}}');
    await page.getByRole('textbox', { name: /confirm.*password/i }).fill('{{newPassword}}');
    await page.getByRole('button', { name: /change.*password/i }).click();
    await expect(page.getByRole('alert')).toContainText(/changed|updated/i);
  });

  test('shows error for wrong current password', async ({ page }) => {
    await page.goto('{{baseUrl}}/settings/security');
    await page.getByRole('textbox', { name: /current password/i }).fill('wrong');
    await page.getByRole('textbox', { name: /^new password$/i }).fill('{{newPassword}}');
    await page.getByRole('textbox', { name: /confirm.*password/i }).fill('{{newPassword}}');
    await page.getByRole('button', { name: /change.*password/i }).click();
    await expect(page.getByRole('alert')).toContainText(/incorrect|wrong/i);
  });

  test('shows mismatch error', async ({ page }) => {
    await page.goto('{{baseUrl}}/settings/security');
    await page.getByRole('textbox', { name: /current password/i }).fill('{{currentPassword}}');
    await page.getByRole('textbox', { name: /^new password$/i }).fill('{{newPassword}}');
    await page.getByRole('textbox', { name: /confirm.*password/i }).fill('nope');
    await page.getByRole('button', { name: /change.*password/i }).click();
    await expect(page.getByText(/do not match/i)).toBeVisible();
  });
});

Variants

Variant	Description
Success	All fields valid → success alert
Login with new pw	New password accepted at login
Wrong current	Incorrect current → error alert
Mismatch	Confirm ≠ new → validation error
Weak password	Short password → strength error
Same as current	Reuse blocked with error
Strength meter	Meter aria-valuenow updates on input