refactor: update load state waits from "networkidle" to "domcontentloaded" for improved test reliability

Author: NiallJoeMaher

e2e/articles.spec.ts

@@ -336,7 +336,7 @@ test.describe("Authenticated Feed Page (Articles)", () => {
     );
 
     // Wait for page to be fully loaded including all network requests
-    await page.waitForLoadState("networkidle");
+    await page.waitForLoadState("domcontentloaded");
 
     // Wait for action bar to load - bookmark button shows either "Save" or "Saved"
     // depending on whether another parallel test has already bookmarked it

e2e/my-posts.spec.ts

@@ -11,7 +11,7 @@ async function openTab(
   isMobile: boolean = false,
 ) {
   await page.goto("http://localhost:3000/my-posts");
-  await page.waitForLoadState("networkidle");
+  await page.waitForLoadState("domcontentloaded");
 
   // Mobile renders tabs as a select dropdown, desktop uses links
   if (isMobile) {
@@ -20,7 +20,7 @@ async function openTab(
     await expect(tabSelect).toBeEnabled({ timeout: 5000 });
     await tabSelect.selectOption({ label: tabName });
     // Wait for mobile navigation to settle
-    await page.waitForLoadState("networkidle");
+    await page.waitForLoadState("domcontentloaded");
   } else {
     await page.getByRole("link", { name: tabName }).click();
   }
@@ -37,7 +37,7 @@ async function openTab(
   });
 
   // Wait for network to settle and content to load
-  await page.waitForLoadState("networkidle");
+  await page.waitForLoadState("domcontentloaded");
 
   // Wait for at least one article to be visible with increased timeout for mobile
   await expect(page.locator("article").first()).toBeVisible({
@@ -131,9 +131,9 @@ test.describe("Authenticated my-posts Page", () => {
       timeout: 15000,
     });
     // Verify the article has a heading (h2)
-    await expect(
-      page.locator("article").first().locator("h2"),
-    ).toBeVisible({ timeout: 10000 });
+    await expect(page.locator("article").first().locator("h2")).toBeVisible({
+      timeout: 10000,
+    });
   });
 
   test("User should close delete modal with Cancel button", async ({

e2e/notifications.spec.ts

@@ -227,27 +227,32 @@ test.describe("Notifications Page", () => {
         timeout: 15000,
       });
 
-      // Find the comment container that has the original comment text and click its first reply button
-      const commentContainer = page
-        .locator("article")
+      // Find the comment section that has the original comment text and click its reply button
+      // Discussion comments are wrapped in <section> elements with class "group/comment"
+      const commentSection = page
+        .locator("section.group\\/comment")
         .filter({ hasText: originalComment })
         .first();
-      await commentContainer
+      await commentSection
         .getByRole("button", { name: "Reply" })
         .first()
         .click();
 
       // Wait for reply editor to expand
       await page.waitForTimeout(500);
-      // Focus the reply editor and type - find the editor within the comment's reply section
-      await page.locator(".ProseMirror").last().click();
+
+      // The reply editor appears within the same comment section
+      // Find the ProseMirror editor that appeared after clicking Reply
+      const replyEditor = commentSection.locator(".ProseMirror").first();
+      await replyEditor.click();
       const replyText = `Reply to trigger notification ${randomUUID()}`;
       await page.keyboard.type(replyText);
 
-      // Submit the reply - use nth(1) to get the reply button in the form, not the expand button
-      await page
+      // Submit the reply - click the Reply button within the reply form
+      // The submit button has the same text "Reply" as the expand button, but it's the last one
+      await commentSection
         .getByRole("button", { name: "Reply", exact: true })
-        .nth(1)
+        .last()
         .click();
 
       // Verify reply was posted - this confirms the mutation completed and notification was created

e2e/saved.spec.ts

@@ -40,7 +40,7 @@ test.describe("Authenticated Saved Page", () => {
     );
 
     // Wait for page to be fully loaded including network requests
-    await page.waitForLoadState("networkidle");
+    await page.waitForLoadState("domcontentloaded");
 
     // Get the bookmark button - on article detail page it shows "Save" or "Saved"
     const saveButton = page.getByRole("button", { name: "Save" });
@@ -65,13 +65,20 @@ test.describe("Authenticated Saved Page", () => {
 
     // Navigate to saved page
     await page.goto("http://localhost:3000/saved");
-    await page.waitForLoadState("networkidle");
+    await page.waitForLoadState("domcontentloaded");
 
     // Verify the saved page loaded and shows either:
     // - The bookmarked article (if no parallel test unbookmarked it)
     // - Or at least the page loaded successfully
-    const hasArticle = await page.locator("article").first().isVisible().catch(() => false);
-    const hasEmptyState = await page.getByText("Your saved posts will show up here.").isVisible().catch(() => false);
+    const hasArticle = await page
+      .locator("article")
+      .first()
+      .isVisible()
+      .catch(() => false);
+    const hasEmptyState = await page
+      .getByText("Your saved posts will show up here.")
+      .isVisible()
+      .catch(() => false);
 
     // Either we have saved articles, or we see the empty state (parallel test interference)
     // Both are acceptable outcomes since we already verified the bookmark action succeeded
@@ -81,7 +88,7 @@ test.describe("Authenticated Saved Page", () => {
   test("Should navigate to content from saved items", async ({ page }) => {
     // First ensure there's a saved item
     await page.goto("http://localhost:3000/feed?type=article");
-    await page.waitForLoadState("networkidle");
+    await page.waitForLoadState("domcontentloaded");
     await page.waitForSelector("article");
 
     // Click bookmark
@@ -92,7 +99,7 @@ test.describe("Authenticated Saved Page", () => {
 
     // Go to saved page
     await page.goto("http://localhost:3000/saved");
-    await page.waitForLoadState("networkidle");
+    await page.waitForLoadState("domcontentloaded");
 
     // Click on a saved item to navigate to it
     const firstLink = page.locator("article").first().locator("a").first();
@@ -114,7 +121,7 @@ test.describe("Authenticated Saved Page", () => {
 
     // First, bookmark an article
     await page.goto("http://localhost:3000/feed?type=article");
-    await page.waitForLoadState("networkidle");
+    await page.waitForLoadState("domcontentloaded");
     await page.waitForSelector("article");
 
     // Click bookmark