Playwright tests are failing on timing

[gkorland]

Summary of changes to include in the PR

• Increase timeouts for confirmation waits in e2e/tests/chat.spec.ts (20000 -> 30000 ms) to reduce CI flakiness.
• Improve HomePage confirmation helper implementations so they use robust Playwright locator wait/visibility APIs and return boolean with try/catch (suggested improvements).
• Add optional debug screenshot capture at assertion failure points (commented / optional).

Patch 1 — e2e/tests/chat.spec.ts

• Change waitForConfirmationMessage timeouts from 20000 to 30000 in two places.

Replace these lines:

• const confirmationAppeared = await homePage.waitForConfirmationMessage(20000);
• const confirmationAppeared1 = await homePage.waitForConfirmationMessage(20000);
• const confirmationAppeared2 = await homePage.waitForConfirmationMessage(20000);

With:

• const confirmationAppeared = await homePage.waitForConfirmationMessage(30000);
• const confirmationAppeared1 = await homePage.waitForConfirmationMessage(30000);
• const confirmationAppeared2 = await homePage.waitForConfirmationMessage(30000);

(Exact contexts: destructive operation test at ~line 240, duplicate record test at ~lines 279 and 286.)

Suggested diff (unified patch snippet)
--- a/e2e/tests/chat.spec.ts
+++ b/e2e/tests/chat.spec.ts
@@

• const confirmationAppeared = await homePage.waitForConfirmationMessage(20000);

• const confirmationAppeared = await homePage.waitForConfirmationMessage(30000);
  @@

• const confirmationAppeared1 = await homePage.waitForConfirmationMessage(20000);

• const confirmationAppeared1 = await homePage.waitForConfirmationMessage(30000);
  @@

• const confirmationAppeared2 = await homePage.waitForConfirmationMessage(20000);

• const confirmationAppeared2 = await homePage.waitForConfirmationMessage(30000);

Patch 2 — HomePage confirmation helpers (recommended)

• Ensure the HomePage methods use robust Playwright patterns: locator.waitFor({ state: 'visible', timeout }), try/catch, and explicit returns of boolean. Add slight polling/retry if needed.

Example implementation (file: e2e/logic/pom/homePage.ts) — adjust path if yours differs:

// Example implementations to add/update in HomePage

// Wait for a confirmation message to appear, return true if it appears within timeout
async waitForConfirmationMessage(timeout = 30000): Promise<boolean> {
  try {
    const confirmationLocator = this.page.locator('[data-test=confirmation-message]'); // adapt selector
    await confirmationLocator.waitFor({ state: 'visible', timeout });
    return true;
  } catch (err) {
    return false;
  }
}

// Check visible state immediately (fast check)
async isConfirmationMessageVisible(): Promise<boolean> {
  try {
    const confirmationLocator = this.page.locator('[data-test=confirmation-message]'); // adapt selector
    return await confirmationLocator.isVisible();
  } catch (err) {
    return false;
  }
}

// Click confirm button with wait for it to be enabled & visible
async clickConfirmButton(): Promise<void> {
  const confirmBtn = this.page.locator('[data-test=confirm-button]'); // adapt selector
  await confirmBtn.waitFor({ state: 'visible', timeout: 5000 });
  await confirmBtn.click();
}

Note: use the actual data-test selectors used by your app. If your UI doesn’t have test anchors, add data-test attributes to the confirmation dialog and confirm button to make tests more resilient and less brittle.

Optional: capture debug screenshot on assertion failures (helpful in CI)

• Add a helper in HomePage or in test after a failed assertion to capture page.screenshot({ path: test-results/failed-${Date.now()}.png })
• Playwright’s reporter already uploads screenshots; but capturing them at specific points can help.

Branch, commit message, and PR metadata

• Branch name: fix/e2e-confirmation-timeouts
• Commit message: test(e2e): increase confirmation wait timeouts and harden confirmation helpers
• PR title: Fix Playwright E2E Chat confirmation & duplicate record timing flakiness
• PR description: list the summary above, mention CI job link you provided, and describe how the changes reduce flakiness and recommend adding test hooks (data-test attributes) if not present.

How to apply the changes locally and open a PR

1. Create branch:
   • git checkout -b fix/e2e-confirmation-timeouts
2. Edit files:
   • Apply the changes shown above to e2e/tests/chat.spec.ts
   • Update HomePage implementation (e2e/logic/pom/homePage.ts) with the suggested robust wait/isVisible logic
3. Run tests locally (fast subset) OR run the full Playwright suite:
   • npx playwright test e2e/tests/chat.spec.ts --project=chromium
   • or run complete suite: npx playwright test
4. Commit and push:
   • git add e2e/tests/chat.spec.ts e2e/logic/pom/homePage.ts
   • git commit -m "test(e2e): increase confirmation wait timeouts and harden confirmation helpers"
   • git push origin fix/e2e-confirmation-timeouts
5. Open PR (target: staging)
   • Using GitHub web UI or:
     • gh pr create --base staging --head fix/e2e-confirmation-timeouts --title "Fix Playwright E2E Chat confirmation & duplicate record timing flakiness" --body "See CI run: . Increased timeouts and made confirmation code more robust."
   • Or create via UI and paste the description.

Notes & next steps

• If flakiness persists after increasing timeout and hardening selectors, do:
  • Inspect Playwright trace.zip from CI (playwright show-trace path) that was uploaded in the job artifacts to see what the UI looked like at the time of failure.
  • Add explicit data-test attributes to the confirmation dialog and confirm button to reduce selector brittleness.
  • If backend errors are swallowed, ensure the backend returns the duplicate error text and the frontend forwards it to the AI message area (so the duplicate test can assert on 'already exists' text). You may need to add a backend integration test or adjust error propagation.

[overcut-ai]

Completed Working on "Automated Ticket Triage "

✅ Workflow completed successfully.

---

👉 View complete log

[overcut-ai]

Completed Working on "Auto Root Cause Analysis"

✅ Workflow completed successfully.

---

👉 View complete log

[overcut-ai]

🛠 Root Cause Analysis & Fix Proposal

🔍 Summary of Root Cause

Playwright E2E tests that cover destructive operations and duplicate-record handling in e2e/tests/chat.spec.ts wait for an inline confirmation dialog via HomePage.waitForConfirmationMessage(...). The calls hard-code a 20 s timeout while the dialog depends on slow backend work (DB write + UI render) that can exceed this window in CI. When the dialog appears after 20 s, the helper’s single locator.waitFor throws a timeout, returns false, and the subsequent expect(...).toBeTruthy() fails – causing flaky test failures.

📂 Evidence

1. Hard-coded 20 s waits
   e2e/tests/chat.spec.ts lines ~240, 279, 286:

   const confirmationAppeared = await homePage.waitForConfirmationMessage(20000);

2. Brittle helper implementation
   e2e/logic/pom/homePage.ts:

   async waitForConfirmationMessage(timeout = 10000): Promise<boolean> {
     try {
       await this.confirmationMessage.waitFor({ state: 'visible', timeout });
       return true;
     } catch {
       return false;
     }
   }

   • Single waitFor; no retry/polling.
   • Swallows Playwright timeout and reports false, so test fails immediately if dialog is slightly delayed.

🧩 Minimal & Safe Fix

1. Increase timeouts in the spec from 20 s → 30 s.
2. Harden HomePage.waitForConfirmationMessage by:
   • Defaulting to 30 s.
   • Keeping locator.waitFor({ state: 'visible' }).
   • Capturing a screenshot on timeout for easier CI debugging.

Proposed Patch (32 LOC)

--- a/e2e/tests/chat.spec.ts
+++ b/e2e/tests/chat.spec.ts
@@
-    const confirmationAppeared = await homePage.waitForConfirmationMessage(20000);
+    const confirmationAppeared = await homePage.waitForConfirmationMessage(30000);
@@
-    const confirmationAppeared1 = await homePage.waitForConfirmationMessage(20000);
+    const confirmationAppeared1 = await homePage.waitForConfirmationMessage(30000);
@@
-    const confirmationAppeared2 = await homePage.waitForConfirmationMessage(20000);
+    const confirmationAppeared2 = await homePage.waitForConfirmationMessage(30000);
--- a/e2e/logic/pom/homePage.ts
+++ b/e2e/logic/pom/homePage.ts
@@
-  async waitForConfirmationMessage(timeout: number = 10000): Promise<boolean> {
-    try {
-      await this.confirmationMessage.waitFor({ state: 'visible', timeout });
-      return true;
-    } catch {
-      return false;
-    }
-  }
+  async waitForConfirmationMessage(timeout: number = 30000): Promise<boolean> {
+    try {
+      await this.confirmationMessage.waitFor({ state: 'visible', timeout });
+      return true;
+    } catch {
+      // capture a screenshot to aid CI debugging
+      try {
+        await this.page.screenshot({
+          path: `test-results/confirmation-timeout-${Date.now()}.png`,
+          fullPage: true,
+        });
+      } catch {
+        /* ignore screenshot failures */
+      }
+      return false;
+    }
+  }

⚖️ Risk Assessment

Low risk – changes are isolated to Playwright test code.
Potential downsides: marginally longer wait (max +10 s) per failure path; optional screenshots may add small artifact size.

✅ Test Recommendations

1. Run the affected spec locally/CI:

   npx playwright test e2e/tests/chat.spec.ts --project=chromium

2. Execute the full suite to ensure no new regressions:

   npx playwright test

🔒 Confidence

High (0.73) – Failure mode matches code behavior; timeout extension & helper hardening directly address the symptom.

---

Label suggestions: rca-proposed, conf-high