E2E: Fix trace-view-scrolling test flakiness (#111896)

e2e-playwright/fixtures/long-trace-response.json

@@ -598,7 +598,7 @@
                 "auth-validator",
                 "config-loader",
                 "config-writer",
-                "metrics-collector",
+                "metrics-collector-last-span",
                 "log-writer",
                 "log-reader",
                 "event-publisher",

e2e-playwright/various-suite/trace-view-scrolling.spec.ts

@@ -2,11 +2,6 @@ import { test, expect } from '@grafana/plugin-e2e';
 
 import longTraceResponse from '../fixtures/long-trace-response.json';
 
-// this test requires a larger viewport
-test.use({
-  viewport: { width: 1280, height: 1080 },
-});
-
 test.describe(
   'Trace view',
   {
@@ -33,7 +28,7 @@ test.describe(
       await datasourceList.getByText('gdev-jaeger').click();
 
       // Check that gdev-jaeger is visible in the query editor
-      await expect(page.getByText('gdev-jaeger')).toBeVisible();
+      await expect(page.getByTestId('query-editor-row').getByText('(gdev-jaeger)')).toBeVisible();
 
       // Type the query
       const queryField = page
@@ -44,14 +39,22 @@ test.describe(
       // Use Shift+Enter to execute the query
       await queryField.press('Shift+Enter');
 
-      // Get the initial count of span bars
-      const initialSpanBars = page.getByTestId(selectors.components.TraceViewer.spanBar);
-      const initialSpanBarCount = await initialSpanBars.count();
+      // Wait for the trace viewer to be ready
+      await expect(page.getByRole('switch', { name: /api\-gateway GET/ })).toBeVisible();
 
-      await initialSpanBars.last().scrollIntoViewIfNeeded();
-      await expect
-        .poll(async () => await page.getByTestId(selectors.components.TraceViewer.spanBar).count())
-        .toBeGreaterThan(initialSpanBarCount);
+      // Note the scrolling element is actually the first child of the scroll view, but we can use the scroll wheel on this anyway
+      const scrollEl = page.getByTestId(selectors.pages.Explore.General.scrollView);
+
+      // Assert that the last span is not visible in th page - it should be lazily rendered as the user scrolls
+      const lastSpan = page.getByRole('switch', { name: /metrics\-collector\-last\-span GET/ });
+      await expect(lastSpan).not.toBeVisible();
+
+      // Scroll until the "metrics-collector-last-span GET" switch is visible
+      await expect(async () => {
+        await scrollEl.hover();
+        await page.mouse.wheel(0, 1000);
+        await expect(lastSpan).toBeVisible({ timeout: 1 });
+      }).toPass();
     });
   }
 );