fix(e2e): resolve histogram bar chart canvas click timeout (#9628)

Shrinath-O2 · web-flow · commit fd1cf3462b19 · 2025-12-12T23:52:57.000+05:30
## Summary
- Fix TimeoutError in `logsqueries.spec.js` histogram bar chart test
caused by ECharts canvas DOM re-rendering
- Add retry mechanism to `clickBarChartCanvas()` to handle canvas
element detachment
- Add proper assertions using page object pattern

## Changes
- **logsPage.js**: Added retry mechanism (3 attempts) with network idle
wait and stabilization delay
- **logsPage.js**: Added `expectBarChartCanvasVisible()` assertion
method
- **logsqueries.spec.js**: Ensure histogram toggle is ON before test
- **logsqueries.spec.js**: Use `waitForLoadState('networkidle')` for
reliability
- **logsqueries.spec.js**: Add visibility assertions before clicking
canvas

## Test plan
- [x] Test passes locally
- [x] Test passes on repeat runs (verified with `--repeat-each=2`)
- [x] Sentinel code quality audit passed
diff --git a/tests/ui-testing/pages/logsPages/logsPage.js b/tests/ui-testing/pages/logsPages/logsPage.js
@@ -1572,9 +1572,42 @@ export class LogsPage {
     }
 
     async clickBarChartCanvas() {
-        return await this.page.locator(this.barChartCanvas).click({
-            position: { x: 182, y: 66 }
-        });
+        // Wait for network idle to ensure chart data has loaded
+        await this.page.waitForLoadState('networkidle');
+
+        const canvasLocator = this.page.locator(this.barChartCanvas);
+
+        // Retry mechanism to handle ECharts canvas re-rendering
+        const maxRetries = 3;
+        for (let attempt = 1; attempt <= maxRetries; attempt++) {
+            try {
+                // Wait for the canvas to be visible
+                await canvasLocator.waitFor({ state: 'visible', timeout: 30000 });
+
+                // Wait for chart to stabilize - ECharts may re-render multiple times
+                await this.page.waitForTimeout(2000);
+
+                // force:true required for ECharts canvas - canvas elements are interactive
+                // but fail Playwright's actionability checks (no pointer-events in traditional sense)
+                await canvasLocator.click({
+                    position: { x: 182, y: 66 },
+                    force: true,
+                    timeout: 10000
+                });
+                return; // Success
+            } catch (error) {
+                if (attempt === maxRetries) {
+                    throw error;
+                }
+                // Wait before retry to allow chart to stabilize
+                await this.page.waitForTimeout(1000);
+            }
+        }
+    }
+
+    async expectBarChartCanvasVisible() {
+        const canvasLocator = this.page.locator(this.barChartCanvas);
+        return await expect(canvasLocator).toBeVisible({ timeout: 30000 });
     }
 
     async fillIndexFieldSearchInput(text) {
diff --git a/tests/ui-testing/playwright-tests/Logs/logsqueries.spec.js b/tests/ui-testing/playwright-tests/Logs/logsqueries.spec.js
@@ -78,10 +78,9 @@ test.describe("Logs Queries testcases", () => {
     await page.goto(
       `${logData.logsUrl}?org_identifier=${process.env["ORGNAME"]}`
     );
-    const allsearch = page.waitForResponse("**/api/default/_search**");
-    await pm.logsPage.selectStream("e2e_automate"); 
+    await pm.logsPage.selectStream("e2e_automate");
     await applyQueryButton(page);
-    
+
     testLogger.info('Logs queries test setup completed');
   });
 
@@ -319,20 +318,49 @@ test.describe("Logs Queries testcases", () => {
     tag: ['@histogramBarChart', '@histogram', '@all', '@logs']
   }, async ({ page }) => {
     testLogger.info('Testing bar chart display with histogram toggle');
+
+    // Ensure histogram is ON before testing bar chart
+    const isHistogramOn = await pm.logsPage.isHistogramOn();
+    if (!isHistogramOn) {
+      await pm.logsPage.toggleHistogram();
+      await pm.logsPage.waitForTimeout(1000);
+    }
+
     await pm.logsPage.clickLogSearchIndexListFieldSearchInput();
     await pm.logsPage.fillLogSearchIndexListFieldSearchInput('code');
     await pm.logsPage.waitForTimeout(4000);
     await pm.logsPage.clickExpandCode();
     await pm.logsPage.waitForTimeout(4000);
+
+    // Click refresh and wait for network to settle
     await pm.logsPage.clickRefreshButton();
+    await page.waitForLoadState('networkidle', { timeout: 30000 })
+      .catch((e) => testLogger.debug('networkidle timeout (non-blocking)', { error: e.message }));
+    await pm.logsPage.waitForTimeout(2000);
+
+    // Toggle SQL mode and refresh
     await pm.logsPage.clickSQLModeToggle();
     await pm.logsPage.clickRefreshButton();
+    await page.waitForLoadState('networkidle', { timeout: 30000 })
+      .catch((e) => testLogger.debug('networkidle timeout (non-blocking)', { error: e.message }));
+    await pm.logsPage.waitForTimeout(2000);
+
+    // Verify bar chart is visible in SQL mode then click
+    await pm.logsPage.expectBarChartCanvasVisible();
     await pm.logsPage.clickBarChartCanvas();
+
+    // Toggle SQL mode off and refresh
     await pm.logsPage.clickSQLModeToggle();
     await pm.logsPage.clickRefreshButton();
+    await page.waitForLoadState('networkidle', { timeout: 30000 })
+      .catch((e) => testLogger.debug('networkidle timeout (non-blocking)', { error: e.message }));
+    await pm.logsPage.waitForTimeout(2000);
+
+    // Verify bar chart is visible in non-SQL mode then click
+    await pm.logsPage.expectBarChartCanvasVisible();
     await pm.logsPage.clickBarChartCanvas();
     await pm.logsPage.clickHistogramToggleDiv();
-    
+
     testLogger.info('Histogram bar chart display test completed');
   });
 
