made login tests more robust to timing issues

Author: dport96

.github/workflows/ci.yml

@@ -54,8 +54,6 @@ jobs:
         run: npm run lint
       - name: Build Next.js application
         run: npm run build
-      - name: Install wait-on
-        run: npm install --save-dev wait-on
       - name: Start the app
         run: npm start &
       - name: Wait for Next.js server to be ready

.gitignore

@@ -56,3 +56,4 @@ package-lock.json
 /blob-report/
 /playwright/.cache/
 /playwright/.auth/
+tests/playwright-auth-sessions/

tests/admin-pages.spec.ts

@@ -5,27 +5,45 @@ test('test access to admin page', async ({ getUserPage }) => {
   // Call the getUserPage fixture with admin signin info to get authenticated session for admin
   const adminPage = await getUserPage('admin@foo.com', 'changeme');
 
-  // Navigate to the home adminPage
+  // Navigate to the home page and wait for post-login indicator
   await adminPage.goto('http://localhost:3000/');
-  
+  await expect(
+    adminPage.getByRole('button', { name: 'admin@foo.com' })
+  ).toBeVisible({ timeout: 10000 });
+
   // Check for navigation elements
-  await expect(adminPage.getByRole('link', { name: 'Next.js Application Template' })).toBeVisible();
-  await expect(adminPage.getByRole('link', { name: 'Add Stuff' })).toBeVisible();
-  await expect(adminPage.getByRole('link', { name: 'List Stuff' })).toBeVisible();
-  await expect(adminPage.getByRole('link', { name: 'Admin' })).toBeVisible();
-  await expect(adminPage.getByRole('button', { name: 'admin@foo.com' })).toBeVisible();
-  
+  await expect(
+    adminPage.getByRole('link', { name: 'Next.js Application Template' })
+  ).toBeVisible({ timeout: 5000 });
+  await expect(
+    adminPage.getByRole('link', { name: 'Add Stuff' })
+  ).toBeVisible({ timeout: 5000 });
+  await expect(
+    adminPage.getByRole('link', { name: 'List Stuff' })
+  ).toBeVisible({ timeout: 5000 });
+  await expect(
+    adminPage.getByRole('link', { name: 'Admin' })
+  ).toBeVisible({ timeout: 5000 });
+
   // Test Add Stuff adminPage
   await adminPage.getByRole('link', { name: 'Add Stuff' }).click();
-  await expect(adminPage.getByRole('heading', { name: 'Add Stuff' })).toBeVisible();
-  
+  await expect(
+    adminPage.getByRole('heading', { name: 'Add Stuff' })
+  ).toBeVisible({ timeout: 5000 });
+
   // Test List Stuff adminPage
   await adminPage.getByRole('link', { name: 'List Stuff' }).click();
-  await expect(adminPage.getByRole('heading', { name: 'Stuff' })).toBeVisible();
-  
+  await expect(
+    adminPage.getByRole('heading', { name: 'Stuff' })
+  ).toBeVisible({ timeout: 5000 });
+
   // Test Admin adminPage
   await adminPage.getByRole('link', { name: 'Admin' }).click();
-  await expect(adminPage.getByRole('heading', { name: 'List Stuff Admin' })).toBeVisible();
-  await expect(adminPage.getByRole('heading', { name: 'List Users Admin' })).toBeVisible();
+  await expect(
+    adminPage.getByRole('heading', { name: 'List Stuff Admin' })
+  ).toBeVisible({ timeout: 5000 });
+  await expect(
+    adminPage.getByRole('heading', { name: 'List Users Admin' })
+  ).toBeVisible({ timeout: 5000 });
 
 });

tests/auth-utils.ts

@@ -84,21 +84,14 @@ async function authenticateWithUI(
       await submitButton.click();
     }
 
-    // Wait for navigation to complete
-    await page.waitForLoadState('networkidle');
-
-    // Verify authentication was successful
-    await expect(async () => {
-      const authState = await Promise.race([
-        page.getByText(email).isVisible().then((visible) => ({ success: visible })),
-        page.getByRole('button', { name: email }).isVisible().then((visible) => ({ success: visible })),
-        page.getByText('Sign out').isVisible().then((visible) => ({ success: visible })),
-        page.getByRole('button', { name: 'Sign out' }).isVisible().then((visible) => ({ success: visible })),
-        new Promise<{ success: boolean }>((resolve) => setTimeout(() => resolve({ success: false }), 5000)),
-      ]);
 
-      expect(authState.success).toBeTruthy();
-    }).toPass({ timeout: 10000 });
+    // Wait for a clear post-login indicator (user button or sign out button)
+    const userButton = page.getByRole('button', { name: email });
+    const signOutButton = page.getByRole('button', { name: /sign out/i });
+    await Promise.any([
+      expect(userButton).toBeVisible({ timeout: 10000 }),
+      expect(signOutButton).toBeVisible({ timeout: 10000 })
+    ]);
 
     // Save session for future tests
     const cookies = await page.context().cookies();

tests/john-pages.spec.ts

@@ -2,17 +2,32 @@ import { test, expect } from './auth-utils';
 
 test.slow();
 test('can authenticate a specific user', async ({ getUserPage }) => {
+
   // Call the getUserPage fixture with users signin info to get authenticated session for user
   const customUserPage = await getUserPage('john@foo.com', 'changeme');
 
-  // Navigate to the home customUserPage
+  // Navigate to the home page and wait for post-login indicator
   await customUserPage.goto('http://localhost:3000/');
-  await expect(customUserPage.getByRole('link', { name: 'Add Stuff' })).toBeVisible();
-  await expect(customUserPage.getByRole('link', { name: 'List Stuff' })).toBeVisible();
-  await expect(customUserPage.getByRole('button', { name: 'john@foo.com' })).toBeVisible();
+  await expect(
+    customUserPage.getByRole('button', { name: 'john@foo.com' })
+  ).toBeVisible({ timeout: 10000 });
+
+  // Now check for navigation links and headings
+  await expect(
+    customUserPage.getByRole('link', { name: 'Add Stuff' })
+  ).toBeVisible({ timeout: 5000 });
+  await expect(
+    customUserPage.getByRole('link', { name: 'List Stuff' })
+  ).toBeVisible({ timeout: 5000 });
+
   await customUserPage.getByRole('link', { name: 'Add Stuff' }).click();
-  await expect(customUserPage.getByRole('heading', { name: 'Add Stuff' })).toBeVisible();
+  await expect(
+    customUserPage.getByRole('heading', { name: 'Add Stuff' })
+  ).toBeVisible({ timeout: 5000 });
+
   await customUserPage.getByRole('link', { name: 'List Stuff' }).click();
-  await expect(customUserPage.getByRole('heading', { name: 'Stuff' })).toBeVisible();
+  await expect(
+    customUserPage.getByRole('heading', { name: 'Stuff' })
+  ).toBeVisible({ timeout: 5000 });
 
 });