Stabilize reader alignment assertions

Author: KSemenenko

tests/PrompterOne.Web.UITests.Reader/Teleprompter/TeleprompterAlignmentTooltipFlowTests.cs

@@ -12,7 +12,7 @@ public sealed class TeleprompterAlignmentTooltipFlowTests(StandaloneAppFixture f
     private const string LeftRailTooltipStep = "01-left-rail-tooltip";
     private const string RightRailTooltipScenario = "teleprompter-alignment-tooltips-right";
     private const string RightRailTooltipStep = "02-right-rail-tooltip";
-    private const int RevealProbeSchedulerSlackPolls = 4;
+    private const int RevealProbeSchedulerSlackPolls = 8;
 
     private readonly record struct ElementBounds(double Left, double Top, double Right, double Bottom);
 

tests/PrompterOne.Web.UITests.Reader/Teleprompter/TeleprompterFidelityTests.cs

@@ -30,21 +30,24 @@ await Expect(page.GetByTestId(UiTestIds.Teleprompter.Page))
                 .ToBeVisibleAsync(new() { Timeout = BrowserTestConstants.Timing.ExtendedVisibleTimeoutMs });
 
             var focalGuide = page.GetByTestId(UiTestIds.Teleprompter.FocalGuide);
-            var firstWord = page.GetByTestId(UiTestIds.Teleprompter.CardWord(0, 0, 0));
+            var firstWordSelector = TeleprompterReaderAlignmentAssertions.BuildDataTestSelector(
+                UiTestIds.Teleprompter.CardWord(0, 0, 0));
+            var firstWord = page.Locator(firstWordSelector);
 
             await Expect(firstWord).ToBeVisibleAsync();
-            await AssertGuideAlignmentAsync(page, focalGuide, firstWord);
+            await TeleprompterReaderAlignmentAssertions.AssertWordAlignedToGuideAsync(page, firstWordSelector);
 
             await page.GetByTestId(UiTestIds.Teleprompter.FocalSlider).EvaluateAsync(
                 $$"""
                 element => {
                     element.value = '{{BrowserTestConstants.Teleprompter.AdjustedFocalPointPercent}}';
                     element.dispatchEvent(new Event('input', { bubbles: true }));
+                    element.dispatchEvent(new Event('change', { bubbles: true }));
                 }
                 """);
 
             await Expect(focalGuide).ToHaveAttributeAsync("style", BrowserTestConstants.Teleprompter.AdjustedFocalGuideStyle);
-            await AssertGuideAlignmentAsync(page, focalGuide, firstWord);
+            await TeleprompterReaderAlignmentAssertions.AssertWordAlignedToGuideAsync(page, firstWordSelector);
         }
         finally
         {
@@ -219,29 +222,6 @@ await Expect(cameraLayer).ToHaveAttributeAsync(
             BrowserTestConstants.Teleprompter.ActiveStateValue);
     }
 
-    private static async Task AssertGuideAlignmentAsync(
-        Microsoft.Playwright.IPage page,
-        Microsoft.Playwright.ILocator focalGuide,
-        Microsoft.Playwright.ILocator word)
-    {
-        var attemptCount = BrowserTestConstants.Teleprompter.AlignmentTimeoutMs /
-            BrowserTestConstants.Teleprompter.AlignmentPollDelayMs;
-        var lastDelta = double.MaxValue;
-
-        for (var attempt = 0; attempt < attemptCount; attempt++)
-        {
-            lastDelta = await MeasureVerticalCenterDeltaAsync(focalGuide, word);
-            if (Math.Abs(lastDelta) <= BrowserTestConstants.Teleprompter.AlignmentTolerancePx)
-            {
-                return;
-            }
-
-            await page.WaitForTimeoutAsync(BrowserTestConstants.Teleprompter.AlignmentPollDelayMs);
-        }
-
-        await Assert.That(Math.Abs(lastDelta)).IsBetween(0, BrowserTestConstants.Teleprompter.AlignmentTolerancePx);
-    }
-
     private static async Task<double> MeasureVerticalCenterDeltaAsync(
         Microsoft.Playwright.ILocator focalGuide,
         Microsoft.Playwright.ILocator word)

tests/PrompterOne.Web.UITests.Reader/Teleprompter/TeleprompterFullFlowTests.cs

@@ -154,52 +154,13 @@ private static async Task AssertProductLaunchTpsRenderingAsync(Microsoft.Playwri
 
     private static async Task AssertCurrentActiveWordAlignedAsync(Microsoft.Playwright.IPage page)
     {
-        var activeWord = page.Locator(BrowserTestConstants.Teleprompter.ActiveWordSelector);
+        var activeWordSelector = BrowserTestConstants.Teleprompter.ActiveWordSelector;
+        var activeWord = page.Locator(activeWordSelector);
         await Expect(activeWord).ToBeVisibleAsync(new()
         {
             Timeout = BrowserTestConstants.Timing.ReaderPlaybackAdvanceTimeoutMs
         });
-        await AssertGuideAlignmentAsync(
-            page,
-            page.GetByTestId(UiTestIds.Teleprompter.FocalGuide),
-            activeWord);
-    }
-
-    private static async Task AssertGuideAlignmentAsync(
-        Microsoft.Playwright.IPage page,
-        Microsoft.Playwright.ILocator focalGuide,
-        Microsoft.Playwright.ILocator word)
-    {
-        var attemptCount = BrowserTestConstants.Teleprompter.AlignmentTimeoutMs /
-            BrowserTestConstants.Teleprompter.AlignmentPollDelayMs;
-        var lastDelta = double.MaxValue;
-
-        for (var attempt = 0; attempt < attemptCount; attempt++)
-        {
-            lastDelta = await MeasureVerticalCenterDeltaAsync(focalGuide, word);
-            if (Math.Abs(lastDelta) <= BrowserTestConstants.Teleprompter.AlignmentTolerancePx)
-            {
-                return;
-            }
-
-            await page.WaitForTimeoutAsync(BrowserTestConstants.Teleprompter.AlignmentPollDelayMs);
-        }
-
-        await Assert.That(Math.Abs(lastDelta)).IsBetween(0, BrowserTestConstants.Teleprompter.AlignmentTolerancePx);
-    }
-
-    private static async Task<double> MeasureVerticalCenterDeltaAsync(
-        Microsoft.Playwright.ILocator focalGuide,
-        Microsoft.Playwright.ILocator word)
-    {
-        var focalGuideBox = await focalGuide.BoundingBoxAsync();
-        var wordBox = await word.BoundingBoxAsync();
-
-        await Assert.That(focalGuideBox).IsNotNull();
-        await Assert.That(wordBox).IsNotNull();
-
-        return (focalGuideBox.Y + (focalGuideBox.Height / 2d)) -
-            (wordBox.Y + (wordBox.Height / 2d));
+        await TeleprompterReaderAlignmentAssertions.AssertWordAlignedToGuideAsync(page, activeWordSelector);
     }
 
     private static async Task<ReaderWordProbe> GetWordProbeAsync(Microsoft.Playwright.IPage page, int cardIndex, string wordText)

tests/PrompterOne.Web.UITests.Reader/Teleprompter/TeleprompterReaderAlignmentAssertions.cs

@@ -0,0 +1,83 @@
+using Microsoft.Playwright;
+using PrompterOne.Shared.Contracts;
+using static Microsoft.Playwright.Assertions;
+
+namespace PrompterOne.Web.UITests;
+
+internal static class TeleprompterReaderAlignmentAssertions
+{
+    internal static string BuildDataTestSelector(string testId) =>
+        $"[{BrowserTestConstants.Html.DataTestAttribute}='{testId}']";
+
+    internal static async Task AssertWordAlignedToGuideAsync(IPage page, string wordSelector)
+    {
+        var word = page.Locator(wordSelector);
+        await Expect(page.GetByTestId(UiTestIds.Teleprompter.FocalGuide)).ToBeVisibleAsync();
+        await Expect(word).ToBeVisibleAsync(new()
+        {
+            Timeout = BrowserTestConstants.Timing.ReaderPlaybackAdvanceTimeoutMs
+        });
+
+        var attemptCount = BrowserTestConstants.Timing.ReaderPlaybackAdvanceTimeoutMs /
+            BrowserTestConstants.Teleprompter.AlignmentPollDelayMs;
+        ReaderAlignmentProbe lastProbe = new();
+
+        for (var attempt = 0; attempt < attemptCount; attempt++)
+        {
+            lastProbe = await CaptureAlignmentProbeAsync(page, wordSelector);
+            if (lastProbe.IsMeasurable &&
+                lastProbe.IsActiveCard &&
+                Math.Abs(lastProbe.CenterDelta) <= BrowserTestConstants.Teleprompter.AlignmentTolerancePx)
+            {
+                return;
+            }
+
+            await page.WaitForTimeoutAsync(BrowserTestConstants.Teleprompter.AlignmentPollDelayMs);
+        }
+
+        await Assert.That(lastProbe.IsMeasurable).IsTrue();
+        await Assert.That(lastProbe.IsActiveCard).IsTrue();
+        await Assert.That(Math.Abs(lastProbe.CenterDelta))
+            .IsBetween(0d, BrowserTestConstants.Teleprompter.AlignmentTolerancePx);
+    }
+
+    private static Task<ReaderAlignmentProbe> CaptureAlignmentProbeAsync(IPage page, string wordSelector) =>
+        page.EvaluateAsync<ReaderAlignmentProbe>(
+            """
+            args => {
+                const focalGuide = document.querySelector(`[data-test="${args.focalGuideTestId}"]`);
+                const word = document.querySelector(args.wordSelector);
+
+                if (!(focalGuide instanceof HTMLElement) || !(word instanceof HTMLElement)) {
+                    return { isMeasurable: false, isActiveCard: false, centerDelta: Number.MAX_VALUE };
+                }
+
+                const card = word.closest(`[${args.cardStateAttributeName}]`);
+                const focalGuideRect = focalGuide.getBoundingClientRect();
+                const wordRect = word.getBoundingClientRect();
+
+                return {
+                    isMeasurable: true,
+                    isActiveCard: card instanceof HTMLElement &&
+                        card.getAttribute(args.cardStateAttributeName) === args.activeState,
+                    centerDelta:
+                        (focalGuideRect.top + focalGuideRect.height / 2) -
+                        (wordRect.top + wordRect.height / 2)
+                };
+            }
+            """,
+            new
+            {
+                activeState = UiDataAttributes.Teleprompter.ActiveState,
+                cardStateAttributeName = UiDataAttributes.Teleprompter.CardState,
+                focalGuideTestId = UiTestIds.Teleprompter.FocalGuide,
+                wordSelector
+            });
+
+    private sealed class ReaderAlignmentProbe
+    {
+        public bool IsMeasurable { get; set; }
+        public bool IsActiveCard { get; set; }
+        public double CenterDelta { get; set; } = double.MaxValue;
+    }
+}