Stabilize editor browser suite checks

Author: KSemenenko

tests/PrompterOne.Web.UITests.Editor/Editor/EditorDatePickerThemeTests.cs

@@ -32,7 +32,7 @@ private static async Task<DatePickerMetrics> OpenEditorAndReadDatePickerMetricsA
     {
         await page.GotoAsync(
             BrowserTestConstants.Routes.EditorDemo,
-            new() { WaitUntil = WaitUntilState.NetworkIdle });
+            new() { WaitUntil = WaitUntilState.DOMContentLoaded });
 
         var createdInput = page.GetByTestId(UiTestIds.Editor.Created);
         await Expect(createdInput).ToBeVisibleAsync(
@@ -62,7 +62,7 @@ private static async Task SwitchThemeAsync(IPage page, string theme)
     {
         await page.GotoAsync(
             BrowserTestConstants.Routes.Settings,
-            new() { WaitUntil = WaitUntilState.NetworkIdle });
+            new() { WaitUntil = WaitUntilState.DOMContentLoaded });
         await Expect(page.GetByTestId(UiTestIds.Settings.Page)).ToBeVisibleAsync(
             new() { Timeout = BrowserTestConstants.Timing.ExtendedVisibleTimeoutMs });
         await page.GetByTestId(UiTestIds.Settings.NavAppearance).ClickAsync();

tests/PrompterOne.Web.UITests.Editor/Editor/EditorHugeDraftPerformanceTests.cs

@@ -88,24 +88,90 @@ await page.EvaluateAsync(
 
                     const samples = [];
                     const longTasks = [];
+                    const errors = [];
+                    const pendingSamples = [];
                     const observer = new PerformanceObserver(list => {
                         for (const entry of list.getEntries()) {
-                            longTasks.push(entry.duration);
+                            longTasks.push({
+                                duration: entry.duration,
+                                endTime: entry.startTime + entry.duration,
+                                startTime: entry.startTime
+                            });
                         }
                     });
 
                     observer.observe({ type: "longtask" });
-                    input.addEventListener(args.proxyChangedEventName, () => {
-                        const started = performance.now();
-                        requestAnimationFrame(() => {
+
+                    const probe = {
+                        captureStart: performance.now(),
+                        errors,
+                        eventCount: 0,
+                        lastExpectedLength: -1,
+                        longTasks,
+                        observer,
+                        overlayObserver: null,
+                        pendingSampleCount: 0,
+                        pendingSamples,
+                        samples
+                    };
+
+                    const readRenderedLength = () =>
+                        Number.parseInt(overlay.dataset.renderedLength ?? "-1", 10);
+
+                    const completeVisibleSamples = renderedLength => {
+                        while (pendingSamples.length > 0 && renderedLength >= pendingSamples[0].expectedLength) {
+                            const pendingSample = pendingSamples.shift();
+                            const completedAt = performance.now();
                             samples.push({
-                                latency: performance.now() - started,
-                                renderedLength: Number.parseInt(overlay.dataset.renderedLength ?? "-1", 10)
+                                completedAt,
+                                latency: completedAt - pendingSample.started,
+                                renderedLength,
+                                started: pendingSample.started
                             });
+                        }
+
+                        probe.pendingSampleCount = pendingSamples.length;
+                    };
+
+                    const overlayObserver = new MutationObserver(() => {
+                        try {
+                            completeVisibleSamples(readRenderedLength());
+                        }
+                        catch (error) {
+                            errors.push(String(error?.stack ?? error));
+                        }
+                    });
+
+                    overlayObserver.observe(overlay, {
+                        attributes: true,
+                        childList: true,
+                        characterData: true,
+                        subtree: true
+                    });
+
+                    probe.overlayObserver = overlayObserver;
+
+                    input.addEventListener(args.proxyChangedEventName, event => {
+                        probe.eventCount += 1;
+                        const expectedLength = Number.isFinite(event?.detail?.textLength)
+                            ? event.detail.textLength
+                            : input.value.length;
+                        probe.lastExpectedLength = expectedLength;
+                        pendingSamples.push({
+                            expectedLength,
+                            started: performance.now()
                         });
+                        probe.pendingSampleCount = pendingSamples.length;
+
+                        try {
+                            completeVisibleSamples(readRenderedLength());
+                        }
+                        catch (error) {
+                            errors.push(String(error?.stack ?? error));
+                        }
                     }, { passive: true });
 
-                    window.__editorHugeDraftProbe = { longTasks, observer, samples };
+                    window.__editorHugeDraftProbe = probe;
                 }
                 """,
                 new
@@ -125,12 +191,39 @@ await page.EvaluateAsync(
                         throw new Error("Huge draft performance probe was not initialized before reset.");
                     }
 
+                    probe.captureStart = performance.now();
+                    probe.errors.length = 0;
+                    probe.eventCount = 0;
+                    probe.lastExpectedLength = -1;
                     probe.longTasks.length = 0;
+                    probe.pendingSampleCount = 0;
+                    probe.pendingSamples.length = 0;
                     probe.samples.length = 0;
                 }
                 """);
             await page.Keyboard.TypeAsync(EditorLargeDraftPerformanceTestData.FollowupTypingText, new() { Delay = 0 });
-            await page.WaitForTimeoutAsync(EditorLargeDraftPerformanceTestData.ObservationDelayMs);
+            await page.WaitForFunctionAsync(
+                """
+                (args) => {
+                    const overlay = document.querySelector(`[data-test="${args.overlayTestId}"]`);
+                    const probe = window.__editorHugeDraftProbe;
+                    if (!overlay || !probe) {
+                        return false;
+                    }
+
+                    const renderedLength = Number.parseInt(overlay.dataset.renderedLength ?? "-1", 10);
+                    return renderedLength >= args.expectedLength &&
+                        probe.pendingSampleCount === 0 &&
+                        probe.samples.length >= args.expectedSampleCount;
+                }
+                """,
+                new
+                {
+                    expectedLength,
+                    expectedSampleCount = EditorLargeDraftPerformanceTestData.FollowupTypingText.Length,
+                    overlayTestId = UiTestIds.Editor.SourceHighlight
+                },
+                new() { Timeout = EditorLargeDraftPerformanceTestData.ObservationDelayMs });
 
             var result = await page.EvaluateAsync<HugeDraftProbeResult>(
                 """
@@ -143,12 +236,47 @@ await page.EvaluateAsync(
                     }
 
                     probe.observer.disconnect();
+                    probe.overlayObserver?.disconnect?.();
+
+                    const samples = probe.samples ?? [];
+                    const captureStart = Number.isFinite(probe.captureStart)
+                        ? probe.captureStart
+                        : 0;
+                    const responseWindowStart = samples.length
+                        ? Math.min(...samples.map(sample => sample.started))
+                        : -1;
+                    const responseWindowEnd = samples.length
+                        ? Math.max(...samples.map(sample => sample.completedAt))
+                        : -1;
+                    const relevantWindowStart = responseWindowStart >= 0
+                        ? Math.max(captureStart, responseWindowStart)
+                        : captureStart;
+                    const observedLongTasks = (probe.longTasks ?? [])
+                        .filter(entry => entry.endTime >= captureStart);
+                    const responseWindowLongTasks = responseWindowEnd >= 0
+                        ? observedLongTasks.filter(entry =>
+                            entry.endTime >= relevantWindowStart &&
+                            entry.startTime <= responseWindowEnd)
+                        : [];
+
                     return {
                         finalInputLength: input.value.length,
                         finalRenderedLength: Number.parseInt(overlay.dataset.renderedLength ?? "-1", 10),
-                        followupMaxLongTaskMs: probe.longTasks.length ? Math.max(...probe.longTasks) : 0,
-                        typingLatencyMs: probe.samples[probe.samples.length - 1]?.latency ?? -1,
-                        typingSampleCount: probe.samples.length
+                        eventCount: probe.eventCount ?? -1,
+                        errors: probe.errors ?? [],
+                        followupMaxLongTaskMs: responseWindowLongTasks.length
+                            ? Math.max(...responseWindowLongTasks.map(entry => entry.duration))
+                            : 0,
+                        lastExpectedLength: probe.lastExpectedLength ?? -1,
+                        maxObservedLongTaskMs: observedLongTasks.length
+                            ? Math.max(...observedLongTasks.map(entry => entry.duration))
+                            : 0,
+                        pendingSampleCount: probe.pendingSampleCount ?? -1,
+                        responseWindowDurationMs: responseWindowEnd >= 0
+                            ? Math.max(0, responseWindowEnd - relevantWindowStart)
+                            : -1,
+                        typingLatencyMs: samples[samples.length - 1]?.latency ?? -1,
+                        typingSampleCount: samples.length
                     };
                 }
                 """,
@@ -160,11 +288,13 @@ await page.EvaluateAsync(
 
             await Assert.That(result.FinalInputLength).IsEqualTo(expectedLength);
             await Assert.That(result.FinalRenderedLength).IsEqualTo(expectedLength);
-            await Assert.That(result.TypingSampleCount >= 2).IsTrue();
+            await Assert.That(result.EventCount >= EditorLargeDraftPerformanceTestData.FollowupTypingText.Length).IsTrue().Because($"Expected Monaco proxy change events for the huge draft follow-up typing, but observed {result.EventCount}. Pending samples: {result.PendingSampleCount}; LastExpectedLength: {result.LastExpectedLength}; FinalInputLength: {result.FinalInputLength}; FinalRenderedLength: {result.FinalRenderedLength}.");
+            await Assert.That(result.TypingSampleCount >= EditorLargeDraftPerformanceTestData.FollowupTypingText.Length).IsTrue().Because($"Expected the huge draft follow-up typing probe to capture visible overlay samples for each character, but observed {result.TypingSampleCount} sample(s) after {result.EventCount} proxy change event(s). Pending samples: {result.PendingSampleCount}; LastExpectedLength: {result.LastExpectedLength}; Errors: {string.Join(" || ", result.Errors)}.");
+            await Assert.That(result.PendingSampleCount).IsEqualTo(0);
             await Assert.That(result.FollowupMaxLongTaskMs >= 0 &&
-                result.FollowupMaxLongTaskMs <= EditorLargeDraftPerformanceTestData.MaxHugeFollowupLongTaskMs).IsTrue().Because($"Huge draft follow-up long task exceeded the acceptance budget. FollowupMaxLongTaskMs: {result.FollowupMaxLongTaskMs}; MaxHugeFollowupLongTaskMs: {EditorLargeDraftPerformanceTestData.MaxHugeFollowupLongTaskMs}; TypingLatencyMs: {result.TypingLatencyMs}; TypingSampleCount: {result.TypingSampleCount}; FinalInputLength: {result.FinalInputLength}; FinalRenderedLength: {result.FinalRenderedLength}.");
+                result.FollowupMaxLongTaskMs <= EditorLargeDraftPerformanceTestData.MaxHugeFollowupLongTaskMs).IsTrue().Because($"Huge draft follow-up long task exceeded the acceptance budget. FollowupMaxLongTaskMs: {result.FollowupMaxLongTaskMs}; MaxHugeFollowupLongTaskMs: {EditorLargeDraftPerformanceTestData.MaxHugeFollowupLongTaskMs}; MaxObservedLongTaskMs: {result.MaxObservedLongTaskMs}; ResponseWindowDurationMs: {result.ResponseWindowDurationMs}; TypingLatencyMs: {result.TypingLatencyMs}; TypingSampleCount: {result.TypingSampleCount}; EventCount: {result.EventCount}; PendingSampleCount: {result.PendingSampleCount}; FinalInputLength: {result.FinalInputLength}; FinalRenderedLength: {result.FinalRenderedLength}; Errors: {string.Join(" || ", result.Errors)}.");
             await Assert.That(result.TypingLatencyMs >= 0 &&
-                result.TypingLatencyMs <= EditorLargeDraftPerformanceTestData.MaxHugeTypingLatencyMs).IsTrue().Because($"Huge draft typing latency exceeded the acceptance budget. TypingLatencyMs: {result.TypingLatencyMs}; MaxHugeTypingLatencyMs: {EditorLargeDraftPerformanceTestData.MaxHugeTypingLatencyMs}; FollowupMaxLongTaskMs: {result.FollowupMaxLongTaskMs}; TypingSampleCount: {result.TypingSampleCount}; FinalInputLength: {result.FinalInputLength}; FinalRenderedLength: {result.FinalRenderedLength}.");
+                result.TypingLatencyMs <= EditorLargeDraftPerformanceTestData.MaxHugeTypingLatencyMs).IsTrue().Because($"Huge draft typing latency exceeded the acceptance budget. TypingLatencyMs: {result.TypingLatencyMs}; MaxHugeTypingLatencyMs: {EditorLargeDraftPerformanceTestData.MaxHugeTypingLatencyMs}; FollowupMaxLongTaskMs: {result.FollowupMaxLongTaskMs}; MaxObservedLongTaskMs: {result.MaxObservedLongTaskMs}; ResponseWindowDurationMs: {result.ResponseWindowDurationMs}; TypingSampleCount: {result.TypingSampleCount}; EventCount: {result.EventCount}; PendingSampleCount: {result.PendingSampleCount}; FinalInputLength: {result.FinalInputLength}; FinalRenderedLength: {result.FinalRenderedLength}; Errors: {string.Join(" || ", result.Errors)}.");
         }
         finally
         {
@@ -174,12 +304,24 @@ await Assert.That(result.TypingLatencyMs >= 0 &&
 
     private sealed class HugeDraftProbeResult
     {
+        public int EventCount { get; set; }
+
+        public string[] Errors { get; set; } = [];
+
         public int FinalInputLength { get; set; }
 
         public int FinalRenderedLength { get; set; }
 
         public double FollowupMaxLongTaskMs { get; set; }
 
+        public int LastExpectedLength { get; set; }
+
+        public double MaxObservedLongTaskMs { get; set; }
+
+        public int PendingSampleCount { get; set; }
+
+        public double ResponseWindowDurationMs { get; set; }
+
         public double TypingLatencyMs { get; set; }
 
         public int TypingSampleCount { get; set; }

tests/PrompterOne.Web.UITests.Editor/Editor/EditorLayoutTests.cs

@@ -82,7 +82,11 @@ await EditorMonacoDriver.WaitForSelectionScrollAsync(
                 }
                 """);
 
-            await Assert.That(stageState.ScrollTop > 0).IsTrue();
+            await Assert.That(stageState.VisibleRange).IsNotNull();
+            await Assert.That(
+                stageState.VisibleRange!.StartLineNumber > 1 &&
+                stageState.Selection.Line >= stageState.VisibleRange.StartLineNumber &&
+                stageState.Selection.Line <= stageState.VisibleRange.EndLineNumber).IsTrue().Because($"Expected Monaco to own the vertical scroll surface after centering the selection line, but the visible range did not move off the first line or did not contain the caret line. ScrollTop={stageState.ScrollTop}; SelectionLine={stageState.Selection.Line}; VisibleStart={stageState.VisibleRange.StartLineNumber}; VisibleEnd={stageState.VisibleRange.EndLineNumber}; LineCount={stageState.LineCount}.");
             await Assert.That(scrollState.HostScrollTop).IsEqualTo(BrowserTestConstants.Editor.MaxSourceScrollHostTopPx);
             await Assert.That(
                 string.Equals(scrollState.HostOverflow, BrowserTestConstants.Editor.HiddenOverflowValue, StringComparison.Ordinal) ||

tests/PrompterOne.Web.UITests.Editor/Editor/EditorLightThemeSurfaceTests.cs

@@ -27,7 +27,7 @@ public Task EditorScreen_LightTheme_UsesReadableMainPanelsAndMonacoSurface() =>
             await SwitchThemeAsync(page);
             await page.GotoAsync(
                 BrowserTestConstants.Routes.EditorDemo,
-                new() { WaitUntil = WaitUntilState.NetworkIdle });
+                new() { WaitUntil = WaitUntilState.DOMContentLoaded });
             await Expect(page.GetByTestId(UiTestIds.Editor.Page)).ToBeVisibleAsync(
                 new() { Timeout = BrowserTestConstants.Timing.ExtendedVisibleTimeoutMs });
             await Expect(page.Locator("html")).ToHaveAttributeAsync(
@@ -70,7 +70,7 @@ private static async Task SwitchThemeAsync(IPage page)
     {
         await page.GotoAsync(
             BrowserTestConstants.Routes.Settings,
-            new() { WaitUntil = WaitUntilState.NetworkIdle });
+            new() { WaitUntil = WaitUntilState.DOMContentLoaded });
         await Expect(page.GetByTestId(UiTestIds.Settings.Page)).ToBeVisibleAsync(
             new() { Timeout = BrowserTestConstants.Timing.ExtendedVisibleTimeoutMs });
         await page.GetByTestId(UiTestIds.Settings.NavAppearance).ClickAsync();

tests/PrompterOne.Web.UITests.Editor/Editor/EditorThemeFlowTests.cs

@@ -24,7 +24,7 @@ public Task EditorScreen_LightTheme_EmotionMenu_UsesReadableDropdownAndCustomToo
             {
                 await page.GotoAsync(
                     BrowserTestConstants.Routes.Settings,
-                    new() { WaitUntil = WaitUntilState.NetworkIdle });
+                    new() { WaitUntil = WaitUntilState.DOMContentLoaded });
                 await Expect(page.GetByTestId(UiTestIds.Settings.Page)).ToBeVisibleAsync(
                     new() { Timeout = BrowserTestConstants.Timing.ExtendedVisibleTimeoutMs });
 
@@ -37,7 +37,7 @@ await Expect(page.Locator("html")).ToHaveAttributeAsync(
 
                 await page.GotoAsync(
                     BrowserTestConstants.Routes.EditorDemo,
-                    new() { WaitUntil = WaitUntilState.NetworkIdle });
+                    new() { WaitUntil = WaitUntilState.DOMContentLoaded });
                 await Expect(page.GetByTestId(UiTestIds.Editor.Page)).ToBeVisibleAsync(
                     new() { Timeout = BrowserTestConstants.Timing.ExtendedVisibleTimeoutMs });
                 await EditorMonacoDriver.WaitUntilReadyAsync(page);

tests/PrompterOne.Web.UITests.Editor/Editor/EditorToolbarCoverageTests.cs

@@ -222,7 +222,7 @@ private static async Task OpenEditorAsync(IPage page)
             {
                 await page.GotoAsync(
                     BrowserTestConstants.Routes.EditorDemo,
-                    new() { WaitUntil = WaitUntilState.NetworkIdle });
+                    new() { WaitUntil = WaitUntilState.DOMContentLoaded });
                 await Expect(page.GetByTestId(UiTestIds.Editor.Page))
                     .ToBeVisibleAsync(new() { Timeout = BrowserTestConstants.Timing.DefaultVisibleTimeoutMs });
                 await EditorMonacoDriver.WaitUntilReadyAsync(page);

tests/PrompterOne.Web.UITests.Editor/Editor/EditorToolbarDropdownPaintTests.cs

@@ -31,7 +31,7 @@ public Task EditorToolbar_DropdownMenu_RendersAboveEditorSurface_AndReceivesPoin
 
             await page.GotoAsync(
                 BrowserTestConstants.Routes.EditorDemo,
-                new() { WaitUntil = WaitUntilState.NetworkIdle });
+                new() { WaitUntil = WaitUntilState.DOMContentLoaded });
             await Expect(page.GetByTestId(UiTestIds.Editor.Page))
                 .ToBeVisibleAsync(new() { Timeout = BrowserTestConstants.Timing.DefaultVisibleTimeoutMs });
             await EditorMonacoDriver.WaitUntilReadyAsync(page);
@@ -48,7 +48,7 @@ public Task EditorToolbar_FloatingDropdownMenu_RendersAboveEditorSurface_AndRece
 
             await page.GotoAsync(
                 BrowserTestConstants.Routes.EditorDemo,
-                new() { WaitUntil = WaitUntilState.NetworkIdle });
+                new() { WaitUntil = WaitUntilState.DOMContentLoaded });
             await Expect(page.GetByTestId(UiTestIds.Editor.Page))
                 .ToBeVisibleAsync(new() { Timeout = BrowserTestConstants.Timing.DefaultVisibleTimeoutMs });
             await EditorMonacoDriver.WaitUntilReadyAsync(page);