tests optimizations

playwright/widget/hotswap-legacy-compat.test.ts

@@ -65,15 +65,13 @@ widgetTest(
         .contentFrame();
       await expect(frame.getByTestId("videoTile")).toHaveCount(2);
 
-      // There are no other options than to wait for all media to be ready?
+      // Wait for "Waiting for media..." to disappear (with timeout)
-      // Or it is too flaky :/
+      await expect(frame.getByText("Waiting for media...")).not.toBeVisible({
-      await user.page.waitForTimeout(3000);
+        timeout: 10000, // Maximum time to wait
-      // No one should be waiting for media
+      });
-      await expect(frame.getByText("Waiting for media...")).not.toBeVisible();
 
       // There should be 2 video elements, visible and autoplaying
-      const videoElements = await frame.locator("video").all();
+      await expect(frame.locator("video")).toHaveCount(2);
-      expect(videoElements.length).toBe(2);
 
       const blockDisplayCount = await frame
         .locator("video")

playwright/widget/huddle-call.test.ts

@@ -8,7 +8,7 @@ Please see LICENSE in the repository root for full details.
 import { expect, test } from "@playwright/test";
 
 import { widgetTest } from "../fixtures/widget-user.ts";
-import { HOST1, HOST2, TestHelpers } from "./test-helpers.ts";
+import { HOST1, TestHelpers } from "./test-helpers.ts";
 
 widgetTest("Create and join a group call", async ({ addUser, browserName }) => {
   // increase the timeouts, it is a long test and it is annoying to retry from the beginning for a single timeout.
@@ -50,52 +50,56 @@ widgetTest("Create and join a group call", async ({ addUser, browserName }) => {
 
   await TestHelpers.joinCallFromLobby(valere.page);
 
-  for (const user of [timo, robin, halfshot, florian]) {
+  await Promise.all(
-    await TestHelpers.joinCallInCurrentRoom(user.page);
+    [timo, robin, halfshot, florian].map(async (user) => {
-  }
+      await TestHelpers.joinCallInCurrentRoom(user.page);
+    }),
+  );
 
-  for (const user of [timo, robin, halfshot, florian]) {
+  await Promise.all(
-    const frame = user.page
+    [timo, robin, halfshot, florian].map(async (user) => {
-      .locator('iframe[title="Element Call"]')
+      const frame = user.page
-      .contentFrame();
+        .locator('iframe[title="Element Call"]')
-    // No lobby, should start with video on
+        .contentFrame();
-    await expect(
+      await expect(
-      frame.getByRole("switch", { name: "Stop video", checked: true }),
+        frame.getByRole("switch", { name: "Stop video", checked: true }),
-    ).toBeVisible();
+      ).toBeVisible();
-  }
+    }),
+  );
 
   // We should see 5 video tiles everywhere now
-  for (const user of [valere, timo, robin, halfshot, florian]) {
+  await Promise.all(
-    const frame = user.page
+    [valere, timo, robin, halfshot, florian].map(async (user) => {
-      .locator('iframe[title="Element Call"]')
+      const frame = user.page
-      .contentFrame();
+        .locator('iframe[title="Element Call"]')
-    await expect(frame.getByTestId("videoTile")).toHaveCount(5);
+        .contentFrame();
-    for (const participant of [valere, timo, robin, halfshot, florian]) {
+      await expect(frame.getByTestId("videoTile")).toHaveCount(5);
-      // Check the names are correct
+      for (const participant of [valere, timo, robin, halfshot, florian]) {
-      await expect(frame.getByText(participant.displayName)).toBeVisible();
+        // Check the names are correct
-    }
+        await expect(frame.getByText(participant.displayName)).toBeVisible();
+      }
 
-    // There is no other options than to wait for all media to be ready?
+      // No one should be waiting for media
-    // Or it is too flaky :/
+      await expect(frame.getByText("Waiting for media...")).not.toBeVisible({
-    await user.page.waitForTimeout(5000);
+        // Use a bigger timeout here
-    // No one should be waiting for media
+        timeout: 10000,
-    await expect(frame.getByText("Waiting for media...")).not.toBeVisible();
+      });
 
-    // There should be 5 video elements, visible and autoplaying
+      // There should be 5 video elements, visible and autoplaying
-    const videoElements = await frame.locator("video").all();
+      await expect(frame.locator("video")).toHaveCount(5);
-    expect(videoElements.length).toBe(5);
+      await expect(frame.locator("video[autoplay]")).toHaveCount(5);
-    await expect(frame.locator("video[autoplay]")).toHaveCount(5);
 
-    const blockDisplayCount = await frame
+      const blockDisplayCount = await frame
-      .locator("video")
+        .locator("video")
-      .evaluateAll(
+        .evaluateAll(
-        (videos: Element[]) =>
+          (videos: Element[]) =>
-          videos.filter(
+            videos.filter(
-            (v: Element) => window.getComputedStyle(v).display === "block",
+              (v: Element) => window.getComputedStyle(v).display === "block",
-          ).length,
+            ).length,
-      );
+        );
-    expect(blockDisplayCount).toBe(5);
+      expect(blockDisplayCount).toBe(5);
-  }
+    }),
+  );
 
   // Quickly test muting one participant to see it reflects and that our asserts works
   const florianFrame = florian.page
@@ -111,15 +115,14 @@ widgetTest("Create and join a group call", async ({ addUser, browserName }) => {
   await expect(florianVideoButton).toHaveAccessibleName("Start video");
   await expect(florianVideoButton).not.toBeChecked();
 
-  // wait a bit for the state to propagate
-  await valere.page.waitForTimeout(3000);
   {
     const frame = valere.page
       .locator('iframe[title="Element Call"]')
       .contentFrame();
 
-    const videoElements = await frame.locator("video").all();
+    await expect(frame.locator("video")).toHaveCount(5, {
-    expect(videoElements.length).toBe(5);
+      timeout: 10000,
+    });
 
     const blockDisplayCount = await frame
       .locator("video")

playwright/widget/test-helpers.ts

@@ -105,7 +105,10 @@ export class TestHelpers {
 
     await expect(
       page.getByRole("heading", { name: `Welcome ${username}` }),
-    ).toBeVisible();
+    ).toBeVisible({
+      // Increase timeout here
+      timeout: 10000,
+    });
 
     await this.maybeDismissBrowserNotSupportedToast(page);
     await this.maybeDismissServiceWorkerWarningToast(page);