diff --git a/e2e-playwright/fixtures/long-trace-response.json b/e2e-playwright/fixtures/long-trace-response.json index 5605ab1dd7c..ee23f36e69a 100644 --- a/e2e-playwright/fixtures/long-trace-response.json +++ b/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", diff --git a/e2e-playwright/various-suite/trace-view-scrolling.spec.ts b/e2e-playwright/various-suite/trace-view-scrolling.spec.ts index 4cc44f6a86f..bb32d3922ee 100644 --- a/e2e-playwright/various-suite/trace-view-scrolling.spec.ts +++ b/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(); }); } );