test(video-player): wait for widget after tab clicks, fix poster race (#2232)

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/accessibility-helper-web/e2e/AccessibilityHelper.spec.js

@@ -57,7 +57,6 @@ test.describe("with single target", () => {
     });
     test.describe("with multiple targets", () => {
         test("sets attributes when condition is true", async ({ page }) => {
-            await page.click(".mx-name-actionButton2");
             await page.click(".mx-name-actionButton2");
             await waitForMendixApp(page);
             await page.click(".mx-name-radioButtons2 input:first-child");
@@ -88,7 +87,6 @@ test.describe("with single target", () => {
         });
 
         test("updates target attributes using a NF", async ({ page }) => {
-            await page.click(".mx-name-actionButton2");
             await page.click(".mx-name-actionButton2");
             await waitForMendixApp(page);
             await page.click(".mx-name-radioButtons2 input:first-child");
@@ -117,7 +115,6 @@ test.describe("with single target", () => {
         test("sets target attributes even though target is conditionally shown after being hidden", async ({
             page
         }) => {
-            await page.click(".mx-name-actionButton2");
             await page.click(".mx-name-actionButton2");
             await waitForMendixApp(page);
             await page.click(".mx-name-radioButtons2 input:first-child");

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

@@ -1,5 +1,5 @@
 import { test, expect } from "@mendix/run-e2e/fixtures";
-import { waitForDataReady } from "@mendix/run-e2e/mendix-helpers";
+import { waitForWidget, waitFrames } from "@mendix/run-e2e/mendix-helpers";
 
 test.describe("Video Player", () => {
     test.beforeEach(async ({ page }) => {
@@ -41,6 +41,7 @@ test.describe("Tab page", () => {
 
     test("renders youtube video", async ({ page }) => {
         await page.locator(".mx-name-tabPage1").click();
+        await waitForWidget(page, "videoPlayer1");
         await expect(
             page.locator(".widget-video-player.widget-video-player-container.mx-name-videoPlayer1.size-box iframe")
         ).toBeVisible();
@@ -52,6 +53,7 @@ test.describe("Tab page", () => {
 
     test("renders vimeo video", async ({ page }) => {
         await page.locator(".mx-name-tabPage5").click();
+        await waitForWidget(page, "videoPlayer5");
         await expect(
             page.locator(".widget-video-player.widget-video-player-container.mx-name-videoPlayer5.size-box iframe")
         ).toBeVisible();
@@ -63,6 +65,7 @@ test.describe("Tab page", () => {
 
     test("renders dailymotion video", async ({ page }) => {
         await page.locator(".mx-name-tabPage4").click();
+        await waitForWidget(page, "videoPlayer4");
         await expect(
             page.locator(".widget-video-player.widget-video-player-container.mx-name-videoPlayer4.size-box iframe")
         ).toBeVisible();
@@ -74,6 +77,7 @@ test.describe("Tab page", () => {
 
     test("renders html5 video", async ({ page }) => {
         await page.locator(".mx-name-tabPage3").click();
+        await waitForWidget(page, "videoPlayer3");
         await expect(
             page.locator(".widget-video-player.widget-video-player-container.mx-name-videoPlayer3.size-box video")
         ).toBeVisible();
@@ -112,7 +116,21 @@ test.describe("External video", () => {
         await widget.scrollIntoViewIfNeeded();
         await expect(widget).toBeVisible();
         await expect(videoLocator).toHaveAttribute("poster", /.+/);
-        await waitForDataReady(page);
+        // Wait for poster image to decode in-page before screenshotting.
+        // page.evaluate with a separate Image() is unreliable — the promise can
+        // resolve before the <video> element itself has rendered the poster frame.
+        await videoLocator.evaluate(el =>
+            el.poster
+                ? new Promise(r => {
+                      const i = new Image();
+                      i.onload = i.onerror = r;
+                      i.src = el.poster;
+                      if (i.complete) r();
+                  })
+                : Promise.resolve()
+        );
+        // Wait two animation frames so the browser flushes layout and paints the poster frame.
+        await waitFrames(page, 2);
         await expect(widget).toHaveScreenshot("videoPlayerExternalPoster.png");
     });
 
@@ -122,21 +140,21 @@ test.describe("External video", () => {
         });
 
         test("renders video aspect ratio correctly", async ({ page }) => {
-            await expect(page.locator(".mx-name-videoPlayer1")).toBeVisible();
+            await waitForWidget(page, "videoPlayer1");
             const videoElement = await page.locator(".mx-name-videoPlayer1").first().boundingBox();
             const { width, height } = videoElement;
             const aspectRatio = Number(width / height);
             expect(aspectRatio).toBeCloseTo(16 / 9, 0.1);
 
             await page.locator(".mx-name-tabPage2").click();
-            await expect(page.locator(".mx-name-videoPlayer3")).toBeVisible();
+            await waitForWidget(page, "videoPlayer3");
             const videoElement2 = await page.locator(".mx-name-videoPlayer3").first().boundingBox();
             const { width: width2, height: height2 } = videoElement2;
             const aspectRatio2 = Number(width2 / height2);
             expect(aspectRatio2).toBeCloseTo(3 / 2, 0.1);
 
             await page.locator(".mx-name-tabPage3").click();
-            await expect(page.locator(".mx-name-videoPlayer5")).toBeVisible();
+            await waitForWidget(page, "videoPlayer5");
             const videoElement3 = await page.locator(".mx-name-videoPlayer5").first().boundingBox();
             const { width: width3, height: height3 } = videoElement3;
             expect(width3).toEqual(height3);