Stabilize browser CI checks

Author: KSemenenko

tests/PrompterOne.App.UITests/Editor/EditorOverlayInteractionTests.cs

@@ -20,7 +20,8 @@ public async Task EditorScreen_HidesFloatingBarWhileToolbarDropdownIsOpen()
             var floatingBar = page.GetByTestId(UiTestIds.Editor.FloatingBar);
             var colorMenu = page.GetByTestId(UiTestIds.Editor.MenuColor);
 
-            await Expect(sourceInput).ToBeVisibleAsync();
+            await Expect(sourceInput)
+                .ToBeVisibleAsync(new() { Timeout = BrowserTestConstants.Timing.DefaultVisibleTimeoutMs });
             await sourceInput.EvaluateAsync(
                 "(element, target) => { const start = element.value.indexOf(target); element.focus(); element.setSelectionRange(start, start + target.length); element.dispatchEvent(new Event('select', { bubbles: true })); element.dispatchEvent(new Event('keyup', { bubbles: true })); }",
                 BrowserTestConstants.Editor.Welcome);

tests/PrompterOne.App.UITests/Learn/LearnStartupAlignmentTests.cs

@@ -68,6 +68,7 @@ private static string BuildStartupTraceScript()
                 const learnLineTestId = {{ToJsString(UiTestIds.Learn.OrpLine)}};
                 const learnWordTestId = {{ToJsString(UiTestIds.Learn.Word)}};
                 const maxSamples = 16;
+                const maxAnimationFramePasses = maxSamples;
 
                 window.__learnStartupTrace = [];
 
@@ -98,13 +99,28 @@ private static string BuildStartupTraceScript()
                     });
                 };
 
+                let animationFramePasses = 0;
+                const captureOnAnimationFrame = () => {
+                    capture();
+
+                    if (window.__learnStartupTrace.length >= maxSamples || animationFramePasses >= maxAnimationFramePasses) {
+                        return;
+                    }
+
+                    animationFramePasses += 1;
+                    window.requestAnimationFrame(captureOnAnimationFrame);
+                };
+
                 new MutationObserver(capture).observe(document, {
                     attributeFilter: ['style', layoutReadyAttributeName],
                     attributes: true,
                     characterData: true,
                     childList: true,
                     subtree: true
                 });
+
+                capture();
+                window.requestAnimationFrame(captureOnAnimationFrame);
             })();
             """;
     }

tests/PrompterOne.App.UITests/Media/recording-file-harness.js

@@ -6,6 +6,8 @@
     const minimumAudibleFrequencyValue = 8;
     const minimumVisibleChannelValue = 12;
     const minimumVisiblePixelCount = 16;
+    const visibleVideoProbeTimeoutMs = 1500;
+    const visibleVideoPollDelayMs = 100;
     const readyStateHaveCurrentData = 2;
 
     if (typeof window[harnessGlobalName] === "object" && window[harnessGlobalName] !== null) {
@@ -115,6 +117,36 @@
         };
     }
 
+    async function waitForNextVideoFrame(videoElement) {
+        if (typeof videoElement.requestVideoFrameCallback === "function") {
+            await new Promise(resolve => videoElement.requestVideoFrameCallback(() => resolve()));
+            return;
+        }
+
+        await new Promise(resolve => window.setTimeout(resolve, visibleVideoPollDelayMs));
+    }
+
+    async function detectVisibleVideoAcrossFrames(videoElement) {
+        const deadline = Date.now() + visibleVideoProbeTimeoutMs;
+        let highestVisiblePixelCount = 0;
+
+        while (Date.now() <= deadline) {
+            const sample = detectVisibleVideo(videoElement);
+            highestVisiblePixelCount = Math.max(highestVisiblePixelCount, sample.nonBlackPixelCount);
+
+            if (sample.hasVisibleVideo) {
+                return sample;
+            }
+
+            await waitForNextVideoFrame(videoElement);
+        }
+
+        return {
+            hasVisibleVideo: highestVisiblePixelCount >= minimumVisiblePixelCount,
+            nonBlackPixelCount: highestVisiblePixelCount
+        };
+    }
+
     async function analyzeSavedRecording() {
         if (!(savedBlob instanceof Blob)) {
             return null;
@@ -139,7 +171,7 @@
                 : null;
             const hasAudioTrack = Boolean(captureStream?.getAudioTracks?.().length);
             const hasAudibleAudio = await detectAudibleAudio(captureStream);
-            const visibleVideo = detectVisibleVideo(videoElement);
+            const visibleVideo = await detectVisibleVideoAcrossFrames(videoElement);
 
             captureStream?.getTracks?.().forEach(track => track.stop());