cardosofelipe/fast-next-template
Template
1
0
Fork 1
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Improve e2e tests for Login and Register forms

Browse Source 
- Ensure React hydration before interaction.
- Update error validation to improve reliability, especially for Firefox.
- Replace static URL checks with regex to handle query parameters.
This commit is contained in:
Felipe Cardoso
2025-11-02 20:16:24 +01:00
parent fded54e61a
commit 15f522b9b1
2 changed files with 30 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/e2e/auth-login.spec.ts
View File

@@ -21,17 +21,22 @@ test.describe('Login Flow', () => {
});
test('should show validation errors for empty form', async ({ page }) => {
// Click submit without filling form
// Wait for React hydration to complete
await page.waitForLoadState('networkidle');
// Interact with email field to ensure form is interactive
const emailInput = page.locator('input[name="email"]');
await emailInput.focus();
await emailInput.blur();
// Submit empty form
await page.locator('button[type="submit"]').click();
// Wait for validation errors to appear
await page.waitForTimeout(500); // Give time for validation to run
// Wait for validation errors - Firefox may be slower
await expect(page.locator('#email-error')).toBeVisible({ timeout: 10000 });
await expect(page.locator('#password-error')).toBeVisible({ timeout: 10000 });
// Check for error messages using the text-destructive class
const errors = page.locator('.text-destructive');
await expect(errors.first()).toBeVisible({ timeout: 5000 });
// Verify specific error messages
// Verify error messages
await expect(page.locator('#email-error')).toContainText('Email is required');
await expect(page.locator('#password-error')).toContainText('Password');
});

27
frontend/e2e/auth-register.spec.ts
View File

@@ -23,16 +23,21 @@ test.describe('Registration Flow', () => {
});
test('should show validation errors for empty form', async ({ page }) => {
// Click submit without filling form
// Wait for React hydration to complete
await page.waitForLoadState('networkidle');
// Interact with email field to ensure form is interactive
const emailInput = page.locator('input[name="email"]');
await emailInput.focus();
await emailInput.blur();
// Submit empty form
await page.locator('button[type="submit"]').click();
await page.waitForTimeout(500);
// Check for error messages
const errors = page.locator('.text-destructive');
await expect(errors.first()).toBeVisible({ timeout: 5000 });
// Verify specific errors exist (at least one)
await expect(page.locator('#email-error, #first_name-error, #password-error').first()).toBeVisible();
// Wait for validation errors - Firefox may be slower
await expect(page.locator('#email-error')).toBeVisible({ timeout: 10000 });
await expect(page.locator('#first_name-error')).toBeVisible({ timeout: 10000 });
await expect(page.locator('#password-error')).toBeVisible({ timeout: 10000 });
});
test('should show validation error for invalid email', async ({ page }) => {
@@ -63,7 +68,8 @@ test.describe('Registration Flow', () => {
await page.waitForTimeout(1500); // Increased for Firefox
// Should stay on register page (validation failed)
await expect(page).toHaveURL('/register');
// URL might have query params, so use regex
await expect(page).toHaveURL(/\/register/);
});
test('should show validation error for weak password', async ({ page }) => {
@@ -78,7 +84,8 @@ test.describe('Registration Flow', () => {
await page.waitForTimeout(1500); // Increased for Firefox
// Should stay on register page (validation failed)
await expect(page).toHaveURL('/register');
// URL might have query params, so use regex
await expect(page).toHaveURL(/\/register/);
});
test('should show validation error for mismatched passwords', async ({ page }) => {