test(video-player): add waitFrames helper to improve animation frame handling

Author: samuelreichert

automation/run-e2e/lib/mendix-helpers.mjs

@@ -41,6 +41,12 @@ export async function navigateToPage(page, path, timeout = 30_000) {
     await waitForMendixApp(page, timeout);
 }
 
+export async function waitFrames(page, n = 2) {
+    for (let i = 0; i < n; i++) {
+        await page.evaluate(() => new Promise(r => requestAnimationFrame(r)));
+    }
+}
+
 export async function checkAccessibility(page, selector, options = {}) {
     const AxeBuilder = (await import("@axe-core/playwright")).default;
     let builder = new AxeBuilder({ page }).withTags(options.tags || ["wcag21aa"]);

packages/pluggableWidgets/video-player-web/e2e/VideoPlayer.spec.js

@@ -1,5 +1,5 @@
 import { test, expect } from "@mendix/run-e2e/fixtures";
-import { waitForWidget } from "@mendix/run-e2e/mendix-helpers";
+import { waitForWidget, waitFrames } from "@mendix/run-e2e/mendix-helpers";
 
 test.describe("Video Player", () => {
     test.beforeEach(async ({ page }) => {
@@ -130,7 +130,7 @@ test.describe("External video", () => {
                 : Promise.resolve()
         );
         // Wait two animation frames so the browser flushes layout and paints the poster frame.
-        await page.evaluate(() => new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r))));
+        await waitFrames(page, 2);
         await expect(widget).toHaveScreenshot("videoPlayerExternalPoster.png");
     });