test: yfm html visual test stability (#1073)

Author: makhnatkin

demo/tests/playwright/core/types.ts

@@ -57,6 +57,7 @@ export interface WaitFixture {
     visible(selector: Locator): Promise<void>;
     hidden(selector: Locator): Promise<void>;
     timeout(delay?: number): Promise<void>;
+    markupRendered(delay?: number, stableThreshold?: number): Promise<void>;
 }
 
 export interface CaptureScreenshotParams extends PageScreenshotOptions {

demo/tests/playwright/core/wait.ts

@@ -3,6 +3,10 @@ import type {Locator} from '@playwright/test';
 import type {PlaywrightFixture, WaitFixture} from './types';
 
 const DEFAULT_DELAY = 100;
+const MAX_STABLE_CHECKS = 50;
+const REQUIRED_STABLE_COUNT = 2;
+
+type Snapshot = {text: string; height: number};
 
 export const wait: PlaywrightFixture<WaitFixture> = async ({page}, use) => {
     await use({
@@ -23,5 +27,36 @@ export const wait: PlaywrightFixture<WaitFixture> = async ({page}, use) => {
         timeout: async (delay = DEFAULT_DELAY) => {
             await page.waitForTimeout(delay);
         },
+        markupRendered: async (delay = DEFAULT_DELAY, stableThreshold = REQUIRED_STABLE_COUNT) => {
+            const locator = page.locator('.playground__markup');
+            await locator.waitFor({state: 'visible'});
+
+            let prev: Snapshot = {text: '', height: 0};
+            let stableCount = 0;
+
+            for (let i = 0; i < MAX_STABLE_CHECKS; i++) {
+                const curr = await getMarkupPreviewMetrics(locator);
+
+                if (isStable(prev, curr)) {
+                    stableCount++;
+                    if (stableCount >= stableThreshold) break;
+                } else {
+                    stableCount = 0;
+                    prev = curr;
+                }
+
+                await page.waitForTimeout(delay);
+            }
+        },
     });
 };
+
+async function getMarkupPreviewMetrics(locator: Locator): Promise<Snapshot> {
+    const text = (await locator.textContent())?.trim() ?? '';
+    const height = (await locator.boundingBox())?.height ?? 0;
+    return {text, height};
+}
+
+function isStable(prev: Snapshot, curr: Snapshot): boolean {
+    return Boolean(curr.text) && prev.text === curr.text && prev.height === curr.height;
+}

demo/tests/visual-tests/YfmExtensions.visual.test.tsx

@@ -23,11 +23,12 @@ test.describe('Extensions, YFM', () => {
         await mount(<YFMStories.YfmTabs />);
         await expectScreenshot();
     });
-    test('YFM HTML', async ({mount, expectScreenshot, page}) => {
+    test('YFM HTML', async ({mount, expectScreenshot, page, wait}) => {
         await mount(<YFMStories.YfmHtmlBlock />);
 
         // TODO: @makhnatkin Improve iframe height stabilization wait
         await page.waitForTimeout(200);
+        await wait.markupRendered();
         await expectScreenshot();
     });
     test('YFM File', async ({mount, expectScreenshot}) => {