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

Author: samuelreichert

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 } 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,19 @@ 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()
+        );
         await expect(widget).toHaveScreenshot("videoPlayerExternalPoster.png");
     });
 
@@ -122,21 +138,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);