cardosofelipe/syndarix
1
0
Fork 0
forked from cardosofelipe/fast-next-template
Code Issues 18 Pull Requests Wiki Activity

Refactor E2E tests to use ID selectors and enhance mock auth injection

Browse Source 
- Updated E2E selectors for input fields to use stable IDs instead of `name` attributes, improving reliability and alignment with form field guarantees.
- Refined mock auth state injection in Playwright to establish test store state prior to page load.
- Optimized test clarity and consistency by consolidating selector logic and introducing stabilization steps where necessary.
- Removed redundant `AuthInitializer` mocks and refactored related tests to align with the updated `AuthContext` pattern.
- Enhanced readability and maintainability across affected test suites.
This commit is contained in:
Felipe Cardoso
2025-11-04 00:32:07 +01:00
parent 26d43ff9e1
commit 7c98ceb5b9
6 changed files with 152 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
frontend/e2e/settings-password.spec.ts
View File

@@ -18,16 +18,16 @@ test.describe('Password Change', () => {
test('should display password change page', async ({ page }) => {
// Check page title
await expect(page.locator('h2')).toContainText(/Change Password/i);
await expect(page.locator('h2')).toContainText(/Password Settings/i);
// Check form fields exist
await expect(page.locator('input[name="current_password"]')).toBeVisible();
await expect(page.locator('input[name="new_password"]')).toBeVisible();
await expect(page.locator('input[name="confirm_password"]')).toBeVisible();
await expect(page.locator('#current_password')).toBeVisible();
await expect(page.locator('#new_password')).toBeVisible();
await expect(page.locator('#confirm_password')).toBeVisible();
});
test('should have submit button disabled when form is pristine', async ({ page }) => {
await page.waitForSelector('input[name="current_password"]');
await page.waitForSelector('#current_password');
// Submit button should be disabled initially
const submitButton = page.locator('button[type="submit"]');
@@ -35,12 +35,15 @@ test.describe('Password Change', () => {
});
test('should enable submit button when all fields are filled', async ({ page }) => {
await page.waitForSelector('input[name="current_password"]');
await page.waitForSelector('#current_password');
// Fill all password fields
await page.fill('input[name="current_password"]', 'Admin123!');
await page.fill('input[name="new_password"]', 'NewAdmin123!');
await page.fill('input[name="confirm_password"]', 'NewAdmin123!');
await page.locator('#current_password').fill('Admin123!');
await page.locator('#new_password').fill('NewAdmin123!');
await page.locator('#confirm_password').fill('NewAdmin123!');
// Wait a bit for form state to update
await page.waitForTimeout(100);
// Submit button should be enabled
const submitButton = page.locator('button[type="submit"]');
@@ -48,10 +51,13 @@ test.describe('Password Change', () => {
});
test('should show cancel button when form is dirty', async ({ page }) => {
await page.waitForSelector('input[name="current_password"]');
await page.waitForSelector('#current_password');
// Fill current password
await page.fill('input[name="current_password"]', 'Admin123!');
await page.locator('#current_password').fill('Admin123!');
// Wait for form state to update
await page.waitForTimeout(100);
// Cancel button should appear
const cancelButton = page.locator('button[type="button"]:has-text("Cancel")');
@@ -59,19 +65,22 @@ test.describe('Password Change', () => {
});
test('should clear form when cancel button is clicked', async ({ page }) => {
await page.waitForSelector('input[name="current_password"]');
await page.waitForSelector('#current_password');
// Fill fields
await page.fill('input[name="current_password"]', 'Admin123!');
await page.fill('input[name="new_password"]', 'NewAdmin123!');
await page.locator('#current_password').fill('Admin123!');
await page.locator('#new_password').fill('NewAdmin123!');
// Wait for form state to update
await page.waitForTimeout(100);
// Click cancel
const cancelButton = page.locator('button[type="button"]:has-text("Cancel")');
await cancelButton.click();
// Fields should be cleared
await expect(page.locator('input[name="current_password"]')).toHaveValue('');
await expect(page.locator('input[name="new_password"]')).toHaveValue('');
await expect(page.locator('#current_password')).toHaveValue('');
await expect(page.locator('#new_password')).toHaveValue('');
});
test('should show password strength requirements', async ({ page }) => {
@@ -80,12 +89,12 @@ test.describe('Password Change', () => {
});
test('should show validation error for weak password', async ({ page }) => {
await page.waitForSelector('input[name="new_password"]');
await page.waitForSelector('#new_password');
// Fill with weak password
await page.fill('input[name="current_password"]', 'Admin123!');
await page.fill('input[name="new_password"]', 'weak');
await page.fill('input[name="confirm_password"]', 'weak');
await page.fill('#current_password', 'Admin123!');
await page.fill('#new_password', 'weak');
await page.fill('#confirm_password', 'weak');
// Try to submit
const submitButton = page.locator('button[type="submit"]');
@@ -98,12 +107,12 @@ test.describe('Password Change', () => {
});
test('should show error when passwords do not match', async ({ page }) => {
await page.waitForSelector('input[name="new_password"]');
await page.waitForSelector('#new_password');
// Fill with mismatched passwords
await page.fill('input[name="current_password"]', 'Admin123!');
await page.fill('input[name="new_password"]', 'NewAdmin123!');
await page.fill('input[name="confirm_password"]', 'DifferentPassword123!');
await page.fill('#current_password', 'Admin123!');
await page.fill('#new_password', 'NewAdmin123!');
await page.fill('#confirm_password', 'DifferentPassword123!');
// Tab away to trigger validation
await page.keyboard.press('Tab');
@@ -120,16 +129,16 @@ test.describe('Password Change', () => {
test('should have password inputs with correct type', async ({ page }) => {
// All password fields should have type="password"
await expect(page.locator('input[name="current_password"]')).toHaveAttribute('type', 'password');
await expect(page.locator('input[name="new_password"]')).toHaveAttribute('type', 'password');
await expect(page.locator('input[name="confirm_password"]')).toHaveAttribute('type', 'password');
await expect(page.locator('#current_password')).toHaveAttribute('type', 'password');
await expect(page.locator('#new_password')).toHaveAttribute('type', 'password');
await expect(page.locator('#confirm_password')).toHaveAttribute('type', 'password');
});
test('should display card title for password change', async ({ page }) => {
await expect(page.locator('text=Change Password')).toBeVisible();
await expect(page.locator('text=Change Password').first()).toBeVisible();
});
test('should show description about keeping account secure', async ({ page }) => {
await expect(page.locator('text=/keep your account secure/i')).toBeVisible();
await expect(page.locator('text=/keep your account secure/i').first()).toBeVisible();
});
});