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

Remove redundant timeout parameters across E2E tests and add performance optimization documentation.

Browse Source 
- Reduced E2E test execution time by removing unnecessary `{ timeout: 10000 }` overrides for assertions and element waits, relying on global `expect` configuration.
- Removed redundant `networkidle` wait states for faster form render validations.
- Documented comprehensive performance optimization strategies in `E2E_PERFORMANCE_OPTIMIZATION.md`.
- Added `E2E_COVERAGE_GUIDE.md` for integrating and merging E2E test coverage with unit test coverage.
This commit is contained in:
Felipe Cardoso
2025-11-09 00:30:56 +01:00
parent a6a10855fa
commit d5eb855ae1
15 changed files with 1024 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/e2e/admin-access.spec.ts
View File

@@ -18,7 +18,7 @@ test.describe('Admin Access Control', () => {
// Navigate to authenticated page to test authenticated header (not homepage)
await page.goto('/settings');
await page.waitForSelector('h1:has-text("Settings")', { timeout: 10000 });
await page.waitForSelector('h1:has-text("Settings")');
// Should not see admin link in authenticated header navigation
const adminLinks = page.getByRole('link', { name: /^admin$/i });
@@ -37,7 +37,7 @@ test.describe('Admin Access Control', () => {
await page.goto('/admin');
// Should be redirected away from admin (to login or home)
await page.waitForURL(/\/(auth\/login|$)/, { timeout: 5000 });
await page.waitForURL(/\/(auth\/login|$)/);
expect(page.url()).not.toContain('/admin');
});
@@ -50,7 +50,7 @@ test.describe('Admin Access Control', () => {
// Navigate to settings page to ensure user state is loaded
// (AuthGuard fetches user on protected pages)
await page.goto('/settings');
await page.waitForSelector('h1:has-text("Settings")', { timeout: 10000 });
await page.waitForSelector('h1:has-text("Settings")');
// Should see admin link in header navigation bar
// Use exact text match to avoid matching "Admin Panel" from sidebar
@@ -232,7 +232,7 @@ test.describe('Admin Navigation', () => {
const dashboardLink = page.getByTestId('nav-dashboard');
await dashboardLink.click();
await page.waitForURL('/admin', { timeout: 5000 });
await page.waitForURL('/admin');
await expect(page).toHaveURL('/admin');
await expect(page.locator('h1')).toContainText('Admin Dashboard');
});
@@ -277,7 +277,7 @@ test.describe('Admin Breadcrumbs', () => {
const adminBreadcrumb = page.getByTestId('breadcrumb-admin');
await Promise.all([
page.waitForURL('/admin', { timeout: 10000 }),
page.waitForURL('/admin'),
adminBreadcrumb.click()
]);

8
frontend/e2e/admin-dashboard.spec.ts
View File

@@ -34,7 +34,7 @@ test.describe('Admin Dashboard - Statistics Cards', () => {
test('should display all stat cards', async ({ page }) => {
// Wait for stats to load
await page.waitForSelector('[data-testid="dashboard-stats"]', { timeout: 10000 });
await page.waitForSelector('[data-testid="dashboard-stats"]');
// Check all stat cards are visible using data-testid to avoid ambiguity
const statCards = page.getByTestId('stat-title');
@@ -47,7 +47,7 @@ test.describe('Admin Dashboard - Statistics Cards', () => {
test('should display stat card values', async ({ page }) => {
// Wait for stats to load
await page.waitForSelector('[data-testid="dashboard-stats"]', { timeout: 10000 });
await page.waitForSelector('[data-testid="dashboard-stats"]');
// Stats should have numeric values (from mock data)
// Mock returns: 2 users (MOCK_USER + MOCK_SUPERUSER), 3 orgs, 45 sessions
@@ -83,7 +83,7 @@ test.describe('Admin Dashboard - Quick Actions', () => {
const userManagementLink = page.getByRole('link', { name: /User Management/i });
await Promise.all([
page.waitForURL('/admin/users', { timeout: 10000 }),
page.waitForURL('/admin/users'),
userManagementLink.click()
]);
@@ -96,7 +96,7 @@ test.describe('Admin Dashboard - Quick Actions', () => {
const organizationsLink = quickActionsSection.getByRole('link', { name: /Organizations/i });
await Promise.all([
page.waitForURL('/admin/organizations', { timeout: 10000 }),
page.waitForURL('/admin/organizations'),
organizationsLink.click()
]);

22
frontend/e2e/admin-organization-members.spec.ts
View File

@@ -12,7 +12,7 @@ test.describe('Admin Organization Members - Navigation from Organizations List',
await setupSuperuserMocks(page);
// Auth already cached in storage state (loginViaUI removed for performance)
await page.goto('/admin/organizations');
await page.waitForSelector('table tbody tr', { timeout: 10000 });
await page.waitForSelector('table tbody tr');
});
test('should navigate to members page when clicking view members in action menu', async ({ page }) => {
@@ -22,7 +22,7 @@ test.describe('Admin Organization Members - Navigation from Organizations List',
// Click "View Members"
await Promise.all([
page.waitForURL(/\/admin\/organizations\/[^/]+\/members/, { timeout: 10000 }),
page.waitForURL(/\/admin\/organizations\/[^/]+\/members/),
page.getByText('View Members').click()
]);
@@ -37,7 +37,7 @@ test.describe('Admin Organization Members - Navigation from Organizations List',
// Click on member count
await Promise.all([
page.waitForURL(/\/admin\/organizations\/[^/]+\/members/, { timeout: 10000 }),
page.waitForURL(/\/admin\/organizations\/[^/]+\/members/),
memberButton.click()
]);
@@ -51,14 +51,14 @@ test.describe('Admin Organization Members - Page Structure', () => {
await setupSuperuserMocks(page);
// Auth already cached in storage state (loginViaUI removed for performance)
await page.goto('/admin/organizations');
await page.waitForSelector('table tbody tr', { timeout: 10000 });
await page.waitForSelector('table tbody tr');
// Navigate to members page
const actionButton = page.getByRole('button', { name: /Actions for/i }).first();
await actionButton.click();
await Promise.all([
page.waitForURL(/\/admin\/organizations\/[^/]+\/members/, { timeout: 10000 }),
page.waitForURL(/\/admin\/organizations\/[^/]+\/members/),
page.getByText('View Members').click()
]);
});
@@ -67,7 +67,7 @@ test.describe('Admin Organization Members - Page Structure', () => {
await expect(page).toHaveURL(/\/admin\/organizations\/[^/]+\/members/);
// Wait for page to load
await page.waitForSelector('table', { timeout: 10000 });
await page.waitForSelector('table');
// Should show organization name in heading
await expect(page.getByRole('heading', { name: /Members/i })).toBeVisible();
@@ -90,7 +90,7 @@ test.describe('Admin Organization Members - Page Structure', () => {
test('should have proper heading hierarchy', async ({ page }) => {
// Wait for page to load
await page.waitForSelector('table', { timeout: 10000 });
await page.waitForSelector('table');
// Page should have h2 with organization name
const heading = page.getByRole('heading', { name: /Members/i });
@@ -98,7 +98,7 @@ test.describe('Admin Organization Members - Page Structure', () => {
});
test('should have proper table structure', async ({ page }) => {
await page.waitForSelector('table', { timeout: 10000 });
await page.waitForSelector('table');
// Table should have thead and tbody
const table = page.locator('table');
@@ -121,14 +121,14 @@ test.describe('Admin Organization Members - AddMemberDialog E2E Tests', () => {
await setupSuperuserMocks(page);
// Auth already cached in storage state (loginViaUI removed for performance)
await page.goto('/admin/organizations');
await page.waitForSelector('table tbody tr', { timeout: 10000 });
await page.waitForSelector('table tbody tr');
// Navigate to members page
const actionButton = page.getByRole('button', { name: /Actions for/i }).first();
await actionButton.click();
await Promise.all([
page.waitForURL(/\/admin\/organizations\/[^/]+\/members/, { timeout: 10000 }),
page.waitForURL(/\/admin\/organizations\/[^/]+\/members/),
page.getByText('View Members').click()
]);
@@ -137,7 +137,7 @@ test.describe('Admin Organization Members - AddMemberDialog E2E Tests', () => {
await addButton.click();
// Wait for dialog to be visible
await page.waitForSelector('[role="dialog"]', { timeout: 5000 });
await page.waitForSelector('[role="dialog"]');
});
test('should open add member dialog when clicking add member button', async ({ page }) => {

32
frontend/e2e/admin-organizations.spec.ts
View File

@@ -17,7 +17,7 @@ test.describe('Admin Organization Management - Page Load', () => {
await expect(page).toHaveURL('/admin/organizations');
// Wait for page to load
await page.waitForSelector('table', { timeout: 10000 });
await page.waitForSelector('table');
await expect(page.getByRole('heading', { name: 'All Organizations' })).toBeVisible();
});
@@ -46,7 +46,7 @@ test.describe('Admin Organization Management - Organization List Table', () => {
test('should display organization list table with headers', async ({ page }) => {
// Wait for table to load
await page.waitForSelector('table', { timeout: 10000 });
await page.waitForSelector('table');
// Check table exists and has structure
const table = page.locator('table');
@@ -59,7 +59,7 @@ test.describe('Admin Organization Management - Organization List Table', () => {
test('should display organization data rows', async ({ page }) => {
// Wait for table to load
await page.waitForSelector('table tbody tr', { timeout: 10000 });
await page.waitForSelector('table tbody tr');
// Should have at least one organization row
const orgRows = page.locator('table tbody tr');
@@ -68,7 +68,7 @@ test.describe('Admin Organization Management - Organization List Table', () => {
});
test('should display organization status badges', async ({ page }) => {
await page.waitForSelector('table tbody tr', { timeout: 10000 });
await page.waitForSelector('table tbody tr');
// Should see Active or Inactive badges
const statusBadges = page.locator('table tbody').getByText(/Active|Inactive/);
@@ -77,7 +77,7 @@ test.describe('Admin Organization Management - Organization List Table', () => {
});
test('should display action menu for each organization', async ({ page }) => {
await page.waitForSelector('table tbody tr', { timeout: 10000 });
await page.waitForSelector('table tbody tr');
// Each row should have an action menu button
const actionButtons = page.getByRole('button', { name: /Actions for/i });
@@ -86,7 +86,7 @@ test.describe('Admin Organization Management - Organization List Table', () => {
});
test('should display member counts', async ({ page }) => {
await page.waitForSelector('table tbody tr', { timeout: 10000 });
await page.waitForSelector('table tbody tr');
// Should show member counts in the Members column
const membersColumn = page.locator('table tbody tr td').filter({ hasText: /^\d+$/ });
@@ -95,7 +95,7 @@ test.describe('Admin Organization Management - Organization List Table', () => {
});
test('should display organization names and descriptions', async ({ page }) => {
await page.waitForSelector('table tbody tr', { timeout: 10000 });
await page.waitForSelector('table tbody tr');
// Organization name should be visible
const orgNames = page.locator('table tbody td').first();
@@ -111,7 +111,7 @@ test.describe('Admin Organization Management - Pagination', () => {
});
test('should display pagination info', async ({ page }) => {
await page.waitForSelector('table tbody tr', { timeout: 10000 });
await page.waitForSelector('table tbody tr');
// Should show "Showing X to Y of Z organizations"
await expect(page.getByText(/Showing \d+ to \d+ of \d+ organizations/)).toBeVisible();
@@ -141,7 +141,7 @@ test.describe('Admin Organization Management - Action Menu', () => {
await setupSuperuserMocks(page);
// Auth already cached in storage state (loginViaUI removed for performance)
await page.goto('/admin/organizations');
await page.waitForSelector('table tbody tr', { timeout: 10000 });
await page.waitForSelector('table tbody tr');
});
test('should open action menu when clicked', async ({ page }) => {
@@ -192,7 +192,7 @@ test.describe('Admin Organization Management - Action Menu', () => {
// Click view members - use Promise.all for Next.js Link navigation
await Promise.all([
page.waitForURL(/\/admin\/organizations\/[^/]+\/members/, { timeout: 10000 }),
page.waitForURL(/\/admin\/organizations\/[^/]+\/members/),
page.getByText('View Members').click()
]);
@@ -247,7 +247,7 @@ test.describe('Admin Organization Management - Edit Organization Dialog', () =>
await setupSuperuserMocks(page);
// Auth already cached in storage state (loginViaUI removed for performance)
await page.goto('/admin/organizations');
await page.waitForSelector('table tbody tr', { timeout: 10000 });
await page.waitForSelector('table tbody tr');
});
test('should open edit dialog with existing organization data', async ({ page }) => {
@@ -296,7 +296,7 @@ test.describe('Admin Organization Management - Member Count Interaction', () =>
await setupSuperuserMocks(page);
// Auth already cached in storage state (loginViaUI removed for performance)
await page.goto('/admin/organizations');
await page.waitForSelector('table tbody tr', { timeout: 10000 });
await page.waitForSelector('table tbody tr');
});
test('should allow clicking on member count to view members', async ({ page }) => {
@@ -306,7 +306,7 @@ test.describe('Admin Organization Management - Member Count Interaction', () =>
// Click on member count - use Promise.all for Next.js Link navigation
await Promise.all([
page.waitForURL(/\/admin\/organizations\/[^/]+\/members/, { timeout: 10000 }),
page.waitForURL(/\/admin\/organizations\/[^/]+\/members/),
memberButton.click()
]);
@@ -324,14 +324,14 @@ test.describe('Admin Organization Management - Accessibility', () => {
test('should have proper heading hierarchy', async ({ page }) => {
// Wait for table to load
await page.waitForSelector('table', { timeout: 10000 });
await page.waitForSelector('table');
// Page should have h2 with proper text
await expect(page.getByRole('heading', { name: 'All Organizations' })).toBeVisible();
});
test('should have accessible labels for action menus', async ({ page }) => {
await page.waitForSelector('table tbody tr', { timeout: 10000 });
await page.waitForSelector('table tbody tr');
// Action buttons should have descriptive labels
const actionButton = page.getByRole('button', { name: /Actions for/i }).first();
@@ -339,7 +339,7 @@ test.describe('Admin Organization Management - Accessibility', () => {
});
test('should have proper table structure', async ({ page }) => {
await page.waitForSelector('table', { timeout: 10000 });
await page.waitForSelector('table');
// Table should have thead and tbody
const table = page.locator('table');

24
frontend/e2e/admin-users.spec.ts
View File

@@ -43,7 +43,7 @@ test.describe('Admin User Management - User List Table', () => {
test('should display user list table with headers', async ({ page }) => {
// Wait for table to load
await page.waitForSelector('table', { timeout: 10000 });
await page.waitForSelector('table');
// Check table exists and has structure
const table = page.locator('table');
@@ -56,7 +56,7 @@ test.describe('Admin User Management - User List Table', () => {
test('should display user data rows', async ({ page }) => {
// Wait for table to load
await page.waitForSelector('table tbody tr', { timeout: 10000 });
await page.waitForSelector('table tbody tr');
// Should have at least one user row
const userRows = page.locator('table tbody tr');
@@ -65,7 +65,7 @@ test.describe('Admin User Management - User List Table', () => {
});
test('should display user status badges', async ({ page }) => {
await page.waitForSelector('table tbody tr', { timeout: 10000 });
await page.waitForSelector('table tbody tr');
// Should see Active or Inactive badges
const statusBadges = page.locator('table tbody').getByText(/Active|Inactive/);
@@ -74,7 +74,7 @@ test.describe('Admin User Management - User List Table', () => {
});
test('should display action menu for each user', async ({ page }) => {
await page.waitForSelector('table tbody tr', { timeout: 10000 });
await page.waitForSelector('table tbody tr');
// Each row should have an action menu button
const actionButtons = page.getByRole('button', { name: /Actions for/i });
@@ -88,7 +88,7 @@ test.describe('Admin User Management - User List Table', () => {
});
test('should display individual row checkboxes', async ({ page }) => {
await page.waitForSelector('table tbody tr', { timeout: 10000 });
await page.waitForSelector('table tbody tr');
// Should have checkboxes for selecting users
const rowCheckboxes = page.locator('table tbody').getByRole('checkbox');
@@ -227,7 +227,7 @@ test.describe('Admin User Management - Pagination', () => {
});
test('should display pagination info', async ({ page }) => {
await page.waitForSelector('table tbody tr', { timeout: 10000 });
await page.waitForSelector('table tbody tr');
// Should show "Showing X to Y of Z users"
await expect(page.getByText(/Showing \d+ to \d+ of \d+ users/)).toBeVisible();
@@ -242,7 +242,7 @@ test.describe('Admin User Management - Row Selection', () => {
await setupSuperuserMocks(page);
// Auth already cached in storage state (loginViaUI removed for performance)
await page.goto('/admin/users');
await page.waitForSelector('table tbody tr', { timeout: 10000 });
await page.waitForSelector('table tbody tr');
});
test('should select individual user row', async ({ page }) => {
@@ -429,7 +429,7 @@ test.describe('Admin User Management - Action Menu', () => {
await setupSuperuserMocks(page);
// Auth already cached in storage state (loginViaUI removed for performance)
await page.goto('/admin/users');
await page.waitForSelector('table tbody tr', { timeout: 10000 });
await page.waitForSelector('table tbody tr');
});
test('should open action menu when clicked', async ({ page }) => {
@@ -482,7 +482,7 @@ test.describe('Admin User Management - Edit User Dialog', () => {
await setupSuperuserMocks(page);
// Auth already cached in storage state (loginViaUI removed for performance)
await page.goto('/admin/users');
await page.waitForSelector('table tbody tr', { timeout: 10000 });
await page.waitForSelector('table tbody tr');
});
test('should open edit dialog with existing user data', async ({ page }) => {
@@ -543,7 +543,7 @@ test.describe('Admin User Management - Bulk Actions', () => {
await setupSuperuserMocks(page);
// Auth already cached in storage state (loginViaUI removed for performance)
await page.goto('/admin/users');
await page.waitForSelector('table tbody tr', { timeout: 10000 });
await page.waitForSelector('table tbody tr');
});
test('should show bulk activate button in toolbar', async ({ page }) => {
@@ -623,7 +623,7 @@ test.describe('Admin User Management - Accessibility', () => {
});
test('should have accessible labels for checkboxes', async ({ page }) => {
await page.waitForSelector('table tbody tr', { timeout: 10000 });
await page.waitForSelector('table tbody tr');
// Select all checkbox should have label
const selectAllCheckbox = page.getByLabel('Select all users');
@@ -631,7 +631,7 @@ test.describe('Admin User Management - Accessibility', () => {
});
test('should have accessible labels for action menus', async ({ page }) => {
await page.waitForSelector('table tbody tr', { timeout: 10000 });
await page.waitForSelector('table tbody tr');
// Action buttons should have descriptive labels
const actionButton = page.getByRole('button', { name: /Actions for/i }).first();

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

@@ -96,10 +96,10 @@ test.describe('Login Flow', () => {
const passwordInput = page.locator('input[name="password"]');
const submitButton = page.locator('button[type="submit"]');
await expect(emailInput).toBeVisible({ timeout: 10000 });
await expect(passwordInput).toBeVisible({ timeout: 10000 });
await expect(submitButton).toBeVisible({ timeout: 10000 });
await expect(submitButton).toBeEnabled({ timeout: 10000 });
await expect(emailInput).toBeVisible();
await expect(passwordInput).toBeVisible();
await expect(submitButton).toBeVisible();
await expect(submitButton).toBeEnabled();
// Touch fields to mimic user interaction
await emailInput.focus();
@@ -111,8 +111,8 @@ test.describe('Login Flow', () => {
await submitButton.click();
// Wait for validation errors - allow extra time for slower browsers
await expect(page.locator('#email-error')).toBeVisible({ timeout: 10000 });
await expect(page.locator('#password-error')).toBeVisible({ timeout: 10000 });
await expect(page.locator('#email-error')).toBeVisible();
await expect(page.locator('#password-error')).toBeVisible();
// Verify error messages
await expect(page.locator('#email-error')).toContainText('Email is required');
@@ -163,7 +163,7 @@ test.describe('Login Flow', () => {
const forgotLink = page.getByRole('link', { name: 'Forgot password?' });
await Promise.all([
page.waitForURL('/password-reset', { timeout: 10000 }),
page.waitForURL('/password-reset'),
forgotLink.click()
]);
@@ -177,7 +177,7 @@ test.describe('Login Flow', () => {
const signupLink = page.getByRole('link', { name: 'Sign up' });
await Promise.all([
page.waitForURL('/register', { timeout: 10000 }),
page.waitForURL('/register'),
signupLink.click()
]);

4
frontend/e2e/auth-password-reset.spec.ts
View File

@@ -56,7 +56,7 @@ test.describe('Password Reset Request Flow', () => {
const loginLink = page.getByRole('link', { name: 'Back to login' });
await Promise.all([
page.waitForURL('/login', { timeout: 10000 }),
page.waitForURL('/login', ),
loginLink.click()
]);
@@ -197,7 +197,7 @@ test.describe('Password Reset Confirm Flow', () => {
const resetLink = page.getByRole('link', { name: 'Request new reset link' });
await Promise.all([
page.waitForURL('/password-reset', { timeout: 10000 }),
page.waitForURL('/password-reset', ),
resetLink.click()
]);

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

@@ -94,7 +94,6 @@ test.describe('Registration Flow', () => {
test('should show validation errors for empty form', async ({ page }) => {
// 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"]');
@@ -105,9 +104,9 @@ test.describe('Registration Flow', () => {
await page.locator('button[type="submit"]').click();
// 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 });
await expect(page.locator('#email-error')).toBeVisible();
await expect(page.locator('#first_name-error')).toBeVisible();
await expect(page.locator('#password-error')).toBeVisible();
});
test('should show validation error for invalid email', async ({ page }) => {
@@ -217,7 +216,7 @@ test.describe('Registration Flow', () => {
// Use Promise.all to wait for navigation
await Promise.all([
page.waitForURL('/login', { timeout: 10000 }),
page.waitForURL('/login'),
loginLink.click()
]);

2
frontend/e2e/helpers/auth.ts
View File

@@ -105,7 +105,7 @@ export async function loginViaUI(page: Page, email = 'test@example.com', passwor
// Submit and wait for navigation to home
await Promise.all([
page.waitForURL('/', { timeout: 10000 }),
page.waitForURL('/'),
page.locator('button[type="submit"]').click(),
]);

57
frontend/e2e/homepage.spec.ts
View File

@@ -10,7 +10,6 @@ test.describe('Homepage - Desktop Navigation', () => {
test.beforeEach(async ({ page }) => {
await page.goto('/');
// Wait for page to be fully loaded
await page.waitForLoadState('networkidle');
});
test('should display header with logo and navigation', async ({ page }) => {
@@ -36,7 +35,7 @@ test.describe('Homepage - Desktop Navigation', () => {
const componentsLink = header.getByRole('link', { name: 'Components', exact: true });
await Promise.all([
page.waitForURL('/dev', { timeout: 10000 }),
page.waitForURL('/dev'),
componentsLink.click()
]);
@@ -49,7 +48,7 @@ test.describe('Homepage - Desktop Navigation', () => {
const adminLink = header.getByRole('link', { name: 'Admin Demo', exact: true });
await Promise.all([
page.waitForURL('/admin', { timeout: 10000 }),
page.waitForURL('/admin'),
adminLink.click()
]);
@@ -62,7 +61,7 @@ test.describe('Homepage - Desktop Navigation', () => {
const headerLoginLink = header.getByRole('link', { name: /^Login$/i });
await Promise.all([
page.waitForURL('/login', { timeout: 10000 }),
page.waitForURL('/login'),
headerLoginLink.click()
]);
@@ -88,7 +87,6 @@ test.describe('Homepage - Mobile Menu Interactions', () => {
// Set mobile viewport
await page.setViewportSize({ width: 375, height: 667 });
await page.goto('/');
await page.waitForLoadState('networkidle');
});
test('should display mobile menu toggle button', async ({ page }) => {
@@ -101,7 +99,7 @@ test.describe('Homepage - Mobile Menu Interactions', () => {
await menuButton.click();
// Wait for sheet to be visible
await page.waitForSelector('[role="dialog"]', { timeout: 5000 });
await page.waitForSelector('[role="dialog"]');
// Navigation links should be visible in mobile menu
const mobileMenu = page.locator('[role="dialog"]');
@@ -111,7 +109,7 @@ test.describe('Homepage - Mobile Menu Interactions', () => {
test('should display GitHub link in mobile menu', async ({ page }) => {
await page.getByRole('button', { name: /Toggle menu/i }).click();
await page.waitForSelector('[role="dialog"]', { timeout: 5000 });
await page.waitForSelector('[role="dialog"]');
const mobileMenu = page.locator('[role="dialog"]');
const githubLink = mobileMenu.getByRole('link', { name: /GitHub Star/i });
@@ -123,13 +121,13 @@ test.describe('Homepage - Mobile Menu Interactions', () => {
test('should navigate to components page from mobile menu', async ({ page }) => {
// Open mobile menu
await page.getByRole('button', { name: /Toggle menu/i }).click();
await page.waitForSelector('[role="dialog"]', { timeout: 5000 });
await page.waitForSelector('[role="dialog"]');
// Click Components link
const componentsLink = page.locator('[role="dialog"]').getByRole('link', { name: 'Components' });
await Promise.all([
page.waitForURL('/dev', { timeout: 10000 }),
page.waitForURL('/dev'),
componentsLink.click()
]);
@@ -139,13 +137,13 @@ test.describe('Homepage - Mobile Menu Interactions', () => {
test('should navigate to admin demo from mobile menu', async ({ page }) => {
// Open mobile menu
await page.getByRole('button', { name: /Toggle menu/i }).click();
await page.waitForSelector('[role="dialog"]', { timeout: 5000 });
await page.waitForSelector('[role="dialog"]');
// Click Admin Demo link
const adminLink = page.locator('[role="dialog"]').getByRole('link', { name: 'Admin Demo' });
await Promise.all([
page.waitForURL('/admin', { timeout: 10000 }),
page.waitForURL('/admin'),
adminLink.click()
]);
@@ -154,7 +152,7 @@ test.describe('Homepage - Mobile Menu Interactions', () => {
test('should display Try Demo button in mobile menu', async ({ page }) => {
await page.getByRole('button', { name: /Toggle menu/i }).click();
await page.waitForSelector('[role="dialog"]', { timeout: 5000 });
await page.waitForSelector('[role="dialog"]');
const mobileMenu = page.locator('[role="dialog"]');
const demoButton = mobileMenu.getByRole('button', { name: /Try Demo/i });
@@ -165,7 +163,7 @@ test.describe('Homepage - Mobile Menu Interactions', () => {
test('should open demo modal from mobile menu Try Demo button', async ({ page }) => {
// Open mobile menu
await page.getByRole('button', { name: /Toggle menu/i }).click();
await page.waitForSelector('[role="dialog"]', { timeout: 5000 });
await page.waitForSelector('[role="dialog"]');
// Click Try Demo in mobile menu
const mobileMenu = page.locator('[role="dialog"]');
@@ -181,14 +179,14 @@ test.describe('Homepage - Mobile Menu Interactions', () => {
test('should navigate to login from mobile menu', async ({ page }) => {
// Open mobile menu
await page.getByRole('button', { name: /Toggle menu/i }).click();
await page.waitForSelector('[role="dialog"]', { timeout: 5000 });
await page.waitForSelector('[role="dialog"]');
// Click Login link in mobile menu
const mobileMenu = page.locator('[role="dialog"]');
const loginLink = mobileMenu.getByRole('link', { name: /Login/i });
await Promise.all([
page.waitForURL('/login', { timeout: 10000 }),
page.waitForURL('/login'),
loginLink.click()
]);
@@ -198,20 +196,19 @@ test.describe('Homepage - Mobile Menu Interactions', () => {
test('should close mobile menu when clicking outside', async ({ page }) => {
// Open mobile menu
await page.getByRole('button', { name: /Toggle menu/i }).click();
await page.waitForSelector('[role="dialog"]', { timeout: 5000 });
await page.waitForSelector('[role="dialog"]');
// Press Escape key to close menu (more reliable than clicking overlay)
await page.keyboard.press('Escape');
// Menu should close
await expect(page.locator('[role="dialog"]')).not.toBeVisible({ timeout: 2000 });
await expect(page.locator('[role="dialog"]')).not.toBeVisible();
});
});
test.describe('Homepage - Hero Section', () => {
test.beforeEach(async ({ page }) => {
await page.goto('/');
await page.waitForLoadState('networkidle');
});
test('should display main headline', async ({ page }) => {
@@ -241,7 +238,7 @@ test.describe('Homepage - Hero Section', () => {
const exploreLink = page.getByRole('link', { name: /Explore Components/i }).first();
await Promise.all([
page.waitForURL('/dev', { timeout: 10000 }),
page.waitForURL('/dev'),
exploreLink.click()
]);
@@ -252,7 +249,6 @@ test.describe('Homepage - Hero Section', () => {
test.describe('Homepage - Demo Credentials Modal', () => {
test.beforeEach(async ({ page }) => {
await page.goto('/');
await page.waitForLoadState('networkidle');
});
test('should display regular and admin credentials', async ({ page }) => {
@@ -275,6 +271,8 @@ test.describe('Homepage - Demo Credentials Modal', () => {
await page.getByRole('button', { name: /Try Demo/i }).first().click();
const dialog = page.getByRole('dialog');
await dialog.waitFor({ state: 'visible' });
// Click first copy button (regular user) within dialog
const copyButtons = dialog.getByRole('button', { name: /Copy/i });
await copyButtons.first().click();
@@ -287,10 +285,12 @@ test.describe('Homepage - Demo Credentials Modal', () => {
await page.getByRole('button', { name: /Try Demo/i }).first().click();
const dialog = page.getByRole('dialog');
await dialog.waitFor({ state: 'visible' });
const loginLink = dialog.getByRole('link', { name: /Go to Login/i });
await Promise.all([
page.waitForURL('/login', { timeout: 10000 }),
page.waitForURL('/login'),
loginLink.click()
]);
@@ -301,6 +301,8 @@ test.describe('Homepage - Demo Credentials Modal', () => {
await page.getByRole('button', { name: /Try Demo/i }).first().click();
const dialog = page.getByRole('dialog');
await dialog.waitFor({ state: 'visible' });
const closeButton = dialog.getByRole('button', { name: /^Close$/i }).first();
await closeButton.click();
@@ -311,7 +313,6 @@ test.describe('Homepage - Demo Credentials Modal', () => {
test.describe('Homepage - Animated Terminal', () => {
test.beforeEach(async ({ page }) => {
await page.goto('/');
await page.waitForLoadState('networkidle');
});
test('should display terminal section', async ({ page }) => {
@@ -337,7 +338,7 @@ test.describe('Homepage - Animated Terminal', () => {
// Terminal should show git clone command (check for just "git clone" to be more flexible)
const terminalText = await page.locator('.font-mono').filter({ hasText: 'git clone' }).first();
await expect(terminalText).toBeVisible({ timeout: 10000 });
await expect(terminalText).toBeVisible();
});
test('should display Try Live Demo button below terminal', async ({ page }) => {
@@ -355,7 +356,7 @@ test.describe('Homepage - Animated Terminal', () => {
const terminalDemoLink = demoLinks.last(); // Last one should be from terminal section
await Promise.all([
page.waitForURL('/login', { timeout: 10000 }),
page.waitForURL('/login'),
terminalDemoLink.click()
]);
@@ -366,7 +367,6 @@ test.describe('Homepage - Animated Terminal', () => {
test.describe('Homepage - Feature Sections', () => {
test.beforeEach(async ({ page }) => {
await page.goto('/');
await page.waitForLoadState('networkidle');
});
test('should display feature grid section', async ({ page }) => {
@@ -382,7 +382,7 @@ test.describe('Homepage - Feature Sections', () => {
const authLink = page.getByRole('link', { name: /View Auth Flow/i });
await Promise.all([
page.waitForURL('/login', { timeout: 10000 }),
page.waitForURL('/login'),
authLink.click()
]);
@@ -393,7 +393,7 @@ test.describe('Homepage - Feature Sections', () => {
const adminLink = page.getByRole('link', { name: /Try Admin Panel/i });
await Promise.all([
page.waitForURL('/admin', { timeout: 10000 }),
page.waitForURL('/admin'),
adminLink.click()
]);
@@ -418,7 +418,6 @@ test.describe('Homepage - Feature Sections', () => {
test.describe('Homepage - Footer', () => {
test.beforeEach(async ({ page }) => {
await page.goto('/');
await page.waitForLoadState('networkidle');
});
test('should display footer with copyright', async ({ page }) => {
@@ -432,7 +431,6 @@ test.describe('Homepage - Footer', () => {
test.describe('Homepage - Accessibility', () => {
test.beforeEach(async ({ page }) => {
await page.goto('/');
await page.waitForLoadState('networkidle');
});
test('should have proper heading hierarchy', async ({ page }) => {
@@ -455,7 +453,6 @@ test.describe('Homepage - Accessibility', () => {
test('should have mobile menu button with accessible label', async ({ page }) => {
await page.setViewportSize({ width: 375, height: 667 });
await page.reload();
await page.waitForLoadState('networkidle');
const menuButton = page.getByRole('button', { name: /Toggle menu/i });
await expect(menuButton).toBeVisible();

14
frontend/e2e/settings-navigation.spec.ts
View File

@@ -21,7 +21,7 @@ test.describe('Settings Navigation', () => {
await expect(page).toHaveURL('/');
// Navigate to settings/profile
await page.goto('/settings/profile', { waitUntil: 'networkidle' });
await page.goto('/settings/profile');
// Verify navigation successful
await expect(page).toHaveURL('/settings/profile');
@@ -36,7 +36,7 @@ test.describe('Settings Navigation', () => {
await expect(page).toHaveURL('/');
// Navigate to settings/password
await page.goto('/settings/password', { waitUntil: 'networkidle' });
await page.goto('/settings/password');
// Verify navigation successful
await expect(page).toHaveURL('/settings/password');
@@ -47,21 +47,21 @@ test.describe('Settings Navigation', () => {
test('should navigate between settings pages', async ({ page }) => {
// Start at profile page
await page.goto('/settings/profile', { waitUntil: 'networkidle' });
await page.goto('/settings/profile');
await expect(page.getByRole('heading', { name: 'Profile' })).toBeVisible();
// Navigate to password page
await page.goto('/settings/password', { waitUntil: 'networkidle' });
await page.goto('/settings/password');
await expect(page.getByRole('heading', { name: 'Password' })).toBeVisible();
// Navigate back to profile page
await page.goto('/settings/profile', { waitUntil: 'networkidle' });
await page.goto('/settings/profile');
await expect(page.getByRole('heading', { name: 'Profile' })).toBeVisible();
});
test('should redirect from /settings to /settings/profile', async ({ page }) => {
// Navigate to base settings page
await page.goto('/settings', { waitUntil: 'networkidle' });
await page.goto('/settings');
// Should redirect to profile page
await expect(page).toHaveURL('/settings/profile');
@@ -72,7 +72,7 @@ test.describe('Settings Navigation', () => {
test('should display preferences page placeholder', async ({ page }) => {
// Navigate to preferences page
await page.goto('/settings/preferences', { waitUntil: 'networkidle' });
await page.goto('/settings/preferences');
// Verify navigation successful
await expect(page).toHaveURL('/settings/preferences');

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

@@ -15,10 +15,10 @@ test.describe('Password Change', () => {
// Auth already cached in storage state (loginViaUI removed for performance)
// Navigate to password page
await page.goto('/settings/password', { waitUntil: 'networkidle' });
await page.goto('/settings/password');
// Wait for form to be visible
await page.getByLabel(/current password/i).waitFor({ state: 'visible', timeout: 10000 });
await page.getByLabel(/current password/i).waitFor({ state: 'visible' });
});
// TODO: Fix flaky test - failed once at 12.8s, passed on retry at 8.3s
@@ -40,7 +40,7 @@ test.describe('Password Change', () => {
test('should have all password fields as password type', async ({ page }) => {
// Wait for form to load
const currentPasswordInput = page.getByLabel(/current password/i);
await currentPasswordInput.waitFor({ state: 'visible', timeout: 10000 });
await currentPasswordInput.waitFor({ state: 'visible' });
// Verify all password fields have type="password"
await expect(currentPasswordInput).toHaveAttribute('type', 'password');
@@ -51,7 +51,7 @@ test.describe('Password Change', () => {
test('should have submit button disabled initially', async ({ page }) => {
// Wait for form to load
const submitButton = page.getByRole('button', { name: /change password/i });
await submitButton.waitFor({ state: 'visible', timeout: 10000 });
await submitButton.waitFor({ state: 'visible' });
// Verify button is disabled when form is empty/untouched
await expect(submitButton).toBeDisabled();

4
frontend/e2e/settings-profile.spec.ts
View File

@@ -27,7 +27,7 @@ test.describe('Profile Settings', () => {
// Wait for form to be populated with user data (use label-based selectors)
const firstNameInput = page.getByLabel(/first name/i);
await firstNameInput.waitFor({ state: 'visible', timeout: 10000 });
await firstNameInput.waitFor({ state: 'visible' });
// Verify form fields are populated with mock user data
await expect(firstNameInput).toHaveValue(MOCK_USER.first_name);
@@ -38,7 +38,7 @@ test.describe('Profile Settings', () => {
test('should show email as read-only', async ({ page }) => {
// Wait for form to load
const emailInput = page.getByLabel(/email/i);
await emailInput.waitFor({ state: 'visible', timeout: 10000 });
await emailInput.waitFor({ state: 'visible' });
// Verify email field is disabled or read-only
const isDisabled = await emailInput.isDisabled();